CSS Menu with Hover - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Hover

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

Description

CSS Menu with Hover

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">
#topbar {<!--from   w  ww . j a  v  a  2s.  c  o  m-->
   width:100%;
   height:81px;
   background-color:Chartreuse;
}

#topbar-inner {
   width:1001px;
   margin:0 auto 0 auto;
}

#logo {
   display:inline;
   float:left;
   margin-top:21px;
}

#menu {
   display:inline;
   float:right;
}

#menu>ul>li {
   display:inline-block;
   border-top:5px solid yellow;
   margin-right:21px;
   padding-top:21px;
   min-width:121px;
}

#menu>li {
   display:inline-block;
   list-style:none;
   margin-top:26px;
   margin-left:auto;
   margin-right:auto;
}

#menu li a {
   color:blue;
   display:block;
}

#menu li:hover {
   border-top-color:pink;
}

#menu li:hover a {
   color:OrangeRed;
}
</style> 
 </head> 
 <body> 
  <div id="topbar"> 
   <div id="topbar-inner"> 
    <div id="logo">
      Lorem 
    </div> 
    <!-- logo --> 
    <div id="menu"> 
     <ul> 
      <li> <a href="">Lore</a> </li> 
      <li> <a href="">Lorem ip</a> </li> 
      <li> <a href="">Lorem ip</a> </li> 
      <li> <a href="">Lorem ipsum d</a> </li> 
      <li> <a href="">Lorem i</a> </li> 
      <li> <a href="">Lorem ipsu</a> </li> 
     </ul> 
    </div> 
    <!-- menu --> 
   </div> 
   <!-- topbar-inner --> 
  </div> 
  <!-- topbar -->  
 </body>
</html>

Related Tutorials