CSS UL LI垂直菜單

Question

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

當我將鼠標懸停在它上面時，背景顏色會立即更改，但字體顏色保持不變，直到我將鼠標懸停在文本上方。

總之，我希望我的菜單行為類似於stackoverflows菜單（問題標簽用戶....）

任何幫助將不勝感激。

Answer 1

我這樣做：

將<a>標簽設置為display:block
從<li>刪除填充（使其padding:0px ）
將填充重新添加到<a>標簽padding:7px 10px 7px 10px;
添加background-color:#ffcc00; 到#Menu a:hover
擺脫#Menu li:hover

Answer 2

需要添加#Menu li:hover a {color:White;}這將設置白三色為a時， li盤旋。

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

Answer 3

給這個css屬性：

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

Answer 4

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

這種方法的唯一缺點是列表中的元素不會被正確填充。

演示

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

CSS UL LI垂直菜單

問題描述

4 個解決方案

解決方案1
5 已采納 2011-03-01 15:01:32

解決方案2
3 2011-03-01 14:57:14

解決方案3
1 2011-03-01 14:57:47

解決方案4
1 2011-03-01 15:01:01

CSS UL LI垂直菜單

問題描述

4 個解決方案

解決方案1 5 已采納 2011-03-01 15:01:32

解決方案2 3 2011-03-01 14:57:14

解決方案3 1 2011-03-01 14:57:47

解決方案4 1 2011-03-01 15:01:01

解決方案1
5 已采納 2011-03-01 15:01:32

解決方案2
3 2011-03-01 14:57:14

解決方案3
1 2011-03-01 14:57:47

解決方案4
1 2011-03-01 15:01:01