Making my drop down menu central on the page - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Dropdown

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

Description

Making my drop down menu central on the page

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">
body {<!-- w  ww.  ja  v  a 2 s.  c o m-->
   background-color:Chartreuse;
}

.top-nav>ul {
   text-align:center;
}

.top-nav>ul>li {
   display:inline-block;
   float:none;
}

.top-nav>ul ul {
   text-align:left;
}

.top-nav ul ul {
   padding:0;
   position:absolute;
}

.top-nav ul ul {
   padding:0;
   position:absolute;
}

.top-nav li {
   float:left;
   list-style:none;
   cursor:pointer;
}

.top-nav li a {
   padding:17px;
   display:block;
   color:yellow;
   font-family:Arial, Helvetica, sans-serif;
}

.top-nav li ul li a {
   background:none repeat scroll 0 0 blue;
   transition:501ms;
   font-family:Arial, Helvetica, sans-serif;
   font-size:15px;
   color:pink;
}

.top-nav li a:hover, .aside-nav li a:hover {
   background:OrangeRed;
   transition:501ms;
}

.top-nav li ul {
   display:none;
}

.top-nav li ul li, .top-nav li ul li ul li {
   float:none;
}

.top-nav li:hover>ul {
   display:block;
   transition:501ms;
}

.dropdown {
   display:none;
}

.buttons {
}
#dropdowntext {
   display:none;
}
</style> 
 </head> 
 <body> 
  <div class="top-nav"> 
   <ul class="buttons"> 
    <li> <a>Lorem ips</a> </li> 
    <li> <a>Lorem ip</a> 
     <ul> 
      <li> <a>Lorem ips</a> </li> 
      <li> <a>Lorem ip</a> </li> 
      <li> <a>Lorem ips</a> </li> 
      <li> <a>Lorem ipsum d</a> </li> 
      <li> <a>Lorem ipsum</a> </li> 
      <li> <a>Lorem ipsum dolo</a> </li> 
     </ul> </li> 
    <li> <a>Lorem ipsu</a> 
     <ul> 
      <li> <a>Lorem</a> </li> 
      <li> <a>Lorem ipsum dolo</a> </li> 
      <li> <a>Lorem ipsum dolor sit</a> </li> 
      <li> <a>Lorem ipsum dol</a> </li> 
      <li> <a>Lorem ipsum dolor si</a> </li> 
      <li> <a>Lorem ipsum d</a> </li> 
      <li> <a>Lorem ipsum do</a> </li> 
     </ul> </li> 
    <li> <a>Lorem ipsu</a> 
     <ul> 
      <li> <a>Lorem </a> </li> 
      <li> <a>Lorem ipsu</a> </li> 
      <li> <a>Lorem ip</a> </li> 
      <li> <a>Lorem ipsum dolor sit </a> </li> 
      <li> <a>Lorem ip</a> </li> 
     </ul> </li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials