Expand div along with the sub menu items when hover on the menu list - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Hover

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

Description

Expand div along with the sub menu items when hover on the menu list

Demo Code

ResultView the demo in separate window 

<html>
 <head></head> 
 <body> 
  <doctype! html> 
   <style>
nav ul {<!--from  w w w. j  a va 2s.  c o  m-->
   background:Chartreuse;
   background:linear-gradient(top, yellow 0%, blue 100%);
   background:-moz-linear-gradient(top, pink 0%, OrangeRed 100%);
   background:-webkit-linear-gradient(top, grey 0%,BlueViolet 100%);
   box-shadow:0px 0px 10px Chartreuse;
   padding:0 21px;
   border-radius:11px;
   list-style:none;
   position:relative;
   display:inline-table;
}

nav ul:after {
   content:"";
   clear:both;
   display:block;
}

nav ul li {
   float:left;
   width:171px;
}

nav ul li:hover {
   background:yellow;
}

nav ul li:hover a {
   color:blue;
}

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

nav ul li a {
   display:block;
   padding:26px 41px;
   color:pink;
   text-decoration:none;
}

nav ul ul {
   background:OrangeRed;
   border-radius:0px;
   padding:0;
   position:absolute;
   top:100%;
   display:none;
}

nav ul ul li {
   float:none;
   border-top:2px solid grey;
   border-bottom:2px solid BlueViolet;
   position:relative;
}

nav ul ul li a {
   padding:16px 41px;
   color:Chartreuse;
}

nav ul ul li a:hover {
   background:yellow;
}
</style> 
   <div style="width:100%;background:blue;"> 
    <nav> 
     <ul> 
      <li> <a href="#">Lore</a> </li> 
      <li> <a href="#">Lorem ips</a> 
       <ul> 
        <li> <a href="#">Lorem ips</a> </li> 
        <li> <a href="#">Lorem ipsum</a> </li> 
        <li> <a href="#">Lorem ipsu</a> 
         <ul> 
          <li> <a href="#">Lore</a> </li> 
          <li> <a href="#">Lor</a> </li> 
         </ul> </li> 
       </ul> </li> 
      <li> <a href="#">Lorem ip</a> 
       <ul> 
        <li> <a href="#">Lorem ipsu</a> </li> 
        <li> <a href="#">Lorem ipsum dol</a> </li> 
       </ul> </li> 
      <li> <a href="#">Lorem ipsum</a> </li> 
     </ul> 
    </nav> 
   </div> 
  </doctype!>  
 </body>
</html>

Related Tutorials