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菜單（問題標籤用戶....）

任何幫助將不勝感激。

來源

2011-03-01 Faizal Balsania

我會做這樣的：

設置你的<a>標籤display:block
從<li>的取出填充（使之成爲padding:0px）
重新添加填充到您的<a>標籤padding:7px 10px 7px 10px;
添加background-color:#ffcc00;到#Menu a:hover
擺脫#Menu li:hover

來源

2011-03-01 15:01:32 james6848

非常感謝詹姆斯 – 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/

來源

2011-03-01 14:57:14 Sotiris

給這個CSS屬性：

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

來源

2011-03-01 14:57:47 zimok

與其他解決方案的問題，就是鏈接將顯示爲懸停，即使它仍然不可連接，因此可能導致不良的用戶體驗。 – 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/

來源

2011-03-01 15:01:01 Loktar

CSS UL李垂直菜單

回答

相關問題