CSS Menu

4/1/2014·5 min read

Create Menu without Javascript

 

key Css style

 ul.topnav li:hover > ul
 {
 	display: block;
 }
 

Html sample code

 <ul class="topnav">
     <li><a href="#">Home</a></li>
     <li>
         <a href="#">Blog</a>
         <ul >
             <li><a href="#">Sub Nav Link</a>
                 <ul>
                     <li><a href="#">Sub Nav Link</a></li>
                     <li><a href="#">Sub Nav Link</a></li>
                 </ul>
             </li>
             <li><a href="#">Sub Nav Link</a></li>
         </ul>
     </li>
     <li>
         <a href="#">About </a>
         <ul>
             <li><a href="#">Sub Nav Link</a></li>
             <li><a href="#">Sub Nav Link</a></li>
         </ul>
     </li>
     <li>
        <a href="#">Contact</a>
      <ul >
             <li><a href="#">Sub Nav Link</a></li>
             <li><a href="#">Sub Nav Link</a></li>
         </ul>
     </li>
     <li><a href="#">Advertise</a>
     <ul >
             <li><a href="#">Sub Nav Link</a></li>
             <li><a href="#">Sub Nav Link</a></li>
         </ul>
     </li>
     <li><a href="#">Demo</a>
     <ul >
             <li><a href="#">Sub Nav Link</a></li>
             <li><a href="#">Sub Nav Link</a></li>
         </ul>  </li>
     <li><a href="#">Links</a>
     <ul >
             <li><a href="#">Sub Nav Link</a></li>
             <li><a href="#">Sub Nav Link</a></li>
         </ul>
     </li>
 </ul>
 

sample css style

 ul.topnav {  
     list-style: none;  
     padding: 0 20px;      
     margin: 0;  
     float: left;  
     width: 920px;  
     background: #222;  
     font-size: 1.2em;  
     background:#222;  
 }  
 ul.topnav li {  
     float: left;  
     margin: 0;    
     padding: 0 15px 0 0;  
     position: relative; /*--Declare X and Y axis base for sub navigation--*/
 }  
 ul.topnav li a{  
     padding: 10px 5px;  
     color: #fff;  
     display: block;  
     text-decoration: none;  
     float: left;  
 }  
 ul.topnav li a:hover{  
     background: darkred;  
 }
 
 ul.topnav li ul
 {
 	display: none;
 }
 
 
 ul.topnav li:hover > ul
 {
 	display: block;
 }
 
 ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*--Hover effect for trigger--*/
 ul.topnav li ul {  
     list-style: none;  
     position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
     left: 0; top: 35px;  
     background: #333;  
     margin: 0; padding: 0;  
     display: none;  
     float: left;  
     width: 170px;  
     border: 1px solid #111;  
 }  
 ul.topnav li ul li{  
     margin: 0; padding: 0;  
     border-top: 1px solid #252525; /*--Create bevel effect--*/
     border-bottom: 1px solid #444; /*--Create bevel effect--*/
     clear: both;  
     width: 170px;  
 }  
 html ul.topnav li ul li a {  
     float: left;  
     width: 145px;  
     background: #333;  
     padding-left: 20px;  
 }  
 html ul.topnav li ul li a:hover { /*--Hover effect for subnav links--*/
     background: #222;   
 }
 

Following is link to go to Demo page

demo of Css menu