Question

我遇到的问题是我创建的CSS子菜单，鼠标不会突出显示整个子菜单栏，但只突出显示相对于文本长度的数量。

HTML：

<body>
<div id="page">
    <div id="header">
        <div>

            <ul class="main-nav">
                <li>
                    <a href="menu.html">Menu One</a>
                </li>
                <li class="nav-primary-middle">
                    <a href="shops.html" >Shops Listing</a>
                    <ul class="subnav">
                    <li><a href="#">Ice Cream Shop</a>
            </li>
            <li><a href="#">Auto Mechanic</a>
            </li>
            <li><a href="#">Dentist</a>
                </li>
                        <li><a href="#">Long Shop Name</a>
                </li>
                        <li><a href="#">Ace</a>
                </li>
        </ul>

CSS：

div#page {
    width:100%;
}
div#page div#header {
    background:url("../images/bg-header.png") no-repeat scroll center bottom transparent;
    width:100%;
    height:140px;
    margin:0 0 90px 0;
}
div#page div#header div {
    width:960px;
    height:140px;
    margin:0 auto;
    position:relative;
}
div#page div#header div a.logo {
    position:absolute;
    left:370px;
    top:7px;
    display:block;
    z-index:999;
}
div#page div#header div ul.navigation {
    list-style-type:none;
    margin:0;
    padding:0;
    position:absolute;
    top:65px;
}
div#page div#header div ul.navigation li {
    float:left;
}
div#page div#header div ul.navigation li.middle {
    margin:0 170px 0 0;
}
div#page div#header div ul.navigation li.nav-primary-middle {
    margin:0 170px 0 0;
}
div#page div#header div ul.navigation li a {
    font-family:'didact_gothicregular';
    font-size:16px;
    color:#b0b6c4;
    text-decoration:none;
    padding:0 40px;
}
div#page div#header div ul.navigation li a:hover {
    font-family:'didact_gothicregular';
    font-size:16px;
    color:#5b6a9f;
}
div#page div#header div ul.navigation li a.active {
    font-family:'didact_gothicregular';
    font-size:16px;
    color:#5b6a9f;
}
main-nav {
    position: relative;
    width: 100%;
    height: 67px;
    background: #f2f2f2;
}
div#page div#header .subnav {
 display: none;
    position: absolute;
    top: 15px;
    left: 150px;
    width: 205px;
    list-style-type: none;
    background: #fff;
    margin: 0;
    border:solid 2px #eeeeee;
    border-radius: 10px;
    z-index:0;
    padding:0;
}
div#page div#header .subnav li {
    display: block;
    border-bottom: solid 1px #eeeeee;
    width: 100%;
    margin:0;
}
div#page div#header .subnav li a {
    color: #333;
    height:48px;
    padding:0px 0;
    font-size:13px;
}
div#page div#header .subnav li a:hover {
    background:#e3e3e3;
    width: 215px;
    border-radius: 3px;last
}
div#page div#header .subnav2 {
 display: none;
    position: absolute;
    top: 19px;
    left: 735px;
    width: 205px;
    list-style-type: none;
    background: #fff;
    margin: 0;
    border:solid 2px #eeeeee;
    border-radius: 10px;
    z-index:0;
    padding:0;
}
div#page div#header .subnav2 li {
    display: block;
    border-bottom: solid 1px #eeeeee;
    width: 100%;
    margin:0;
}
div#page div#header .subnav2 li a {
    color: #333;
    height:48px;
    padding:0px 0;
    font-size:13px;
}
div#page div#header .subnav2 li a:hover {
    background:#e3e3e3;
    width: 215px;
    border-radius: 3px;last
}
div#page div#header li:hover .subnav {
    display: block;
}
div#page div#header li:hover .subnav2 {
    display: block;
}
div#page div#header div ul.main-nav {
    list-style-type:none;
    margin:0;
    padding:0;
    position:absolute;
    top:65px;
}
div#page div#header div ul.main-nav li {
    float:left;
}
div#page div#header div ul.main-nav li.middle {
    margin:0 170px 0 0;
}
div#page div#header div ul.main-nav li.nav-primary-middle {
    margin:0 170px 0 0;
}

div#page div#header div ul.main-nav li a {
    font-family:'didact_gothicregular';
    font-size:16px;
    color:#5b6a9f;
    text-decoration:none;
    padding:0 40px;
}
div#page div#header div ul.main-nav li a:hover {
    font-family:'didact_gothicregular';
    font-size:16px;
    color:#3f4c7b;
}
div#page div#header div ul.main-nav li a.active {
    font-family:'didact_gothicregular';
    font-size:16px;
    color:#3f4c7b;
}

当您将鼠标悬停在子菜单的整个宽度上时，请参阅下面的图片作为“牙医”没有完整灰色突出显示的示例：

（编辑，哦，我没有足够的代表发布图片。请参阅JSFIDDLE链接，选择“商店列表”，你可以看到子菜单没有突出显示整个栏。）

！[下拉菜单以灰色突出显示] [1]

请参阅此* this jsfiddle link 。 *

感谢任何帮助，谢谢。

Answer 1

将以下规则添加到您的CSS中。

.subnav { overflow: hidden }
.subnav > li > a { display: block }

检查这个小提琴。 http://jsfiddle.net/q3xR5/

在那里有一个名为我的编辑的评论。请注意你需要调整元素上的填充。

Answer 2

您只需从div#page div#header .subnav li a:hover块中删除背景样式即可。然后，添加此

div#page div#header .subnav li:hover{
background:#e3e3e3;
}

Demo

css下拉子菜单鼠标高亮文本只有不完整的子菜单栏

2 个答案: