当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Parent and siblings inherits a child list items styles

问题描述:

I have a simple menu

<ul id="menu">

<li class="leaf"><a href="#">Menu Item 1</a></li>

<li class="leaf"><a href="#">Menu Item 2</a></li>

<li class="expanded"><a href="#">Menu Item 3</a>

<ul>

<li class="leaf"><a href="#">Menu Item a</a></li>

<li class="leaf"><a href="#">Menu Item b</a></li>

<li class="leaf"><a href="#">Menu Item c</a></li>

</ul>

</li>

<li class="leaf"><a href="#">Menu Item 4</a></li>

</ul>

and

ul#menu li:hover {font-weight:bold;}

The problem I am facing is when I hover above a ul li li, the parent as well as all its siblings gets the hover effect. I only want the list item I hovered above to get the effect.

I tried ul#menu li.leaf:hover {..}, ul#menu li.expanded:hover {..} , but even in that case, when I hover above li.expanded, it's child inherits the style.

It is important for me to style the list items, not a (the style is more complicated than the one I posted)

How do I fix this?

网友答案:

I'm not really sure why this might be happening, but I'm assuming you're trying to put together a CSS-based dropdown menu?

I would recommend that you check out http://htmldog.com/articles/suckerfish/dropdowns/. It's a great help, and I always base dropdown menus off of it.

Sounds like your problem is some weird inheritance bug - does it happen in all browsers?

网友答案:
#menu li:hover li { font-weight:normal }
#menu li:hover, #menu li li:hover {font-weight:bold;}

The first rule prevents making all 2nd-level li's bold when a parent li is hovered. the second rule then sets only the currently hovered 1st-level li's and currently hovered 2nd-level li's to bold.

分享给朋友:
您可能感兴趣的文章:
随机阅读: