Html CSS UL LI 垂直菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5156094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS UL LI Vertical Menu
提问by Faizal Balsania
<%@ Page Language="C#" AutoEventWireup="true" Theme="SF" CodeBehind="ULLITest.aspx.cs" Inherits="ClickDoors_WebApp.ULLITest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#Menu
{
padding:0;
margin:0;
list-style-type:none;
font-size:13px;
color:#717171;
width:100%;
}
#Menu li
{
border-bottom:1px solid #eeeeee;
padding:7px 10px 7px 10px;
}
#Menu li:hover
{
color:White;
background-color:#ffcc00;
}
#Menu a:link
{
color:#717171;
text-decoration:none;
}
#Menu a:hover
{
color:White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="Menu">
<li><a href="#">Internal Doors</a></li>
<li><a href="#">Prefinished Internal Doors</a></li>
<li><a href="#">External Doors</a></li>
<li><a href="#">Internal Pair [French Doors]</a></li>
<li><a href="#">External Pair [French Doors]</a></li>
<li><a href="#">Custom Size Doors</a></li>
<li><a href="#">Door Frames</a></li>
<li>Test</li>
</ul>
</div>
</form>
</body>
</html>
When i hover over it background-color is changed immediately but font color remains same until i hover over text.
当我将鼠标悬停在它上面时，背景颜色会立即更改，但字体颜色保持不变，直到我将鼠标悬停在文本上。
In short i want my menu to behave similar to stackoverflows menu (Questions Tags Users....)
简而言之，我希望我的菜单的行为类似于 stackoverflows 菜单（问题标签用户....）
Any help will be appreciated.
任何帮助将不胜感激。
回答by james6848
I'd do it like this:
我会这样做：
Set your
<a>tags todisplay:blockRemove the padding from your
<li>'s (make itpadding:0px)Re-add the padding to your
<a>tagspadding:7px 10px 7px 10px;Add
background-color:#ffcc00;to#Menu a:hoverGet rid of
#Menu li:hover
将您的
<a>标签设置为display:block从你
<li>的 (make itpadding:0px) 中删除填充将填充重新添加到您的
<a>标签中padding:7px 10px 7px 10px;添加
background-color:#ffcc00;到#Menu a:hover摆脱
#Menu li:hover
回答by Sotiris
need to add #Menu li:hover a {color:White;}This will set white color for awhen a liis hovered.
需要添加#Menu li:hover a {color:White;}这将a在 ali悬停时设置白色。
回答by zimok
Give this css properties:
给这个 css 属性：
#Menu a {display:block}
#Menu a:hover,active {color:#text-color;background:#background-color;}
回答by Loktar
#Menu li
{
border-bottom:1px solid #eeeeee;
}
#Menu li a:hover
{
color:White;
background-color:#ffcc00;
}
#Menu a:link
{
color:#717171;
text-decoration:none;
display:block;
padding: 7px 10px;
}
Only drawback of this method is your elements in the list that arent anchors wont be padded correctly.
这种方法的唯一缺点是列表中的元素不会正确填充没有锚点。
Demo
演示
