I am having problems getting the sub menu on my nav bar to display correctly - hovering doesn't seem to be over the correct link ("media") but in between, and the dropdown displays off to the right and not under "media" link.
Any suggestions gratefully received.
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Testimonials</li>
<li><a>Media</a>
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
<li>More Info</li>
</ul>
</nav>
css here:
nav ul {
background-color: black;
text-align: center;
}
nav ul li {
display: inline-block;
padding: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
position: absolute;
}
nav ul ul li {
display: block;
}
Include the whole sublist ul inside the A tag, instead of after it. That means you need to adjust the nav ul li:hover > ul line as well (you can drop the > if you don't require further levels)
Related
I'm having an issue where I cannot get my sub nav to hide until on Hover. I assume I accidentally just deleted some kind of css that I need, but I cannot for the life of me figure out what I did.
The link to the dev site is: http://fallriverbenefits.com/dev/
I solved this by adding this to the css:
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
I'm working on a horizontal menu with a vertical submenu. I have most of the display features set the way I want, but I'm running into trouble with displaying the submenu items with the same width. I want to display them as a nice, even block, but I'm left with a jagged edge on the right side of the submenu.
Here's a snippet of the html I'm using for the menu itself.
<nav class="navbar">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >item with sub</a>
<ul>
<li><a href="#" >sub item 1</a></li>
<li><a href="#" >sub item 2 which is longer</a></li>
<li><a href="#" >sub item 3</a></li>
</ul>
I'm not sure which part of the css I'm using might be affecting the width of the dropdown menu, so here's everything.
.navbar {
font-size: 20px;
text-align: center;
position: relative;
z-index: 1;
white-space: nowrap;
}
.navbar a {
background-color: #333;
color: #999;
text-decoration: none;
}
.navbar ul {
padding: 0;
margin: 0;
list-style: none;
}
.navbar li {
float: left;
position: relative;
min-width: 120px;
padding: 10px 10px 10px 10px;
background-color: #333;
color: #999;
}
.navbar li ul {
display: none;
position: absolute;
left: 0;
}
.navbar li > ul {
top: 42px;
left: 0px;
}
.navbar li:hover,
.navbar li:hover > a,
.navbar li a:hover{
background-color: #999;
color: #333;
text-decoration: none;
display: block;
}
.navbar li:hover ul,
.navbar li:hover ul li {
display: block;
clear: both;
min-width: 120px;
}
The fiddle is here: http://jsfiddle.net/jasotastic/yso6v2po/
Possible that this is a duplicate, but I haven't been able to find a similar question asked.
You could set 100% width to <li> to adjust with content width.
.navbar li ul li {
display: block;
width: 100%;
text-align: left;
}
Fiddle: http://jsfiddle.net/yso6v2po/4/
You can set a width to li and use white-space: normal. Then you will have a fixed width and break the phrase if it is bigger than the width.
Your code modified:
.navbar li ul li {
width:200px;
white-space:normal;
display: block;
}
Here is the jsfiddle: http://jsfiddle.net/yso6v2po/3/
Please help, need to add delay on css menu mouse out. Tried different ways but no success. Is it possible to add some javascript code to existing menu?
Please check the jsFiddle example: http://jsfiddle.net/mZLFz/
<div id="nav">
<ul>
<li class="abt">About Us
<ul>
<li>Our style</li>
<li>Our mission</li>
</ul>
</li>
<li class="col">Collection
<ul>
<li class="col-a">2013
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li class="col-b">2014
<ul>
<li>A</li>
</ul>
</li>
</ul>
</li>
<li class="buy">Good to know
<ul>
<li class="buy-a">Men
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
<li class="buy-b">Women
<ul>
<li>A</li>
</ul>
</li>
<li class="buy-c">Kids
<ul>
<li>A</li>
</ul>
</li>
</ul>
</li>
#nav{
height:40px;
overflow:hidden;
list-style:none;
}
#nav ul {list-style:none;}
#nav ul li {text-decoration: none;float:left;}
#nav ul li a {
text-transform:uppercase;
font-size:14px;
color:#bcbec0;
text-decoration: none;
padding:0 20px 3px 20px;
}
#nav ul li:hover > a{border-bottom: 2px solid #afb0bd;color:#383a49;}
/* 1 LEVEL DROP-DOWN MENU */
#nav ul li.abt ul {margin-left:-30px;}
#nav ul li.col ul {margin-left:-100px;}
#nav ul li.buy ul { margin-left: -213px;}
#nav ul li.buy ul li {margin-left: 30px;}
#nav ul li ul { display:none;}
#nav ul li:hover > ul {width:100%;display:block; position:absolute; top:48px;background:#e7e8e9;}
#nav ul li:hover > ul li{ float:left;padding:10px 0 5px 0;list-style:none;}
#nav ul li:hover > ul li a {}
#nav ul li:hover > ul li a:hover {}
/* 2 LEVEL DROP-DOWN MENU */
#nav ul li ul li.col-a ul { margin-left:-50px;top:35px;}
#nav ul li ul li.col-b ul { margin-left:-100px;top:35px;}
#nav ul li ul li.buy-a ul { margin-left:-30px;top:35px;}
#nav ul li ul li.buy-b ul { margin-left:-160px;top:35px;}
#nav ul li ul li.buy-c ul { margin-left:-30px;top:35px;}
#nav ul li > ul li ul { display:none; }
#nav ul li > ul li:hover > ul {width:980px; display:block; position:absolute;background:#f1f1f2;}
#nav ul li > ul li:hover ul li {float:left;padding-top:10px; list-style:none; }
#nav ul li > ul li:hover ul li a {}
#nav ul li > ul li:hover ul li a:hover { }
You can change some :hover to .hover and add some jQuery like this?
$('li').hover(
function(){
var x = this;
setTimeout(
function(){
$(x).addClass('hover')
}, 800
)
},
function(){
$(this).removeClass('hover')
}
)
This seems really simple, but I can't get the syntax correct w/ the following scenario. I have some dropdown menus defined for the top of a screen. I want the list-items (each LI) to be AT LEAST as wide as its parent LI. It seems like an easy job for min-width and inherit, but I haven't been able to get it to work properly.
Right now, the "inherit" word just gets underlined in VS as if it's not recognized. The page will build/load fine, but it's clearly not reading the argument, as the LI controls aren't as wide as their parent LI's. Any help is appreciated.
Here is part of my HTML:
<ul id="javascriptDDM">
<li> MAIN OPTION 1
<ul>
<li> Choice 1 </li>
<li> Choice 2 </li>
<li> Choice 3 </li>
</ul>
</li>
<li> MAIN OPTION 2
<ul>
<li> Choice 1 </li>
<li> Choice 2 </li>
<li> Choice 3 </li>
</ul>
</li>
</ul>
... EDIT - here is ALL of the javascriptDDM CSS:
#javascriptDDM { width: auto; margin: 0; padding: 0 }
#javascriptDDM li { width: auto; float: left; list-style: none }
#javascriptDDM li a { display: block; background: #606668; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; border-top: none; color: White; white-space: nowrap; background-position:left center; }
#javascriptDDM li a:hover { background: #999999; color: #FFFFFF; }
#javascriptDDM li ul { width: auto; margin: 0; padding: 0; position: absolute; visibility: hidden; z-index: 1000 }
#javascriptDDM li ul li { min-width: inherit; float: none; display: inline }
#javascriptDDM li ul li a{ color: #FFFFFF;background: #999999 }
#javascriptDDM li ul li a:hover { color: #000000; background: #FFFFFF}
Inherit will make the min-width property take the same "specified" value as the parent's min-width property. If you don't set min-width on a parent element, it won't have any value.
First of all, you should set your LI display mode to block. In this case, you will be at least able to control width of it.
WEFX
Only "block level" elements will inherit the width of their parents. The "a" element is not inherently a "block" level element.
So, to remedy this, you should either add a "display:block" to the "a" element, or, instead, place the min-width CSS on the li instead of the a.
i have a big problem with a menue ONLY in IE8 - all other browsers work perfect:
There's an menue like this one:
<ul>
<li>Point 1</li>
<li>Point 2</li>
</ul>
and the CSS is this one:
ul li { padding-left: 23px; line-height: 29px; }
ul li:hover,
ul li.active { background: url(../images/bg_arrow_blue.png) no-repeat top left; }
ul li a { font-size: 18px; color: #FFFFFF; text-decoration: none; margin-bottom: 5px; letter-spacing: -0.03em; }
ul li a:hover,
ul li a.active { border-bottom: 1px solid red; }
So now - in IE 8 i have the problem, that on mouseover the links jumps up and down on mouseout, because of the border-bottom i think. All other browsers do it right with border bottom and no jump.
I have googled a lot and not found a solution.
Hope anyone here can help!
Thank you so much.
Sascha
Okay,
for anyone who's interested - i have the solution:
ul li a { font-size: 18px; color: #FFFFFF; text-decoration: none; margin-bottom: 5px; letter-spacing: -0.03em; padding-bottom: 1px; }
i just had to add a "padding-bottom: 1px;" to the "ul li a" statement.
Have a nice christmas.