Howard Bash
asked on
Spacing Makes the DIV Navigation sub-menu disappear
I had this question after viewing Handling the alignment of the Drop down Divs.
I had to add some vertical spacing to the DIV Menu. Unfortunately, when I drop select an item from the sub-menu, the sub-menu disappears.
I will include a fragment of the modified DIV structure for reference.
I had to add some vertical spacing to the DIV Menu. Unfortunately, when I drop select an item from the sub-menu, the sub-menu disappears.
I will include a fragment of the modified DIV structure for reference.
<div class="container">
<div class="menu-container">
<div class="item">
<a href="http://www.w3schools.com/js/default.asp">1-JavaScript Tutorial</a><br/><br/>
<div class="sub-menu">
<div class="col_1" style="float:left;padding:5px 25px 5px 5px; height:auto;width:auto;">
<a href="http://www.w3schools.com/js/default.asp">2-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">3-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">4-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_2" style="float:left;padding:5px 25px 5px 5px; height:auto;width:auto;">
<a href="http://www.w3schools.com/js/default.asp">5-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">6-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">7-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_3" style="float:left;padding:5px 25px 5px 5px; height:auto;width:auto;">
<a href="http://www.w3schools.com/js/default.asp">8-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">9-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">10-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_4" style="float:left;padding:5px 25px 5px 5px; height:auto;width:auto;">
<a href="http://www.w3schools.com/js/default.asp">11-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">12-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">13-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_5" style="float:left;padding:5px 25px 5px 5px; height:auto;width:auto;">
<a href="http://www.w3schools.com/js/default.asp">14-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">15-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">16-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_6" style="float:left;padding:5px 25px 5px 5px; height:auto;width:auto;">
<a href="http://www.w3schools.com/js/default.asp">17-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">18-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">19-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
</div>
</div>
Can we see more of your code and CSS - if you are doing the hover on the <a> then you will have this problem as the <a> does not encompass the submenu - you need to do the hover on the .item
But will be able to suggest more with more code.
But will be able to suggest more with more code.
ASKER
The following is the CSS for the above:
a , a:hover{
text-decoration: none!important;
}
.menu-container {
position: relative;
}
.menu-container .item {
float: left;
padding: 0 15px;
}
.menu-container .item > a {
padding-top: 5px;
padding-bottom: 5px;
}
.menu-container:after {
display: table;
content: " ";
clear: both;
}
.sub-menu {
background: #fff;
border: 1px solid black;
display: none;
// left: 0;
position: absolute;
}
.item:hover .sub-menu {
display: block;
border-width:0px;
border-color:gray;
// border-radius:20px;
margin:3px 0 0 0;
}
.item:hover > a {
background: blue;
color: white;
}
.item > a {
color:white !Important;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
As usual... you are correct sir! Thank you!
You are welcome.
take a look at this code pen
http://codepen.io/chooch/pen/GZaMEx
look at the drop down menus heres the idea
<div id="container">
<div>Title</div>
<div id="list">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
so on the hover of the container div the list div height should change so something like this in css
#list{
height:0;
}
#container:hover > #list{
max-height:2000px;
}