2011-01-21 189 views
1

這裏的名單和項目:HTML和CSS多層次的下拉菜單中,需要懸停着色幫助

<ul> 
    <li> 
     <a href="#">Home</a> 
    </li> 
    <li> 
     <a href="#">Forums</a> 
     <ul> 
      <li> 
       <a href="#">Baseball</a> 
       <ul> 
        <li> 
         <a href="#">Trading</a> 
        </li> 
        <li> 
         <a href="#">Personal Collections</a> 
        </li> 
        <li> 
         <a href="#">Box Breaks</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Basketball</a> 
       <ul> 
        <li> 
         <a href="#">Trading</a> 
        </li> 
        <li> 
         <a href="#">Personal Collections</a> 
        </li> 
        <li> 
         <a href="#">Box Breaks</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Football</a> 
       <ul> 
        <li> 
         <a href="#">Trading</a> 
        </li> 
        <li> 
         <a href="#">Personal Collections</a> 
        </li> 
        <li> 
         <a href="#">Box Breaks</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Hockey</a> 
       <ul> 
        <li> 
         <a href="#">Trading</a> 
        </li> 
        <li> 
         <a href="#">Personal Collections</a> 
        </li> 
        <li> 
         <a href="#">Box Breaks</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

這裏的CSS:

ul 
{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    width: 100px; 
    border-bottom: 1px solid #ccc; 
} 

a 
{ 
    color: #777; 
} 

a:hover 
{ 
    background-color: #fff; 
} 

ul li 
{ 
    position: relative; 
} 

li ul 
{ 
    display: inline; 
    position: absolute; 
    left: 99px; 
    top: 0; 
    display: none; 
} 

li ul li ul 
{ 
    width: 150px; 
} 

ul li a 
{ 
    display: block; 
    text-decoration: none; 
    background: #bad8f8; 
    padding: 2px 0 2px 10px; 
    border: 1px solid #ccc; 
    border-bottom: 0; 
} 

li:hover > ul 
{ 
    display: block; 
} 

我希望發生的,當我將鼠標懸停是在論壇上,它突出了白色。然後,如果我去籃球,論壇和籃球都突出顯示白色。對於孩子們也是如此。我希望能夠展示一條路徑,以便當他們結束某些事情時,定位應該能夠告訴他們訪問哪一條路徑,我希望突出顯示清楚。任何幫助,將不勝感激。哦,如果可能,請不要使用Javascript。謝謝。

這是它看起來像現在,當我將鼠標懸停在最後一個子項: alt text

,紅色圓圈的人我也不想被高亮白光。 alt text

更新
這就是我將不得不接受。現在這很醜陋,但這是我能想到的最好的。 alt text

+0

你能畫一個樣機?我不知道你的解釋是明確的 – diagonalbatman 2011-01-21 15:11:22

+0

我更新了截圖。 – XstreamINsanity 2011-01-21 15:17:10

回答