Pure HTML and CSS dropdown list on hover navigation bar

Question

here is the HTML:

<select>
<red>
</select>
.

^ is what i tried to use but it doesnt look as good! thanks

What I need: A dropdown menu on hover. When cursor is on 'glossary' have a dropdown menu below glossary that can say anything! Thanks! Please make it the same size as the glossary box! Aparrt from that, a little transparancy would be cool too!

Thanks!

Answer 1

My suggestion to you would be to either learn some bootstrap becasue it makes a lot of the css coding and such a whole lot easier, or do a quick google search before asking on the form. Anyways:

html:

    <html>
<head>
  <meta charset="UTF-8">
  <title>Watts</title>
  <link rel="stylesheet" href="main.css" type="text/css">
</head>

<body>
  <ul>
    <li class="highlight"><a href="index.html">Home</a></li>
    <li><a href="reference.html">References</a></li>
    <li><a href="glossary.html">Glossary</a></li>
    <li>
      <a href="#">Products &#9662;</a>
      <ul class="dropdown">
        <li><a href="#">Laptops</a></li>
        <li><a href="#">Monitors</a></li>
        <li><a href="#">Printers</a></li>
      </ul>
    </li>
  </ul>
  </div>
</body>

</html>

CSS:

body
{
    margin: 0;
    padding: 0;
    background-color: #ccc;
} /* End of body rule */

ul 
{
    list-style: none;
    background-color: #444; /* A very dark shade of grey as a background colour. */
    text-align: center;
    margin: 0;
    padding: 0;
} /* End of ul rule */

li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
} /* End of li rule */

a
{
    color: #fff; /* A white colour. */
    text-decoration: none;
    display: block;
    transition: 0.65s;
} /* End of a rule */

a:hover
{
    background-color: #005f5f; /* rgb(0, 95, 95) - A colour similar to teal. */
} /* End of a:hover rule */

.highlight a /* Makes the block of the navigation page that you are on white on the navigation bar. */
{
    background-color: #fff; /* A white background colour. */
    cursor: default;
    color: #444
} /* End of .highlight a rule */
    ul{
        padding: 0;
        list-style: none;
        background: #f2f2f2;
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a{
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #939393;
    }
    ul li ul.dropdown{
        min-width: 125px; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li:hover ul.dropdown{
        display: block; /* Display the dropdown */
    }
    ul li ul.dropdown li{
        display: block;
    }

Answer 2

You can try this pure HTML/CSS Menu:

 *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} nav { width:100%; background:#000; display:inline-block;} nav ul { margin:0; padding:0;} nav ul li { margin:0; padding:0; list-style:none; display:inline-block; cursor:default;} nav ul li a { color:#fff; padding:10px; font:15px 'Roboto', Arial, Helvetica, sans-serif; text-decoration:none; display:inline-block;} nav > ul > li { float:left;} nav ul li:hover > a { color:#fff; background:#005f5f;} nav ul li a.active { color:#fff; background:#3b4747;} nav ul ul { width:auto; min-width:200px; display:none; background:#131313; position:absolute; z-index:555; text-align:left;} nav li:hover > ul { display:block;} nav ul ul ul { left:100%; top:0;} nav ul ul li { width:100%; display:block; float:none;} nav ul ul a { width:100%; padding:8px 15px; display:block; color:#fff; border-bottom:1px solid #111;} nav ul ul li:hover > a { background:#005f5f; color:#fff;}

 <nav> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">About</a></li> <li><a>Services</a> <ul> <li><a href="#">Sample Menu</a></li> <li><a href="#">Sample Menu</a></li> <li><a href="#">Sample Menu</a></li> <li><a href="#">Sample Menu</a></li> </ul> </li> <li><a href="#">Blog</a></li> <li><a>Support</a> <ul> <li><a href="#">Sample Menu</a></li> <li><a href="#">Sample Menu</a></li> </ul> </li> <li><a href="#">Contact Us</a></li> </ul> </nav>

Pure HTML and CSS dropdown list on hover navigation bar

Question

2 answers

solution1
1 2015-10-02 02:01:15

solution2
1 2015-10-02 04:48:52

Pure HTML and CSS dropdown list on hover navigation bar

Question

2 answers

solution1 1 2015-10-02 02:01:15

solution2 1 2015-10-02 04:48:52

solution1
1 2015-10-02 02:01:15

solution2
1 2015-10-02 04:48:52