CSS drop down menu does not stay open on hover

Question

I am trying to make a make a drop down menu with css, but the drop down does not keep open when I hover it. I have used days on this now searching for what is blocking it to keep open so I can access the submenu item. Can anyone help please?

A million thanks to the one who can find a solution to this endless problem.

Here is the html and css I am working on:

<nav id="topmenu" role="navigation"><div id="nav" class="menu-container">
<ul id="menu-main">
<li id="menu-item-1" class="current-menu-item menu-item-1"><a href="#">News</a></li>
<li id="menu-item-2" class="menu-item-2"><a href="#">Services</a></li>
<li id="menu-item-3" class="menu-item-3"><a href="#">About us</a>
<ul class="sub-menu">
    <li id="menu-item-4" class="menu-item-4"><a href="#">Contact</a></li>
</ul>
</li>
</ul></div></nav>



#topmenu {
    padding: 5px 0 0 0; 
    height: 65px;
}
#topmenu ul {
    margin:0 10px;
}
#topmenu ul li { 
    float: left; 
    position: relative; 
    font-family: 'Lato',sans-serif; 
    font-size: 13px; 
    font-weight: 400; 
    letter-spacing: 1px;
    text-transform: uppercase; 
    margin: 0 30px 0 0; 
    color: #333; 
}
#topmenu ul li { 
    font-family: 'Lato',sans-serif; 
    font-size: 13px; 
    font-weight: 400; 
    letter-spacing: 1px;
    text-transform: uppercase; 
    margin: 0; 
    color: #333; 
}
#topmenu ul ul { 
    display: none; 
    float: left; 
    position: absolute; 
    top: 2em; 
    left: -5px; 
    z-index: 99999; 
    padding: 5px 0 0 5px; 
    margin: 14px 0 0 0; 
    background: #fff; 
    border: 1px dashed #c1c1c1; 
    border-top: none; 
}

#topmenu ul ul li{
    position:relative;
    text-indent:0;
}

#topmenu ul ul ul { 
    left: 100%; 
    top: -20px; 
    border: 1px dashed #c1c1c1;
}
#topmenu ul ul li, 
#topmenu ul ul ul li { 
    min-width: 130px; 
    margin: 0; 
    padding: 0; 
    border: none; 
    background: #fff; 
display: block;
float: none;
position: relative;
min-width: 150px;
clear: both;
}
#topmenu >li ul>li
{
   list-style:none;
   text-indent:0;
   position:relative;
} 
#topmenu ul ul a { 
    line-height: 1.5em; 
    padding: .5em .5em .5em 1em;
    width: 10em; 
    height: auto;
}
#topmenu ul ul a:hover,
#topmenu ul ul:hover  { 
    display: inline-block;
}
#topmenu ul ul a:after { 
position: absolute;
right: 10px;
top: 50%;
margin-top: -6px;
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
}
#topmenu ul li a { 
    text-decoration: none; 
    color: #fff; 
    display: block; 
    height: 30px; 
    line-height: 3.1em;
}
#topmenu ul li:hover > ul { 
    display: block;
}
#topmenu ul ul a:hover { 
    color: #fff;
}
#topmenu ul li:hover > a, 
#topmenu ul ul :hover > a {
    border-bottom: 1px solid #fff;
}
#topmenu li ul { 
    position: absolute;  
    display: none; 
} 
#topmenu li:hover ul { 
    display: block; 
} 
#topmenu li ul li { 
    float: none; 
    display: inline; 
}
#topmenu ul li li a,
#topmenu ul li li li a {
  color:#444444;
  line-height:1.9em;
}
#topmenu ul li li a:hover,
#topmenu ul li li li a:hover {
  color:#444444;
  text-decoration:underline;
}
#topmenu ul ul:after  { 
    display: table;
    clear: both;
}
.post-in-category #topmenu ul li.current-menu-item a,
#topmenu ul li.current-menu-item a,
#topmenu ul li.current_page_item a { 
    border-bottom: 1px solid #fff;
}
#topmenu select { 
    display: none;
}
#topmenu div { 
    background-color: #0B3DB0;
    height:38px;
    width:100%;
}

Have a look what he is done compare your code with his/hers http://stackoverflow.com/questions/7814186/drop-down-menu-that-opens-up-upward-with-pure-css?rq=1 — Asim Poptani, Aug 17 '14 at 20:04

score 1 · Answer 1 · edited Dec 17 '21 at 07:24

change from this:

#topmenu li:hover ul { 
display: block; 
}

to this:

#topmenu li:hover > ul { 
display: block; position:relative; top:-7px; 
}

See fiddle here

#topmenu {
    padding: 5px 0 0 0; 
    height: 65px;
}
#topmenu ul {
    margin:0 10px;
}
#topmenu ul li { 
    float: left; 
    position: relative; 
    font-family: 'Lato',sans-serif; 
    font-size: 13px; 
    font-weight: 400; 
    letter-spacing: 1px;
    text-transform: uppercase; 
    margin: 0 30px 0 0; 
    color: #333; 
}
#topmenu ul li { 
    font-family: 'Lato',sans-serif; 
    font-size: 13px; 
    font-weight: 400; 
    letter-spacing: 1px;
    text-transform: uppercase; 
    margin: 0; 
    color: #333; 
}
#topmenu ul ul { 
    display: none; 
    float: left; 
    position: absolute; 
    top: 2em; 
    left: -5px; 
    z-index: 99999; 
    padding: 5px 0 0 5px; 
    margin: 14px 0 0 0; 
    background: #fff; 
    border: 1px dashed #c1c1c1; 
    border-top: none; 
}

#topmenu ul ul li{
    position:relative;
    text-indent:0;
}

#topmenu ul ul ul { 
    left: 100%; 
    top: -20px; 
    border: 1px dashed #c1c1c1;
}
#topmenu ul ul li, 
#topmenu ul ul ul li { 
    min-width: 130px; 
    margin: 0; 
    padding: 0; 
    border: none; 
    background: #fff; 
display: block;
float: none;
position: relative;
min-width: 150px;
clear: both;
}
#topmenu >li ul>li
{
   list-style:none;
   text-indent:0;
   position:relative;
} 
#topmenu ul ul a { 
    line-height: 1.5em; 
    padding: .5em .5em .5em 1em;
    width: 10em; 
    height: auto;
}
#topmenu ul ul a:hover,
#topmenu ul ul:hover  { 
    display: inline-block;
}
#topmenu ul ul a:after { 
position: absolute;
right: 10px;
top: 50%;
margin-top: -6px;
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
}
#topmenu ul li a { 
    text-decoration: none; 
    color: #fff; 
    display: block; 
    height: 30px; 
    line-height: 3.1em;
}
#topmenu ul li:hover > ul { 
    display: block;
}
#topmenu ul ul a:hover { 
    color: #fff;
}
#topmenu ul li:hover > a, 
#topmenu ul ul :hover > a {
    border-bottom: 1px solid #fff;
}
#topmenu li ul { 
    position: absolute;  
    display: none; 
} 
#topmenu li:hover > ul { 
    display: block; position:relative; top:-7px; 
} 
#topmenu li ul li { 
    float: none; 
    display: inline; 
}
#topmenu ul li li a,
#topmenu ul li li li a {
  color:#444444;
  line-height:1.9em;
}
#topmenu ul li li a:hover,
#topmenu ul li li li a:hover {
  color:#444444;
  text-decoration:underline;
}
#topmenu ul ul:after  { 
    display: table;
    clear: both;
}
.post-in-category #topmenu ul li.current-menu-item a,
#topmenu ul li.current-menu-item a,
#topmenu ul li.current_page_item a { 
    border-bottom: 1px solid #fff;
}
#topmenu select { 
    display: none;
}
#topmenu div { 
    background-color: #0B3DB0;
    height:38px;
    width:100%;
}

<nav id="topmenu" role="navigation"><div id="nav" class="menu-container">
<ul id="menu-main">
<li id="menu-item-1" class="current-menu-item menu-item-1"><a href="#">News</a></li>
<li id="menu-item-2" class="menu-item-2"><a href="#">Services</a></li>
<li id="menu-item-3" class="menu-item-3"><a href="#">About us</a>
<ul class="sub-menu">
    <li id="menu-item-4" class="menu-item-4"><a href="#">Contact</a></li>
</ul>
</li>
</ul></div></nav>

score 1 · Answer 2 · answered Aug 17 '14 at 20:33

In addition to

#topmenu li:hover ul {  
  display: block; 
}

you could have a line for

#topmenu li ul:hover {  
  display: block; 
}

( you could just combine the selectors and save a line)

Because you're :hovering the parent <li> and it's triggering the display:block on the child <ul> but once you :hover the <ul> it's back to display:none;. The absolutely positioning of the <ul> puts it out of the <li> :hover / hit area.

score 1 · Answer 3 · answered Sep 13 '15 at 11:13

1

Another thing that might be helpful is when hovering the dropdown ul to set the z-index of the dropdown ul to 1.

  #topmenu li:hover > ul 
   {   display: block; z-index:1; }

answered Sep 13 '15 at 11:13

athskar

226
1
3
12

score -1 · Accepted Answer · answered Aug 17 '14 at 20:26

-1

Add Below CSS to your Style. See JSFiddle Here.

#topmenu #nav ul li ul{
    display: none;
}

#topmenu #nav ul li:hover ul{
    display: block;
}

It works for me. Hope this will help!

answered Aug 17 '14 at 20:26

Vivek Pratap Singh

9,326
5
21
34

@jl001 Did u get the chance to look for it ? – Vivek Pratap Singh Aug 18 '14 at 03:07
Yes, thank you, but it still doesn't work. So now I am trying to find out if other css styles are interfering. – jl001 Aug 18 '14 at 09:21
@jl001 Did you check the Fiddle that i have prepared? its working fine there. – Vivek Pratap Singh Aug 18 '14 at 09:24
Indeed I did, but somehow it doesn't work on my site. – jl001 Aug 18 '14 at 09:27
I believe it is because some of the css styles are not present in the fiddle. – jl001 Aug 18 '14 at 09:28
Seems some CSS in your site overrides the needful style. Or try copying the fiddle Css and paste at the very last of your Css stylesheet. – Vivek Pratap Singh Aug 18 '14 at 09:30
Now it works to navigate do down to the dropbox items, but the first level takes the width of the submenu and pushes all the other content. – jl001 Aug 18 '14 at 09:38
Thank you so much for your patience and help. Can you see my update now? – jl001 Aug 18 '14 at 09:46
Oh, I didn't realize I had to send you the new link: http://jsfiddle.net/fp5wmpwr/3/ – jl001 Aug 18 '14 at 09:59
Cool. But what is the problem now ? fiddle seems to be working now – Vivek Pratap Singh Aug 18 '14 at 10:07
Do you see my updated blue menu bar? When hovering "About us" and opening "Contact us" in the submenu, it is indeed possible to access the submenu. However, now the top menu item "News" (which I changed the position of to show it more clearly), is being moved to the right side when hovering the submenu. http://jsfiddle.net/fp5wmpwr/4/ – jl001 Aug 18 '14 at 10:11
@jl001 Updated Your Fiddle.Check it out now.[JSFIDDLE](http://jsfiddle.net/fp5wmpwr/10/) – Vivek Pratap Singh Aug 18 '14 at 11:02
I wanted to vote you up, but it looks like I am too new on this forum so I can not vote for anyone yet :-( – jl001 Aug 18 '14 at 12:52
@jl001 Glad i cud help u! You can voteup. it won't harm anyone :) :P – Vivek Pratap Singh Aug 18 '14 at 16:16
Wasn't logged in here for a while. What I meant is that stackoverflow doesn't allow new users to who hasn't posted enough to vote on comments. – jl001 Jan 22 '15 at 13:33

CSS drop down menu does not stay open on hover

4 Answers4