2

我正在构建一个带有水平子菜单的纯 HTML/CSS 菜单。问题是当您悬停在子菜单上时，主菜单项悬停的背景颜色消失了。

当您将鼠标悬停在子菜单上时，是否可以保留主菜单项的背景颜色？

这是我到目前为止得到的：

http://jsfiddle.net/YKEkB/1/

正如您所看到的，当您将鼠标悬停在“this is the one”上时，您会看到子菜单。但是当您在子菜单中时，“this is the one”的背景颜色会变回。

有没有纯 HTML/CSS 的解决方案？

这是所有代码：

 <div class="wrapper">
    <div class="menu-holder">
        <ul class="menu">
            <li><a href="#" title="Home">item 1</a>
            </li>
            <li><a class="test" href="#">This is the one</a>

                <ul class="submenu">
                    <li><a href="#">Submenu item 1</a>
                    </li>
                    <li><a href="#">Submenu item 2</a>
                    </li>
                </ul>
            </li>
            <li><a href="#" >Menu item 3</a>

            </li>
            <li><a href="#" >Last item</a>

            </li>
        </ul>
    </div>
</div>

CSS：

 .wrapper {
     width:900px;
     height:200px;
     background:grey;
 }
 .menu-holder {
     padding: 50px 0 0 0;
 }
 .menu-holder ul {
     margin: 0 0 0px 25px;
     padding: 0;
     list-style-type: none;
 }
 .menu-holder ul li {
     position: relative;
     float: left;
     padding: 0px 10px 0 10px;
     margin: 0px 0 0 0px;
     border-left: 1px dotted white;
     line-height: 0px;
 }
 .menu-holder ul li a {
     font-family: arial, sans-serif;
     font-size: 12px;
     font-style: bold;
     display: block;
     color: white;
     text-decoration: none;
     padding: 15px 10px 15px 10px;
     -webkit-border-radius: 5px 5px 0px 0px;
     border-radius: 5px 5px 0px 0px;
 }
 .menu-holder ul li a:hover + ul {
     display: block;
 }
 .menu-holder ul li a:hover {
     display: block;
     background-color: #025179;
 }
 .menu-holder ul li .submenu {
     display: none;
     position: absolute;
     top: 100%;
     left: 0px;
     right: auto;
     margin: -5px 0 0px 0px;
     padding: 5px 10px 5px 10px;
     white-space: nowrap;
 }
 .menu-holder ul li .submenu li {
     position: static;
     float: left;
     display: inline;
     padding: 15px 10px 15px 10px;
     background-color: #025179;
 }
 .menu-holder ul li .submenu li a {
     display: inline;
     margin: 0 0px 0 0px;
     padding: 0px 10px 0px 10px;
     -webkit-border-radius: 0;
     border-radius: 0;
 }
 .menu-holder ul li .submenu li:first-of-type {
     -webkit-border-radius: 0px 0px 0px 5px;
     border-radius: 0px 0px 0px 5px;
 }
 .menu-holder ul li .submenu li:last-of-type {
     -webkit-border-radius: 0px 5px 5px 0px;
     border-radius: 0px 5px 5px 0px;
 }
 .menu-holder ul li .submenu:hover {
     display: block;
 }
 .menu-holder ul li .submenu:hover .test {
     display: block;
     background-color: #025179;
 }
 .menu-wrapper .menu-holder ul li:first-of-type {
     border-left: none;
 }
4

1 回答 1

3

简单：http: //jsfiddle.net/YKEkB/2/

您必须将其更改为此（删除 a）：

 .menu-holder ul li:hover{
   display: block;
   background-color: #025179;
   }

现在你必须调整它，使它垂直居中。请注意，您应该在菜单项和子菜单之间保留 0px。

还有很多东西。

您可以使用伪元素在最后一项:last-child中添加虚线（参见小提琴 3）：

 .menu-holder ul li:last-child {
   border-right: 1px dotted white;
   }

如果我是对的，您只想将下拉菜单中的最后一个元素和第一个元素的第二个角四舍五入：

 .menu-holder ul li ul li:first-of-type {
   -webkit-border-radius: 0px 5px 0px 0px;
   border-radius: 0px 5px 0px 0px;
 }

 .menu-holder ul li .submenu li:last-of-type {
   -webkit-border-radius: 0px 0px 5px 5px;
   border-radius: 0px 0px 5px 5px;
 }

您可以（并且应该）像这样访问子菜单：

 .menu-holder ul li ul {

而不是这个：

.menu-holder ul li .submenu {

清理并触摸了更多东西，这是您的代码工作。如果您发现任何问题，请告诉我。仍有改进的空间（可读性和 DRY 等），但这里是这样的：

最终演示

于 2013-05-02T22:53:02.133 回答