css下拉子菜单鼠标仅突出显示文本而不是完整的子菜单栏答案

【问题标题】：css dropdown submenu mouse highlights text only not full submenu barcss下拉子菜单鼠标仅突出显示文本而不是完整的子菜单栏
【发布时间】：2023-03-09 05:51:01
【问题描述】：

我创建的 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.*

感谢您的帮助。

【问题讨论】：

标签： html css drop-down-menu

【解决方案1】：

您可以简单地从 div#page div#header .subnav li a:hover 块中删除背景样式。然后，添加这个

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

Demo

【讨论】：

（我试图投票，但我是新手，没有足够的代表......只是想再次感谢您的帮助！！）:)
很高兴我能帮上忙 :)

【解决方案2】：

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

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

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

里面有一条叫做我的编辑的评论。请注意，您需要调整元素的填充。

【讨论】：