CSS UL李垂直菜单

问题描述：

<%@ 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>

当我在它悬停背景颜色会立即更改，但直到我将鼠标悬停在文字的字体颜色保持不变。CSS UL李垂直菜单

总之我希望我的菜单行为类似于stackoverflows菜单（问题标签用户....）

任何帮助将不胜感激。

答

我会做这样的：

设置你的<a>标签display:block
从<li>的取出填充（使之成为padding:0px）
重新添加填充到您的<a>标签padding:7px 10px 7px 10px;
添加background-color:#ffcc00;到#Menu a:hover
摆脱#Menu li:hover

非常感谢詹姆斯 – 2011-03-02 10:01:26

干杯Faizal，没有probs！ – james6848 2011-03-02 10:25:34

答

需要添加#Menu li:hover a {color:White;}当li被徘徊时，这将设置为a的白色。

演示：http://jsfiddle.net/Nceef/

答

给这个CSS属性：

#Menu a {display:block} 
#Menu a:hover,active {color:#text-color;background:#background-color;}

与其他解决方案的问题，就是链接将显示为悬停，即使它仍然不可连接，因此可能导致不良的用户体验。 – zimok 2011-03-01 15:05:41

答

#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; 
}

这种方法的唯一缺点是在列表中的元素的arent锚不会被正确地填充。

演示

http://jsfiddle.net/loktar/F6UGv/

CSS UL李垂直菜单

相关推荐