Dropdown navigation bar

Habe ich eine dropdown-Navigationsleiste mit css.
Aber eines wollen Sie die Schriftgröße auf die Menüpunkte anders zu sein, dann werden die Untermenüs Elemente.. Es wäre auch schön, wenn ich ändern könnte die Untermenüs Erscheinungsbild, ändern Sie das Feld Größe, etc.
Ich bin wirklich verloren, alles, was ich kann, ändere ich beide Dinge zur gleichen Zeit.

Irgendeine Idee was ich tun kann, um die 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
Schreibe einen Kommentar