Control height w/ percentage in CSS menu - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

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

Description

Control height w/ percentage in CSS menu

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">
html, body {
   background:gray;
   margin:0;
   padding:0;
   font-size:19px;
}

li, ul {
   list-style:none;
}

nav {<!--from  w  ww .  ja va 2  s . c  o  m-->
   opacity:0.9;
   padding-left:0.272%;
   text-align:left;
   position:fixed;
   top:3.96296296297%;
   background:Chartreuse;
   width:100%;
   height:8.40740740742%;
   z-index:26 !important;
}

nav ul ul {
   display:none;
}

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

nav>ul {
   display:inline-table;
   position:fixed;
   width:100%;
   height:81%;
   color:yellow;
   font-size:2.668rem;
   font-weight:901;
   line-height:4.55555555557rem;
   text-align:center;
   z-index:27;
}

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

nav>ul>li {
   float:left;
   background:blue;
   width:19.76%;
   height:65px;
   margin:9px 27px;
}

nav ul li:hover {
   background:pink;
}

nav ul li ul {
   background:linear-gradient(to right, OrangeRed 65%, transparent);
   width:100%;
}

nav ul li ul li:hover {
   background:linear-gradient(to right, grey 65%, transparent);
}

nav>ul>li.hasSubMenu:hover + li {
}

nav ul li.active {
   background:BlueViolet;
}

nav ul li a {
   display:block;
   width:100%;
   height:100%;
   color:Chartreuse;
   text-shadow:-3px -3px 0 yellow,
   3px -3px 0 blue,
   -3px 3px 0 pink,
   3px 3px 0 OrangeRed;
}

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

nav ul li.active>a {
   color:BlueViolet;
   text-shadow:none;
}
</style> 
 </head> 
 <body> 
  <nav> 
   <ul id="menu"> 
    <li data-menuanchor="news"> <a href="#news">Lore</a> </li> 
    <li class="hasSubMenu" data-menuanchor="media"> <a href="#media">Lorem</a> 
     <ul> 
      <li data-menuanchor="media"> <a href="#media/0">Lorem </a> </li> 
      <li data-menuanchor="media"> <a href="#media/1">Lorem</a> </li> 
      <li data-menuanchor="media"> <a href="#media/2">Lorem </a> </li> 
     </ul> </li> 
    <li class="hasSubMenu" data-menuanchor="info"> <a href="#info">Lore</a> 
     <ul> 
      <li data-menuanchor="info"> <a href="#info/0">Lore</a> </li> 
      <li data-menuanchor="info"> <a href="#info/1">Lorem</a> </li> 
      <li data-menuanchor="info"> <a href="#info/2">Lorem i</a> </li> 
     </ul> </li> 
   </ul> 
  </nav>  
 </body>
</html>

Related Tutorials