make the sub-menu be the same width as the parent menu - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu sub menu

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu sub menu

Description

make the sub-menu be the same width as the parent menu

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit am</title> 
  <style>
body {<!--   ww w.j a  va  2 s. c  o  m-->
   background:Chartreuse;
}

.site-navigation {
   display:block;
   font-family:'Titillium Web', sans-serif;
   font-size:17px;
   font-weight:bold;
   margin:41px;
}

.site-navigation ul {
   background:yellow;
   list-style:none;
   margin:0;
   padding-left:0;
}

.site-navigation li {
   color:blue;
   background:pink;
   display:block;
   float:left;
   margin:0 3px 0 0;
   padding:13px;
   position:relative;
   text-decoration:none;
   text-transform:uppercase;
}

.site-navigation li a {
   color:OrangeRed;
   text-decoration:none;
   display:block;
}

.site-navigation li:hover {
   @include transition(background, 0.2s);
   background: #52a6df;
   cursor: pointer;
}
.site-navigation ul li ul {
   background:grey;
   visibility:hidden;
   float:left;
   min-width:151px;
   position:absolute;
   transition:visibility 0.66s ease-in;
   margin-top:13px;
   left:0;
   z-index:1000;
}

.site-navigation ul li:hover>ul,
.site-navigation ul li ul:hover {
   visibility:visible;
}

.site-navigation ul li ul li {
   clear:both;
   padding:6px 0 6px 19px;
   width:100%;
}

.site-navigation ul li ul li:hover {
   background:BlueViolet;
}
</style> 
 </head> 
 <body translate="no"> 
  <nav id="navigation" class="site-navigation" role="navigation"> 
   <ul class="menu"> 
    <li class="menu-item"> <a href="#">Lore</a> </li> 
    <li class="menu-item"> <a href="#">Lorem ip</a> 
     <ul class="dropdown"> 
      <li class="menu-item sub-menu"> <a href="#">Lor</a> </li> 
      <li class="menu-item sub-menu"> <a href="#">Lore</a> </li> 
      <li class="menu-item sub-menu"> <a href="#">Lorem </a> </li> 
      <li class="menu-item sub-menu"> <a href="#">Lor</a> </li> 
      <li class="menu-item sub-menu"> <a href="#">Lorem ips</a> </li> 
     </ul> </li> 
    <li class="menu-item"> <a href="#">Lorem ipsum</a> </li> 
    <li class="menu-item"> <a href="#">Lorem</a> </li> 
    <li class="menu-item"> <a href="#">Lorem ips</a> </li> 
   </ul> 
  </nav>  
 </body>
</html>

Related Tutorials