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>.
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 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!
I have a problem here.
I'm using wordpress and I was confused.
How to stick background behind the nav bar?.
I activated LowerMedia Sticky.js menu's plugin, then I want to change my navbar background color. I try to add a background: #000; in #navigation. It's look okay, but when I scroll down, the navigation background is not move. There's only the navigation text that moved. I try to move background: #000; to #navigation .sf-menu a but the background is only appear around the text, even it move with the text when I scroll down. I don't know what to do now. Please help me. Thanks before.
This is my site : vitraprawira.net
This is my final navbar css code:
/* Main Navigation
================================================== */
/*hide responsive nav*/
#top-bar .selector, #navigation .selector { display: none; }
/*core*/
.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
.sf-menu { line-height: 1.0 }
.sf-menu ul { position: absolute; top: -999em; width: 180px; }
.sf-menu ul li { width: 100% }
.sf-menu li:hover { visibility: inherit }
.sf-menu li { float: left; position: relative; }
.sf-menu a { display: block; position: relative; }
.sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0px; top: 30px; z-index: 99; }
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 180px; top: 1px; }
/*styling*/
#navigation-wrap { position: relative; display: block; }
#navigation { margin-left: 170px; margin-right: auto; position: relative; height: 55px; transparent: none; }
#navigation .sf-menu > li:hover > ul, .sf-menu li.sfHover > ul { top: 50px }
#navigation ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul, ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 200px; top: 0; }
#navigation .sf-menu a { font-size: 1.000em; height: 55px; line-height: 55px; color: #fff; background: #000 url("images/vintage.png"); }
#navigation .sf-menu > li > a { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
#navigation .sf-menu li { float: left; position: relative; }
#navigation .sf-menu > li { background: url("images/dash.png") right center no-repeat; margin-right: 20px; padding-right: 20px; }
#navigation .sf-menu > li:last-child { margin: 0; padding: 0; }
#navigation .sf-menu > li > a:hover { color: #fff }
#navigation .sf-menu > .current-menu-item > a { color: #7094DB }
#navigation .sf-menu > li.sfHover > a { color: #fff }
/*drop-down styles*/
#navigation .sf-menu ul { position: absolute; nowhitespace: afterproperty; top: -999em; width: 200px; z-index: 9999; left: 0; border: 1px solid #ddd; box-shadow: 0 0 8px rgba(0,0,0,0.08); }
#navigation .sf-menu ul > li:last-child { -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; }
#navigation .sf-menu ul li { background: #000; border-bottom: 1px solid rgba(0,0,0,0.05); }
#navigation .sf-menu ul li:first-child { border-top: 0 }
#navigation .sf-menu ul li:last-child { border-bottom: 0 }
#navigation .sf-menu ul a { display: block; padding: 10px; color: #fff; height: auto; margin: 0px; border: 0px; line-height: 1.8em; font-size: 0.923em; text-shadow: none; }
#navigation .sf-menu ul li > a:hover { color: #7094DB; background: #2D3B58; }
If you're wanting the color/image to appear behind the entire menu block, then you're localizing the background too close to the anchor element.
Just do this: #navigation {background: #ccc;} or whatever color you want.
My CSS Menu pops the browser's horizontal scroll bar on and off as I hover over menu items. I've tried various combinations of css to deal with overflow using;
overflow-x:hidden;
and
overflow-y: auto;
But these just cut off my drop down elements in the menu and puts in a scroll bar inside my menu.
Here's my source code for the menu:
/* Main Menu*/
#menu {
font-family: 'sharetech', sans-serif;
float: right;
height: auto;
font-size: 18px;
padding: 0;
margin: 14px 0 0 0;
}
#menu a {
display: block;
line-height: 1em;
text-decoration: none;
color: gray;
padding: 2px 10px;
}
#menu:after, #menu ul:after {
content: '';
display: block;
clear: both;
}
#menu ul, #menu li {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul {
position: relative;
z-index: 597;
}
#menu ul li {
float: left;
min-height: 1px;
vertical-align: middle;
}
#menu ul li.hover,
#menu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#menu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#menu ul ul li {
float: none;
}
#menu ul ul ul {
border-top: 0 none;
top: 0;
left: auto;
right: -99.5%;
}
#menu ul li:hover > ul {
visibility: visible;
}
#menu ul ul {
bottom: 0;
left: 0;
margin-top: 0;
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#menu ul ul a{
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 10px 10px;
}
#menu ul ul li {
font-weight: normal;
position: relative
}
#menu > ul > li > a {
line-height: 48px;
}
#menu ul ul li:first-child > a {
border-top: 1px solid #0082e7;
}
#menu ul ul li:hover > a {
background: #35a6ff;
}
#menu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#menu ul ul li:last-child:hover > a {
border-radius: 0 0 0 3px;
}
#menu ul ul li.has-sub > a:after {
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#menu ul li:hover > a, #menu ul li.active > a {
background: #1b9bff;
color: #FFF;
}
#menu ul li.has-sub > a:after {
margin-left: 5px;
}
#menu ul li.last ul {
left: auto;
right: 0;
}
#menu ul li.last ul ul {
left: auto;
right: 99.5%;
}
You were right Nix, it was in the pseudo classes. I figured it was, here's what was missing;
#fmenu ul ul li {
float: none;
width: 190px; <----set width
}
I defined a set width here and it solved the problem.
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/