• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 74
  • Last Modified:

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

0
Howard Bash
Asked:
Howard Bash
  • 3
  • 2
1 Solution
 
PawełCommented:
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;
}
0
 
Julian HansenCommented:
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.
0
 
Howard BashSenior Software EngineerAuthor Commented:
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;
}

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Julian HansenCommented:
Line 33 - the margin is creating a gap between the parent and the child. As your mouse moves over that gap you loose the hover.

Take the margin out and your problem should go away.
0
 
Howard BashSenior Software EngineerAuthor Commented:
As usual... you are correct sir!  Thank you!
0
 
Julian HansenCommented:
You are welcome.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now