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

你能画一个样机？我不知道你的解释是明确的 – diagonalbatman 2011-01-21 15:11:22

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

答

在向下浏览嵌套的ul列表时，将父母保持在'selected'状态可能在CSS中不可能。我不认为CSS选择器能够上升到树上。虽然这应该不难。这里是一个参考：

Complex CSS selector for parent of active child

鲍勃

HTML和CSS多层次的下拉菜单中，需要悬停着色帮助

相关推荐