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">News</li>
<li id="menu-item-2" class="menu-item-2">Services</li>
<li id="menu-item-3" class="menu-item-3">About us
<ul class="sub-menu">
<li id="menu-item-4" class="menu-item-4">Contact</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%;
}
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.
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; }
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">News</li>
<li id="menu-item-2" class="menu-item-2">Services</li>
<li id="menu-item-3" class="menu-item-3">About us
<ul class="sub-menu">
<li id="menu-item-4" class="menu-item-4">Contact</li>
</ul>
</li>
</ul></div></nav>
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!
Related
This is the menu I'm talking about
I'm having this problem that I can't solve... why it doesn't center?
I've already tried a lot of stuff here on this website, but I can't understand it all, can someone help me with the problem and try to explain to me how to center it?
.menu {
font: 16px 'Dosis', sans-serif; font-weight: 600;
list-style: none;
margin: 0;
padding: 0;
float: left;
border: none;
}
.menu li { position: relative; float: left; }
.menu li a {
color: #FFF;
text-decoration: none;
list-style: none;
display: block;
margin: 0;
padding: 14px 11px 0 11px;
height: 36px;
}
.menu li a:hover { color: #FC0; background: #F60 url(../imgs/bg-menu2.png) repeat-x; }
.menu li ul {
position: absolute;
margin: 0;
padding: 0;
top: 50px;
left: 0px;
background: #F60;
display: none;
float: left;
z-index: 999;
}
.menu li:hover ul ul { display: none; }
.menu li:hover ul, .menu li ul li:hover ul, .menu li.over ul, .menu li ul li.over ul { display: block; }
.menu li ul li { display: block; width: 200px; }
li.border0 { border: none; }
.menu li ul li ul { z-index: 998; top: 0px; left: 200px; }
body { behavior: url(csshover.htc); }
<ul class="menu">
<li>INÍCIO</li>
<li>PROGRAMAÇÃO</li>
<li>HOSPEDAGEM</li>
<li>SUBMISSÃO</li>
<li>LOCAL</li>
<li>INSCRIÇÃO</li>
<li>CONTATO</li>
</ul>
You need to set text-align: center for .menu and unfloat a menu items:
(I've added background: teal; for visibility of white words)
.menu {
font: 16px 'Dosis', sans-serif; font-weight: 600;
text-align: center;
list-style: none;
margin: 0 auto;
padding: 0;
background: teal;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
color: #FFF;
text-decoration: none;
list-style: none;
display: block;
margin: 0;
padding: 14px 11px 0 11px;
height: 36px;
}
.menu li a:hover { color: #FC0; background: #F60 url(../imgs/bg-menu2.png) repeat-x; }
.menu li ul {
position: absolute;
margin: 0;
padding: 0;
top: 50px;
left: 0px;
background: #F60;
display: none;
float: left;
z-index: 999;
}
.menu li:hover ul ul { display: none; }
.menu li:hover ul, .menu li ul li:hover ul, .menu li.over ul, .menu li ul li.over ul { display: block; }
.menu li ul li { display: block; width: 200px; }
li.border0 { border: none; }
.menu li ul li ul { z-index: 998; top: 0px; left: 200px; }
body { behavior: url(csshover.htc); }
<ul class="menu">
<li>INÍCIO</li>
<li>PROGRAMAÇÃO</li>
<li>HOSPEDAGEM</li>
<li>SUBMISSÃO</li>
<li>LOCAL</li>
<li>INSCRIÇÃO</li>
<li>CONTATO</li>
</ul>
I am unable to get rid of a gap between my nav bar and my submenu dropdown menu. You can view the issue here.
My css is here:
nav#nav{
float: left;
font: 14px/16px 'MuseoSlab500Regular', arial, helvetica, sans-serif;
margin-right: auto;
z-index: 99999;
/*background-image: url(../images/2blkbg.png);*/
/*background-repeat: repeat-x;*/
padding-left: 30px;
/*background-position: left bottom;*/
background-color: #000;
height: 53px;
display: block;
position: relative;
margin-top: 15px;
margin-bottom: 15px;
}
#nav ul{
list-style: none;
margin: 0;
padding: 0;
}
#nav ul li{
float: left;
margin-right: 0;
margin-bottom: 0;
padding-top: 0;
padding-right: 49px;
padding-bottom: 0;
padding-left: 0;
}
#nav ul a,#nav li.current-menu-ancestor a{
display: block;
height:83px;
line-height: 53px;
border-top-width: 0px;
border-top-style: solid;
border-top-color: #fff;
}
#nav ul .current_page_item a, #nav ul .current-menu-item a, #nav ul > .current-menu-parent a{
color:#a0ce4e;
text-decoration:none;
border-color:#a0ce4e;
}
#nav ul li{
position: relative;
}
#nav ul ul{
display: none;
position: absolute;
top: 0px;
left: 0;
width: 170px;
background: #edebeb;
z-index: 100000;
border-top: 3px solid #a0ce4e;
z-index: 99999;
}
#nav ul li:hover ul{
display: block;
}
#nav ul li ul li{
display: block;
float: none;
margin: 0;
padding: 0;
background-image: url(../images/blkbg.png);
background-repeat: repeat-x;
}
#wrapper #nav ul li ul li a{
background: url(../images/subnav_sep.jpg) repeat-x bottom left;
border: 0;
height: 30px;
text-indent: 20px;
font: 13px/30px 'PTSansRegular', Arial, Helvetica, sans-serif;
color: #333333 !important;
}
#wrapper #nav ul li ul li a:hover,#wrapper #nav ul li ul li.current-menu-item a{
background-color:rgba(255,255,255,0.5);
}
#nav ul ul ul{
display:none !important;
}
#nav ul ul li:hover ul{
display:block !important;
top:-3px;left:170px;
}
#nav select{
max-width:100%;
display:none;
}
#nav > li > a,#nav li.current-menu-ancestor a {
height:83px;
line-height:83px;
}
#nav ul ul {
top:86px;
}
Set the top and that will remove the excess of gap:
#nav ul ul {
top:86px;
}
Good you posted the url, since problem is not in the css you included. The problem is in this class:
#nav ul ul {
top:86px;
}
This top-offset should be set to 53px, the same height as your menu bar (nav#nav):
#nav ul ul {
top:53px;
}
This css-class actually is not in your css-stylesheet, but in your page itself. It is included in the <head></head>.
Vertical submenu postion is correct but links are on top of each other. And it won't hide when hovering in main menu. Hides when hovering outside menu. I don't know what to add/change in css.
Vertical submenu
nav {
padding-top: 183px;
margin-left: auto;
margin-right: auto;
}
ul {
padding: 0;
margin: 0;
}
nav ul {
list-style: none;
font-weight: bold;
font-size: 20px;
margin: 5px;
width: 200px;
}
nav ul ul {
display: none;
margin: 0px;
padding: 0px;
}
nav ul li {
float: left;
}
nav ul a {
display: block;
width: 145px;
text-align: center;
text-decoration: none;
color: #fff;
border: 1px solid #004c99;
border-radius: 8px;
margin-right: auto;
margin-left: auto;
padding-top: 5px;
padding-right: 9px;
padding-bottom: 5px;
padding-left: 9px;
}
nav ul a:active {
background: rgba(255,255,255,0.4);
color: #FFF;
}
nav ul li a:hover, ul a:focus {
text-decoration: none;
background-color: #6699cc;
color: #FFFFFF;
}
nav ul a:link, nav ul a:visited {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
nav ul li a {
display: block;
margin-top: 0px;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #fff;
margin-top: -35px;
position: relative;
margin-left: 165px;
}
nav ul ul li a:hover {
background: #6699cc;
}
nav ul ul li a:active, ul ul li a:link , ul ul li a:visited{
background-color: #3370AD;
}
nav ul li:hover {
margin-top: 0px;
}
nav ul li:hover > ul{
display: block;
position: absolute;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
Thanks in advance!
change your nav ul li a {
display: block;
margin-top: 0px;} to ... margin-top:5px and see if that does the job. that will fix the spacing issue anyway
This happened to me when I nested the submenu incorrectly:
<ul id="main menu">
<li>
<a>Menu item</a>
<!-- DO NOT CLOSE THIS LI TAG YET! -->
<ul>
<li>Submenu item</li>
</ul>
</li> <!-- NOW YOU CAN CLOSE IT -->
</ul>
So I'm working on a drop menu and I'd like each menu item to have an auto width. i.e. the background to expand to the width of the menu item rather than having an overall fixed width for all the UL. I thought that giving the ul li an auto width would sort it but it seems not. What am I missing?
<ul id="nav">
<li><a class="last" href="#">MENU ▼</a>
<ul>
<li>Short</li>
<li>Very Long</li>
</ul>
</li>
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav li {
float: right;
position: relative; padding: 0;
}
#nav li a {
display: block;
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
position: absolute;
right: 0em;
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
float: none;
position: static;
width: auto;
height: 0;
line-height: 0;
background: none;
text-align: right;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}
#nav li ul li a {
background: #222;
}
#nav li ul li a:hover {
color: #666;
}
Your #nav li style is being applied to all child li elements, so you need to use the ">", which selects only the immediate child.
Here is updated CSS which fixes the problem. I also commented out some other CSS that was interfering:
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav > li { /* Added ">" */
float: right;
position: relative;
padding: 0;
}
#nav li a {
display: inline-block; /* was block */
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
/*position: absolute;
right: 0em; */
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
/*float: none;
position: static;
width: auto;*/
height: 0;
line-height: 0;
background: none;
text-align: right;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}
You are using display: block for your links. That causes them to fill the available space. That's why they are all the same width. And float: right is contributing to the general narrowness. Use inline-block instead of block and prevent the link wrapping by using white-space: nowrap:
Demo: http://jsfiddle.net/neJty/2/
I have a menu with each item a different font-size/height -- looks fine in everything but IE which cuts the items in half...
Here's the HTML:
<header>
<div class="inside">
<h1>Ballroom Rocks LOGO</h1>
<nav>
<ul>
<li>Home</li>
<li>The Show</li>
<li>Dancers</li>
<li>Creative Team</li>
<li>The Buzz</li>
<li>Corporate Events</li>
<li>Media</li>
<li>News</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
And the relevent CSS:
ul li {padding: 0; margin:0 0 2px 0; height: auto; line-height: auto; overflow: visible; display: block;vertical-align:top;}
ul li a{font-family: Impact; text-transform: uppercase; text-decoration: none; opacity: .25; color: white; margin:0; display: block; vertical-align: top; overflow: visible; line-height: auto;}
ul li a:hover, nav ul li a:hover, nav ul li a.active{color:#06c;opacity: 1;}
ul li a#nav-home{display: block; font-size:26px; height: 21px; line-height: 21px;}
ul li a#nav-theshow{display: block; font-size:27px; height: 21px; line-height: 21px; padding-top: 2px; }
ul li a#nav-dancers{display: block; font-size:35px; height: 26px; line-height: 26px; padding-top: 4px;}
ul li a#nav-cteam{display: block; font-size:26px; height: 23px; line-height: 23px;}
ul li a#nav-thebuzz{display: block; font-size:34px; height: 25px; padding-top: 3px;}
ul li a#nav-cevents{display: block; font-size:22px; height: 21px; }
ul li a#nav-media{display: block; font-size:46px; height: 30px; padding-top: 7px;}
ul li a#nav-news{display: block; font-size:34px; height: 24px; padding-top: 3px;}
ul li a#nav-blog{display: block; font-size:24px; height: 20px; padding-top: 1px;}
ul li a#nav-contact{display: block; font-size:28px; height: 23px; padding-top: 1px;}
And a link: http://www.mindsmack.com/clients/BallroomRocks/index.html
I've tried various versions and line-heights and padding... Any ideas what could be causing this?
(edit: problem was in IE7)
I cleaned up the css and got rid of the vertical-align and it works fine in ie7 now
header{position: absolute; left: 0; top: 0;}
header h1 a{display: block; width: 320px;background: url('../images/logo.jpg'); margin:0; text-indent: -9999px; padding: 0;}
ul{list-style-type: none; margin: 50px 0 0 70px; width: 250px;}
ul li {padding: 0; margin:0 0 2px 0; display: block;}
ul li a{font-family: Impact; text-transform: uppercase; text-decoration: none; opacity: .25; color: black; margin:0; display: block; line-height:.8em;}
ul li a:hover, nav ul li a:hover, nav ul li a.active{color:#06c;opacity: 1;}
ul li a#nav-home { font-size:26px; }
ul li a#nav-theshow { font-size:27px; }
ul li a#nav-dancers { font-size:35px; }
ul li a#nav-cteam { font-size:26px; }
ul li a#nav-thebuzz { font-size:34px; }
ul li a#nav-cevents { font-size:22px; }
ul li a#nav-media { font-size:46px; }
ul li a#nav-news { font-size:34px; }
ul li a#nav-blog { font-size:24px; }
ul li a#nav-contact { font-size:28px; }