Question

我试图在子菜单容器中构建一个垂直菜单。

我有一个带有全宽子菜单容器的水平菜单（我已经完成了，对于我需要帮助的子菜单内容） - 我需要创建一个垂直下拉菜单，但需要显示垂直子菜单在一个div（或任何使它看起来像在示例中）的高度与垂直菜单相同，全宽并且无论parrent按钮的位置如何都出现在相同的位置。希望你理解，如果没有看到jsFiddle。

问题是垂直菜单容器需要具有20％的宽度和特定的颜色背景，其子菜单的容器应该具有80％的剩余部分和不同的颜色。悬停在一个按钮（Button1）上时，应显示80％宽度div（div.B.C）及其内容（让我们说一个视频）。

<div class="AB">
<li><a class="1">Button 1</a></li>
<li><a class="2">Button 2</a></li>
<li><a class="3">Button 3</a></li>
<li><a class="4">Button 4</a></li>
<li><a class="5">Button 5</a></li>
</div>
<div class="B">
   <div class="C"></div>
   <div class="D"></div>
</div>

任何解决方案（CSS或jQuery - 虽然我更喜欢CSS）都将受到高度赞赏。

再次概述了我的问题： jsFIDDLE

Answer 1

首先，你要做的是将你想要显示的div嵌套在列表项元素的内部，这样它们就会成为悬停字段的一部分，并且可以通过css遍历进行目标化。您将嵌套div上的初始显示设置为display：none。在悬停时，您只需将嵌套div上的显示设置为内联块（或任何可见的显示属性）。我快速嘲笑你的代码给你看。

HTML

<div class="AB">
<li><a class="1">Button 1</a>
    <div class="sub">Some stuff</div>
</li>
<li><a class="2">Button 2</a>
    <div class="sub">Some other stuff</div>
</li>
<li><a class="3">Button 3</a></li>
<li><a class="4">Button 4</a></li>
<li><a class="5">Button 5</a></li>
</div>

CSS

.AB {
float:left;
width: 100px;
height:100px;
background: #d9d9d9;
}
.AB li {
width: 100px;
height: 20px;
line-height: 20px;
font-size: 15px;
text-align: center;
list-style-type: none;
}
li a{
width: 100px !important;
cursor: pointer;
}
.sub {
display:none;
background: #333;
margin-left: 100px;
width: 400px;
}
.AB li:hover{
background: #555;
}
.AB li:hover > .sub {
display:block;
}
.AB .B {
display: inline-block;
}

.example{
height: 100px;
width: 100%;
background: #00ff00;
}

.AB .example {display: inline-block;}

JsFiddle

Answer 2

我这是你想要实现的目标吗？您可以运行代码段来查看结果。

编辑：我已将一个活动类添加到第一个<li>元素（按钮1），这样默认情况下它是活动的。然后，您可以将课程有效添加到其他页面中的其他按钮。

＆＃13;

.container {
    position: relative;
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    background: #efefef;
}

ul {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height:100px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul li {
    width: 100px;
    height: 20px;
    line-height: 20px;
    font-size: 15px;
    text-align: center;
    background: #d9d9d9;
}

ul li a{
    width: 100%;
    cursor: pointer;
}

ul li:hover{
    background: #555;
}

ul .options {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100px;
    right: 0;
    text-align: left;
    background: lightblue;
    z-index: 0;
}

ul li:hover .options{
    display: block;
    z-index: 1;
}

ul li:nth-child(even) .options {
    background: lightblue;
}

ul li:nth-child(odd) .options {
    background: lightgreen;
}
   
    ul .active {
        background: #555;
    }

    ul .active .options {
        display: block;
    }

＆＃13;

<div class="container">
    <ul class="AB">
        <li class="active">
            <a class="1">Button 1</a>
            <div class="options">Button 1 sub-menu</div>
        </li>
        <li>
            <a class="2">Button 2</a>
            <div class="options">Button 2 sub-menu</div>
        </li>
        <li>
            <a class="3">Button 3</a>
            <div class="options">Button 3 sub-menu</div>
        </li>
        <li>
            <a class="4">Button 4</a>
            <div class="options">Button 4 sub-menu</div>
        </li>
        <li>
            <a class="5">Button 5</a>
            <div class="options">Button 5 sub-menu</div>
        </li>
    </ul>
</div>

＆＃13;

如何在<a> tag inside other div is hovered?</a>时进行div显示

2 个答案: