Question

http://i.stack.imgur.com/ip1gi.png

我想将链接置于子菜单中（如上图所示），并使突出显示的区域（浅紫色）填充子菜单宽度的100％（悬停效果）。

HTML

<!doctype html>
<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="header">
        <div class="container">
            <a href="home.html"><img class="logo" src="images/logo.png"></a>
            <ul class="menu">
                <li><a href="#">About Me</a></li>
                <li><a href="#">Gallery</a>
                    <ul class="submenu">
                        <li><a href="#">Logos</a></li>
                        <li><a href="#">Signatures</a></li>
                        <li><a href="#">Wallpapers</a></li>
                    </ul>
                </li>
                <li><a href="#">Resume</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</body>

CSS

* {
    margin: 0px;
    padding: 0px;
}

body {
    font-family: sans-serif;
}

.container {
    width: 800px;
    margin: 0 auto;
}

/* HEADER */

.header {
    background-color: #dddddd;
    border-bottom: 1px solid #bbbbbb;
    position: fixed;
    width: 100%;
}

img.logo {
    height: 50px;
    width: 50px;
}

ul.menu {
    float: right;
    list-style: none;
}

ul.menu li  {
    display: inline-block;
    position: relative;
}

ul.menu li a {
    padding: 19px;
    font-size: 13px;
    text-decoration: none;
    color: #888888;
    text-align: center;
    display: inline-block;
}

ul.menu li:hover a {
    color: #dddddd;
    background-color: #5b2371;
}

ul.submenu {
    visibility: hidden;
    position: absolute;
    background-color: #5b2371;
    width: 91px;
}

ul.submenu li a {
    padding: 13px;
    color: #dddddd;
}

ul.menu li:hover > ul.submenu {
    visibility: visible; 
}

ul.submenu li a:hover {
    background-color: #7141bf;
}

Answer 1

很容易......

您的li与width的{{1}}不一样。只需将ul li设置为width

即可

并向其添加100%，这将解决您的问题：D

text-align: center;

参见 FIDDLE

修改

当然要获得一个干净的菜单，你必须给链接ul.submenu li { width: 100%; text-align: center; }一个100％的宽度。

a

Answer 2

您需要居中li文本，然后设置子菜单元素的宽度。这将填充浅紫色子菜单背景颜色。

ul.submenu li a {
padding: 13px;
color: #dddddd;
min-width:70px;}

参见jsfiddle：http://jsfiddle.net/mtruty/Kh3m8/1/

Answer 3

http://jsfiddle.net/P89wZ/1/

ul.menu li需要＆＃34; center＆＃34;的文本对齐值，我添加了。
我从ul.submenu

ul.submenu li需要的宽度：70px（或者你想要的任何值，你可以玩它并决定你更喜欢什么）。

ul.menu li {
    display: inline-block;
    position: relative;
    text-align:center;
}

ul.submenu {
    visibility: hidden;
    position: absolute;
    background-color: #5b2371;
}

ul.submenu li a {
    padding: 13px;
    color: #dddddd;
    min-width:70px;
}

享受！

如何将我的链接置于我的下拉菜单中（另一个查询内部）？

3 个答案: