CSS UL LI垂直菜单 [英] CSS UL LI Vertical Menu
问题描述
<％@ Page Language =C＃AutoEventWireup =trueTheme =SFCodeBehind =ULLITest.aspx.csInherits =ClickDoors_WebApp.ULLITest％> ;
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://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;
}
＃菜单li：hover
{
color：White;
background-color：＃ffcc00;
}
＃菜单a：link
{
color：＃717171;
text-decoration：none;
}
＃菜单a：hover
{
color：White;
}
< / style>
< / head>
< body>
< form id =form1runat =server>
< div>
< ul id =Menu>
< li>< a href =＃>内部门< / a>< / li>
< li>< a href =＃>预制内门< / a>< / li>
< li>< a href =＃>外部门< / a>< / li>
< li>< a href =＃>内部对[法式门]< / a>< / li>
< li>< a href =＃>外部对[French Doors]< / a>< / li>
< li>< a href =＃>自定义尺寸门< / a>< / li>
< li>< a href =＃>门框< / a>< / li>
< li>测试< / li>
< / ul>
< / div>
< / form>
< / body>
< / html>
当我将鼠标悬停在其上时，背景颜色立即更改，但字体颜色保持不变，直到鼠标悬停在文本上。
总之，我希望我的菜单的行为类似stackoverflows菜单（问题标签用户....）
我会这样做：
-
将
< a>标记设为display：block -
移除
< li>的填充c $ c> padding：0px -
将填充重新添加到
< a&标签padding：7px 10px 7px 10px; -
$ c> background-color：＃ffcc00; 到
#Menu a：hover -
摆脱
#Menu li：hover
<%@ 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....)
Any help will be appreciated.
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
这篇关于CSS UL LI垂直菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
