Spacing Makes the DIV Navigation sub-menu disappear

Posted on 2016-09-26
Medium Priority
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  -->

Open in new window

Question by:Howard Bash
  • 3
  • 2
LVL 10

Expert Comment

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


look at the drop down menus heres the idea

<div id="container">
<div id="list">

so on the hover of the container div the list div height should change so something like this in css


#container:hover > #list{
LVL 62

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.

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-radius:20px;
  margin:3px 0 0 0;

.item:hover > a {
  background: blue;
  color: white;

.item > a {
  color:white !Important;

Open in new window

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

LVL 62

Accepted Solution

Julian Hansen earned 2000 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.

Author Closing Comment

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

Expert Comment

by:Julian Hansen
ID: 41818142
You are welcome.

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

587 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