Show submenu with CSS without using an unordered list - 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

Show submenu with CSS without using an unordered list

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">
.navigation {<!--from w  w w.j  a  v a  2s . com-->
   margin:0;
   padding-left:0;
   list-style:none;
   float:left;
}

.navigation .submenu-wrapper {
   float:left;
   display:block;
   position:relative;
}

.navigation .submenu-wrapper:after {
   clear:both;
}

.navigation>a, .navigation .submenu-wrapper a {
   float:left;
   position:relative;
   display:block;
   font-size:21px;
   padding-right:15px;
   padding-left:15px;
   padding-top:6.6px;
   padding-bottom:9.6px;
   color:Chartreuse;
   text-decoration:none;
}

.submenu {
   position:absolute;
   top:100%;
   left:0;
   z-index:1001;
   display:none;
   float:left;
   min-width:161px;
   list-style:none;
   font-size:19px;
   text-align:left;
   background-color:yellow;
   border:2px solid blue;
   border-radius:0;
   box-shadow:none;
   border-left:none;
   border-right:none;
}

.navigation a:hover {
   color:pink;
   background-color:OrangeRed;
}

.navigation a.active {
   color:grey;
   background-color:BlueViolet;
}

.navigation .submenu-wrapper:hover {
   background:red;
}

.navigation .submenu-wrapper:hover .submenu {
   display:block;
}
</style> 
 </head> 
 <body> 
  <div class="navigation"> 
   <a class="active" href="/">Lore</a> 
   <a href="/">Lorem</a> 
   <a href="/">Lorem</a> 
   <div class="submenu-wrapper"> 
    <a href="/">Lorem</a> 
    <div class="submenu"> 
     <a href="/">Lorem ip</a> 
     <a href="/">Lorem ip</a> 
    </div> 
   </div> 
   <a href="/">Lorem</a> 
  </div>  
 </body>
</html>

Related Tutorials