Me he hecho una lista desplegable de la barra de navegación con css.
Pero desea que el tamaño de fuente en el menú elementos a ser diferentes a los submenues elementos.. también sería bueno si pudiera cambiar el submenues ‘aspecto’, cambiar el tamaño de la caja, etc.
Estoy muy perdido, todo lo que puedo hacer puedo cambiar las dos cosas al mismo tiempo.

Alguna idea de lo que puede hacer para el css? 🙂

 <div class="grid_7"id="navigation">
      <ul>
        <li>
        <a href=""class="parent">Menu Item 1</a>
            <ul> 
            <li><a href="#">sub menu item 1</a></li>
            <li><a href="#">sub menu item 2</a></li>
            <li><a href="#">sub menu item 3</a></li>
            <li><a href="#">sub menu item 4</a></li> 
            </ul>
        </li>
    </ul>

              <ul>
                <li><a href="">Menu Item 1</a>
          <ul> 
            <li><a href="#">sub menu item 1</a></li>
            <li><a href="#">sub menu item 2</a></li>
            <li><a href="#">sub menu item 3</a></li>
            <li><a href="#">sub menu item 4</a></li> 
            </ul>
        </li>
    </ul>

              <ul>
        <li><a href="">Menu Item 1</a>
            <ul> 
            <li><a href="#">sub menu item 1</a></li>
            <li><a href="#">sub menu item 2</a></li>
            <li><a href="#">sub menu item 3</a></li>
            <li><a href="#">sub menu item 4</a></li>
            </ul>
        </li>
    </ul>

css:

   #navigation
   {
   height:75px;
   }

   #utility
   {
   height:75px;
   }

   ul 
   {
   font-family: Arial, Verdana;
   margin: 0;
   padding: 0;
   }
   ul li 
   {
   display: block;
   position: relative;
   float: left;
   font-size:16px;
   }

   li ul { display: none; }

   #navigation ul
   {margin:0px; padding:0px;}


   ul li a 
   {
   display:block;
   text-decoration: none;
   color: white;
   padding: 20px 30px 20px 15px;
   position:relative;
   margin: 0;

   }

   ul li a:hover 
   { 
   background: #355F9E;
   }

   li:hover ul 
   {
   display: block;
   position: absolute;
   }

   li:hover a 
   { 
   background: #355F9E; 
   }

   li:hover li a:hover 
   { 
   background: #BCCDD8;
   }
InformationsquelleAutor Adnaves | 2012-05-15

1 Comentario

Dejar respuesta

Please enter your comment!
Please enter your name here