Question

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

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

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

正如您所看到的，当您将鼠标悬停在“这就是那个”时，您会看到子菜单。但是当你在子菜单中时，“这就是那个”的背景颜色会改变。

是否有纯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;
 }

Answer 1

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

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

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

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

还有很多东西。

您可以使用伪元素:last-child在最后一项中添加虚线（see fiddle 3）：

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

如果我是对的，你只想围绕下拉菜单中的最后一个元素和second corner of the first one：

 .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来命名一些），但这里有：

<强> Final Demo

带水平子菜单的纯HTML / CSS菜单。如何保持父母的'背景色'？

1 个答案:

还有很多东西。