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.

Menu in Action -1 is hovering and 2 is attempting to select from the dropdown

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>

Open in new window

CSSHTMLjQuery

Last Comment

Julian Hansen

8/22/2022 - Mon

Paweł

9/27/2016

I bet you are trying to use css to open a div on hover of another div right?

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

Julian Hansen

9/27/2016

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.

Howard Bash

9/27/2016

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