Home|HTML CSS Responsive Navbar

Html Css Responsive Navbar

Download

Required Dependencises

No dependencises used only HTML and CSS

html

<!doctype html>
<html>
  <head>
    <title>html css navbar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="main-nav">
      <nav>
        <ul>
          <li><a href="#">home</a></li>
          <li><a href="#">about</a></li>
          <li><a href="#">courses</a> <span>></span>
            <ul>
              <li><a href="#">dropdown1</a></li>
              <li><a href="#">dropdown2</a></li>
              <li><a href="#">dropdown3</a><span>></span>
                <ul>
                  <li><a href="#">dropdown1</a></li>
                  <li><a href="#">dropdown2</a></li>
                  <li><a href="#">dropdown3</a></li>
                  </ul>
              </li>
              </ul>
          </li>
          <li><a href="#">contact us</a>
          </li>
        </ul>
      </nav>
    </div>
  </body>
</html>

css

<style>

*{margin: 0; padding:0;}
.main-nav{background: #000;height: 50px; width:100%; margin-top:100px;}
nav{width:800px; margin:0px auto;}
nav ul li a:hover{color:#fff; text-decoration:none;}
nav ul li a{color:#fff; display: block; text-decoration:none; font-family: sans-serif; text-transform: uppercase; font-size: 12px;}
nav ul li {line-height: 50px; background: #000;list-style:none; float:left; width:160px; position: relative; text-align:center;}
nav ul li:hover{background: #555;}
nav ul li ul{display: none; position:absolute;}
nav ul li:hover > ul{display: block;}
nav ul li ul li ul{left:160px; top:0;}
nav ul li span{position: absolute;right: 20px;top: 0; position: absolute; color:#fff; transform:rotate(90deg);}
@media (max-width:768px){
nav ul li{float:none; width:100%;}
nav{width:100%;}
nav ul li ul{position: relative;}
nav ul li ul li ul{left:0;}
}

</style>