当<A>其他div内的标签悬停</a>时，如何显示<A>div？</a>

Question

I'm trying to built a vertical menu inside a submenu container.

I have a horizontal menu with full width submenu container (this I have done, for the submenu content I need help) - in which I would need to create a vertical drop-down menu, but the vertical-submenus need to appear in a div (or whatever will make it look like in the example) with the same height as the vertical menu, full width and appear in the same position no matter the parrent button's position. Hope you understood, if no just see the jsFiddle .

The problem is that the vertical menu container need to have a width of 20% and a specific color background and the container for its submenus should have the rest of 80% and a different color. On hover over one button (Button1) should appear that 80% width div (div.BC) with its content (let's say a video).

<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>

Any solution (CSS or jQuery - though I would prefer a CSS one) will be highly appreciated.

And again an outline of my problem: jsFIDDLE

Answer 1

First what you want to do is nest your divs you want to display on hover inside of the list item elements so they become part of the hover field and are target-able by the css traversing. You set the initial display on your nested divs to display: none. On hover, you just set the display on the nested div to inline-block (or any visible display property). I mocked up your code quick to show you.

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

I this what you try to achieve? You can run the snippet to see the result.

EDIT: I have added a class active to the first <li> element (Button 1), this way it is by default active. You can then add the class active to other buttons in other pages.

 .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; } 

 <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>