CSS Drop Down Menu and static List elements - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Dropdown

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu Dropdown

Description

CSS Drop Down Menu and static List elements

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">
nav {<!--from  ww w.  j a va  2 s  .co m-->
   margin:0px;
   padding:0px;
   height:76px;
   background-color:Chartreuse;
}

.brand {
   margin:auto;
   width:961px;
}

.company-name {
   padding:0px;
   margin:0px;
}

.UKLogo {
   padding:0px;
   margin:0px;
   position:relative;
   top:12px;
}

.navigation>ul>a>li {
   display:inline-block;
   margin:11px;
   position:relative;
   left:381px;
   top:-47px;
}

.navigation>ul>a {
   color:yellow;
   margin-left:41px;
   text-decoration:none;
   font-family:Lato;
   font-weight:301;
}

.navigation>ul>a:hover {
   color:blue;
   font-weight:301;
}

.course-li:hover .drop-down {
   left:0px;
}

.drop-down {
   position:absolute;
   left:-6px;
   z-index:2;
   background-color:pink;
   left:-10000px;
}

.course-li {
   position:relative;
}
</style> 
 </head> 
 <body> 
  <nav> 
   <div class="wrapper"> 
    <div class="brand"> 
     <a href="index.html"> <img class="UKLogo" src="https://www.java2s.com/style/demo/Opera.png" alt=""> </a> 
    </div> 
    <!-- brand --> 
    <div class="navigation"> 
     <ul class="nav-ul"> 
      <a href="index.html"> <li>Lorem </li> </a> 
      <a href="about.html"> <li>Lorem i</li> </a> 
      <a href="#"> <li class="course-li">Lorem ips 
        <ul class="drop-down"> 
         <li class="list-item">Lorem ipsum </li> 
         <li>Lorem ipsum</li> 
         <li>Lorem i</li> 
        </ul> </li> </a> 
      <a href="contact.html"> <li>Lorem ips</li> </a> 
     </ul> 
    </div> 
    <!-- Navigation --> 
   </div> 
   <!-- Wrapper --> 
  </nav>  
 </body>
</html>

Related Tutorials