列表的列表CSS和HTML裏面

Question

我試圖建立我的導航，所以我有我的列表項和我有一個列表項（子菜單）內的列表是這樣的...

<style> 
    .headerNav{ 
     color:#FFF; 
     margin:0 auto; 
     width: 1280px; 
     padding-top: 148px; 
    } 

    .headerNav ul{ 
     list-style-type:none; 
     margin:0; 
     padding:0 0 0 8px; 
    } 

    .headerNav li{ 
     float:left; 
    } 

    .headerNav ul a{ 
     font-size:24px; 
     color:#FFF; 
     display:block; 
     padding:0 55px 0 0; 
     text-decoration:none; 
     text-transform:capitalize; 

    } 

    .headerNav ul a:hover{ 
     color:#a40404; 
     text-decoration:none; 
    } 
</style> 

<div class="headerNav"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#" class='galleryNavToggle'>Gallery</a> 
      <ul> 
       <li><a href="#">Categoies</a></li> 
       <li><a href="#">Products</a></li> 
      </ul> 
     </li> 
     <li><a href="#" class='galleryNavInfoToggle'>Info</a> 
      <ul> 
       <li><a href="#">F.A.Q.</a></li> 
       <li><a href="#">CV</a></li> 
       <li><a href="#">Artist Bio</a></li> 
       <li><a href="#">Video</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </li> 
    </ul> 
</div><!-- headerNav --> 

的問題是列表中的內容列表項具有很大的寬度，我無法看到我的子導航，任何幫助將不勝感激。

Answer 1

我創建了一個撥弄你的HTML和CSS，並加入一點我自己的CSS的勾勒子列表好一點：http://jsfiddle.net/bymLV/

我從子表刪除float: left，因爲這是使你的列表非常廣泛。那和1280px的實際寬度是.headerNav。