Question

我需要一些代码或开源，我需要这样的菜单：

菜单1：

菜单2：

菜单1的图像是主导航中的子菜单

菜单2的图像是垂直的，如果子菜单长于一列（图像上定义的高度），则进入第二列，子菜单的进一步子子菜单向右移动“评论......”如图所示。

定义的宽度为960px。（无响应）

HTML：

<div id="pageMenu">

    <div id="pageMenuWrapper">
        <a href="index.html" class="pageMenuLink pageMenuLinkSelected">Menu1</a>
        <a href="index.html" class="pageMenuLink">Menu2</a>
        <a href="index.html" class="pageMenuLink">Menu3</a>
    </div>

</div>

CSS：

#pageMenu{
    position:relative;
    width:960px;
    height:100px;
    margin:auto;
    }
#pageMenuWrapper{
    position:absolute;
    top:0px;
    left:0px;
    height:88px;
    }
.pageMenuLink{
    float:left;
    font-family: 'ProximaNova';
    font-size:16px;
    display:block;
    padding:2px 6px;
    color:#000;
    text-decoration:none;
    line-height:30px;
    text-align:center;
    }
.pageMenuLink:hover{
    background-color:#D8DBE1;
    }
.pageMenuLinkSelected{
    background-color:#d8dbe1;
    }

Answer 1

这是我对自己问题的解决方案，花了一段时间，但我得到了解决：

这是我的Fiddle Link

但是当我悬停子菜单元素时，我仍然坚持要保持父菜单元素处于活动状态。

我确实尝试了以下CSS格式

.parent-menu > li > a{
hover style;
}

但这没有帮助。

有人可以建议我一个可能的解决方案吗？

谢谢：）

Answer 2

所以我解决了它：

这是最后的fiddle

我所要做的就是为这两个部分添加边框属性：

.menu-main li.hover a {
    transition-property: background-color, color;
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
    text-decoration: none;
    height: 50px;
    border-bottom:6px solid #004062;
    }

.submenu li a {
    font:18px/22px 'focobold';
    text-transform:uppercase;
    color: #383838;
    height: auto;
    margin-bottom: 10px;
    margin-left:4px;
    height: auto !important;
    border-bottom:none !important;
    }

因此，我的问题是100％有效的解决方案。：）

由于

带有垂直子菜单的全宽水平菜单，具有垂直子子菜单

2 个答案: