Solved

Spacing Makes the DIV Navigation sub-menu disappear

Posted on 2016-09-26
6
51 Views
Last Modified: 2016-09-27
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
Comment
Question by:Howard Bash
  • 3
  • 2
6 Comments
 
LVL 9

Expert Comment

by:Paweł
ID: 41817341
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
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41817610
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
 
LVL 1

Author Comment

by:Howard Bash
ID: 41818021
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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
LVL 55

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41818106
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
 
LVL 1

Author Closing Comment

by:Howard Bash
ID: 41818124
As usual... you are correct sir!  Thank you!
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41818142
You are welcome.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question