下拉導航欄

Question

我用css做了一個下拉導航欄。 但是，希望菜單項的字體大小不同，然後子菜單項..這也將是很好，如果我可以改變子菜單的外觀，改變框的大小等 我真的迷路了，我所能做的我同時改變了這兩件事。

任何想法我可以做的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; 
    } 

Answer 1

嘗試

#navigation > ul > li > a { 
    font-size: 22px; 
} 

這隻會更改頂部層次，這是在主菜單中的所有鏈接。

以下是關於孩子選擇更多的相關信息： http://www.w3.org/TR/CSS2/selector.html#child-selectors