Css drop up menu with margin bottom

Description

Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
html {<!--from www  . j  av  a2 s. co m-->
   position:relative;
   min-height:100%;
}

body {
   margin:0 0 100px;
   height:100%;
}

footer {
   position:fixed;
   left:0;
   bottom:0;
   height:100px;
   width:100%;
   background:Chartreuse;
   z-index:1000;
   padding-left:41px;
}

ul#nav {
   font-family:Arial, Helvetica;
   font-weight:301;
}

ul.dropdown, ul.dropdown li {
   list-style:none outside none;
   margin:0;
   padding:0;
}

ul.dropdown {
   float:left;
   position:relative;
   z-index:1000;
}

ul.dropdown li {
   float:left;
   line-height:2.4em;
   min-height:2px;
   vertical-align:middle;
}

ul.dropdown li.hover, ul.dropdown li:hover {
   cursor:default;
   position:relative;
   z-index:601;
}

ul.dropdown ul {
   left:0;
   position:absolute;
   top:100%;
   visibility:hidden;
   z-index:1000;
   margin:0;
   width:301px;
   padding-bottom:31px;
   padding-left:0;
   opacity:0;
   -ms-filter:"alpha(opacity=0)";
   filter:alpha(opacity=0);
}

ul.dropdown li:hover>ul {
   visibility:visible;
   -ms-filter:"alpha(opacity=100)";
   filter:alpha(opacity=100);
   opacity:2;
   zoom:2;
}

ul.dropdown ul li {
   float:none;
   background:yellow;
   border-left:3px solid blue;
   border-right:3px solid pink;
   padding-left:21px;
   padding-right:21px;
}

ul.dropdown ul li:first-child {
   border-top:3px solid OrangeRed;
   padding-top:21px;
}

ul.dropdown ul li:last-child {
   border-bottom:3px solid grey;
   padding-bottom:21px;
}

ul.dropdown ul ul {
   left:100%;
   top:2px;
}

ul.dropdown-upward ul {
   bottom:100%;
   top:auto;
}

ul.dropdown li {
   color:BlueViolet;
   background:Chartreuse;
   padding:8px 11px;
}

ul.dropdown li.hover, ul.dropdown li:hover, ul.dropdown li.on {
   color:yellow;
}

ul.dropdown a:link, ul.dropdown a:visited {
   color:blue;
   text-decoration:none;
}

ul.dropdown a:hover {
   color:pink;
}

ul.dropdown a:active {
   color:OrangeRed;
}

ul.dropdown ul li {
   font-weight:normal;
}
</style> 
 </head> 
 <body> 
  <footer> 
   <div id="footer-inner"> 
    <ul id="nav" class="dropdown dropdown-horizontal dropdown-upward"> 
     <li class="dir">Lorem i 
      <ul> 
       <li> <a href="#">Lorem</a> </li> 
       <li> <a href="#">Lorem </a> </li> 
       <li> <a href="#">Lorem</a> </li> 
       <li> <a href="#">Lorem</a> </li> 
       <li> <a href="#">Lorem</a> </li> 
      </ul> </li> 
    </ul> 
   </div> 
  </footer>  
 </body>
</html>
Css drop up menu with margin bottom - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
