Solved

Spacing Makes the DIV Navigation sub-menu disappear

Posted on 2016-09-26
6
55 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 56

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 56

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 56

Expert Comment

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

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML5 storage and web apps 11 44
Add a little space on either side of a table. 12 25
Two decimal 5 25
Table header must be on top 2 20
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to dynamically set the form action using jQuery.

685 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