CSS列表下拉菜单

我创建一个简单的下拉菜单中使用CSS。CSS列表下拉菜单

<ul> 
    <li id="base"><a href="projects.php" class="button">Projects</a> 
     <ul> 
      <li>Project 1</li> 
      <li>Project 2</li> 
     </ul> 
    </li> 
</ul>

我想不通的是，我怎么能得到锚文本“项目”，以改变它的背景正确地表明你在该列表进行浏览。

如果我申请一个背景效果李＃基地，

li#base:hover { 
    background: #4b4b4b; 
    border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    -khtml-border-radius: 4px; 
}

我得到这个不需要的背景下，如果我将鼠标悬停在“项目1”或“项目2”：
undesired

的下面的图片是如何，我想它的样子，但这是应用到锚，而不是李＃基地（我是在链路上，而不是整个列表时，将仅保留高亮）悬停伪类：
desired

我试图把这个在我能想到的最简单的方法...

来源

2011-06-15 holyfsck

你设置的所有4个角的半径。你需要在右上角和左上角有一个圆角。

-webkit-border-top-left-radius: 4px; 
-webkit-border-top-right-radius: 4px; 
-moz-border-radius-topleft: 4px; 
-moz-border-radius-topright: 4px; 
border-top-left-radius: 4px; 
border-top-right-radius: 4px;

来源

2011-06-15 04:12:39

谢谢！任何关于如何让背景在应用于li＃base时向上延伸的线索？填充和保证金似乎没有为此做任何事情。 – holyfsck 2011-06-15 23:14:22

我不得不看HTML/CSS的其余部分。由于嵌套和浏览器默认值，列表可能会很痛苦。使用CSS重置通常很有帮助。 – 2011-06-15 23:28:22

如果你有机会，你可以看看我的个人资料中的网站吗？目前还没有太多，所以没有太多可挖掘的地方。 – holyfsck 2011-06-15 23:45:10

CSS列表下拉菜单

回答

相关问题