make a sub navigation in html - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav Bar

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav Bar

Description

make a sub navigation in html

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!-- w  w  w  .j  a  v a  2  s  . co  m-->
   margin:0;
   padding:0;
   font-size:16px;
   font-family:"Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}

nav {
   background-color:Chartreuse;
   border:2px solid yellow;
   color:blue;
   display:block;
   margin:0;
}

nav ul {
   margin:0;
   padding:0;
   list-style:none;
}

nav ul li {
   margin:0;
   display:inline-block;
   list-style-type:none;
   transition:all 0.3s;
}

nav>ul>li>a {
   color:pink;
   display:block;
   line-height:3em;
   padding:0.6em 3em;
   text-decoration:none;
}

nav li>ul {
   display:none;
   margin-top:2px;
   background-color:OrangeRed;
}

nav li>ul li {
   display:block;
}

nav  li>ul li a {
   color:grey;
   display:block;
   line-height:3em;
   padding:0.6em 3em;
   text-decoration:none;
}

nav li:hover {
   background-color:BlueViolet;
}

nav li:hover>ul {
   position:absolute;
   display:block;
}

.logo-img {
   position:fixed;
   margin:11px 16px 16px 11px;
   left:0;
   display:inline;
}

.bg-div {
   background:Chartreuse;
   height:51px;
}

.bg-div nav {
   position:fixed;
   display:inline;
   right:0;
}
</style> 
 </head> 
 <body> 
  <div class="bg-div"> 
   <img class="logo-img" src="https://www.java2s.com/style/demo/Firefox.png" width="130" height="45"> 
   <nav> 
    <ul> 
     <li> <a href="#">Lorem ipsu</a> </li> 
     <li> <a href="#">Lorem i</a> </li> 
     <li> <a href="#">Lorem ipsum dolor sit amet,</a> </li> 
     <li> <a href="#">Lorem i</a> 
      <ul> 
       <li> <a href="#">Lorem ipsum dol</a> </li> 
       <li> <a href="#">Lorem ipsum do</a> </li> 
       <li> <a href="#">Lorem ipsum dolor s</a> </li> 
      </ul> </li> 
     <li> </li> 
     <li> <a href="#">Lorem</a> 
      <ul> 
       <li> <a href="#">Lorem</a> </li> 
       <li> <a href="#">Lorem ipsum</a> </li> 
       <li> <a href="#">Lorem ipsum dolor </a> </li> 
      </ul> </li> 
     <li> <a href="#">Lorem</a> </li> 
    </ul> 
   </nav> 
  </div>  
 </body>
</html>

Related Tutorials