Solo para mis blogs: Modelo de acordeon

Menu Desplegable

ENLACE a: www.falconmasters.com

<html>
 <head>
  <title>Menu Desplegable</title>
  <style type="text/css">
   
   * {
    margin:0px;
    padding:0px;
   }
   
   #header {
    margin:auto;
    width:500px;
    font-family:Arial, Helvetica, sans-serif;
   }
   
   ul, ol {
    list-style:none;
   }
   
   .nav > li {
    float:left;
   }
   
   .nav li a {
    background-color:#000;
    color:#fff;
    text-decoration:none;
    padding:10px 12px;
    display:block;
   }
   
   .nav li a:hover {
    background-color:#434343;
   }
   
   .nav li ul {
    display:none;
    position:absolute;
    min-width:140px;
   }
   
   .nav li:hover > ul {
    display:block;
   }
   
   .nav li ul li {
    position:relative;
   }
   
   .nav li ul li ul {
    right:-140px;
    top:0px;
   }
   
  </style>
 </head>
 <body>
  <div id="header">
   <ul class="nav">
    <li><a href="">Blogs  1</a></li>
    <li><a href="">Blogs 2</a>
     <ul>
      <li><a href="">Submenu</a></li>
      <li><a href="">Submenu</a></li>
      <li><a href="">Submenu</a></li>
      <li><a href="">Submenu</a>
       <ul>
        <li><a href="">Submenu1</a></li>
        <li><a href="">Submenu2</a></li>
        <li><a href="">Submenu3</a></li>
        <li><a href="">Submenu4</a></li>
       </ul>
      </li>
     </ul>
    </li>
    <li><a href="">Blogs  3</a>
     <ul>
      <li><a href="">Submenu1</a></li>
      <li><a href="">Submenu2</a></li>
      <li><a href="">Submenu3</a></li>
      <li><a href="">Submenu4</a></li>
     </ul>
    </li>
    <li><a href="">Blogs 4</a></li>
   </ul>
  </div>
 </body>
</html>

Solo para mis blogs

Etiquetas

sábado, 8 de octubre de 2016

Modelo de acordeon