If you try that in FireFox:
http://jsfiddle.net/rJUKT/2/
it works fine. The dropdown menu shows at the bottom of its parent like that:
But if you try it with IE7, the dropdown menu shows at the right, like that:
Any idea why it does that?
HTML
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<ul id="menu">
<li>
<span>Menu 1</span>
<ul>
<li>Link 1.1</li>
<li>Link 1.2</li>
<li>Link 1.3</li>
<li>Link 1.4</li>
</ul>
</li>
<li>
<span>Menu 2</span>
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
<li>Link 2.4</li>
</ul>
</li>
</ul>
CSS
#menu { width: 100%; float: right; list-style: none; margin-top: 5px; color: #2A4153; }
#menu li {
float: left;
font-size: 17px;
font-weight: bold;
background-color: #e1f1ff;
border: 1px solid #93b5d4;
margin: 0 1px 0 1px;
padding: 4px 0 0 0;
border-bottom: none;
height: 20px;
}
#menu li a, #menu li span { padding: 4px 7px 2px 7px; cursor: pointer; }
#menu li ul {
clear: both;
position:absolute;
display:none;
padding:0;
list-style:none;
width: 150px;
margin: -1px 0 0 -2px;
}
#menu li ul li {
float: left;
width: 150px;
border: 1px solid #93b5d4;
border-top: none;
font-size: 15px;
font-weight: normal;
background-image: url('16x16/eye.png');
background-position: 4px 4px;
background-repeat: no-repeat;
-moz-border-radius: 0;
}
#menu li ul li a, #menu li ul li span { display:block; padding-left: 25px; }
#menu li ul li:hover { background-color: #e5f6e8; border: 1px solid #93d4a2; border-top: none; }
#menu li:hover { background-color: #e5f6e8; border: 1px solid #93d4a2; border-bottom: none; }
JS
$(function() {
$('#menu li').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);
},
function () {
//hide its submenu
$('ul', this).slideUp(100);
}
);
});
Thanks!
You need to set "top" and "left" properties for dropdown UL
You can check it out this. Some css properties updated in this
http://jsfiddle.net/vkVHC/
If that's the only reason you're using jQuery (for the dropdown effect on hover), you may as well do it using CSS instead (and thus save many kBs being loaded by the site). Also, Alexei's answer is correct.
Related
Having trouble with some css on my dropdown navigation bar. On the dropdown i would like it to be the same width as the standard navigation links and directly below it rather than slightly to the right as you can see when hovering over 'Page2'. Also why is half of the dropdown navigation link white unless you hover over it.
Here is my Fiddle.
CSS / HTML / Demo
nav {
width: 960px;
background-color: #3673a7;
height: 50px;
line-height: 50px;
margin: auto;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 1px 0px rgba(48, 50, 50, 0.81);
-moz-box-shadow: 2px 2px 1px 0px rgba(48, 50, 50, 0.81);
box-shadow: 2px 2px 1px 0px rgba(48, 50, 50, 0.81);
}
nav ul {
text-align: center;
margin: auto;
}
nav ul li {
width: 65px;
display: inline-block;
padding: 0 30px 0 30px;
border-right: 1px solid #355e7f;
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:last-child {
border-right: none;
}
nav ul li:hover {
background-color: #3b8acc;
}
nav a:link,
a:visited {
color: #ffffff;
text-decoration: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.9em;
}
<nav>
<ul>
<li>Page 1
</li>
<li>Page 2
<ul class="drop">
<li>Drop1
</li>
<li>Drop2
</li>
<li>Drop3
</li>
</ul>
</li>
<li>Page 3
</li>
<li>Page 4
</li>
<li>Page 5
</li>
<li>Page 6
</li>
<li>Page 7
</li>
</ul>
</nav>
The padding that you have defined on the parent LIs was throwing off the alignment of the children, just add these two rules to your CSS(to cancel out the padding that is being applied to the parents):
nav ul li ul { padding:0; }
nav ul li ul li { padding:0; border:none; }
Updated Fiddle
Sorry if this is a silly question but I'm looking to add a dropdown list of items to this navbar. It's in a navbar.php file and here is the code:
<link rel="stylesheet" href="/styles/navbar.css" type="text/css" /> <!-- navbar styles -->
<ul id="nav">
<li>Home</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Here's the navbar.css file:
#nav
{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #242424;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position:fixed;
top:0px;
}
#nav li
{
float: left;
}
#nav li a
{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #7ACC01;
border-right: 1px solid #ccc;
}
#nav li a:hover
{
color: #c00;
background-color: #fff;
}
So my question is, is there a simple way of adding a dropdown list of items to "Item 4" for example, where the dropdown menu will appear on mouseover?
I would like you to learn how we do that, instead of giving you the fish. With a rod, you can always fish by yourself.
Look at what I have done in this fiddle:
http://jsfiddle.net/jLkeH/
It actually comes to this:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
You have to hide ul you want to toggle and set it back to visible if someone hovers on it.
PS: as you can see, I used HTML5, which is recommended, because it is (more) semantic.
I'm trying to write a simple HTML+CSS menu without any absolute positioning or JS. My problem is regarding submenus, where it either expand the current selected item or displace it:
The HTML is straightforward:
<ul id="menu">
<li>Item 1</li>
<li>Folder 1
<ul>
<li>Item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
And so is the CSS:
#menu, #menu ul {
border-style: solid;
border-width: 0px;
border-top-width: 1px;
float: left;
list-style: none;
margin: 0px;
padding: 0px;
width: 180px;
}
#menu li ul {
background-color: cyan;
display: none;
position: relative;
right: -168px;
width: auto;
}
#menu li:hover ul {
display: block;
}
#menu li {
border-style: solid;
border-width: 1px;
border-top-width: 0px;
padding: 10px;
}
#menu li:hover {
background-color: lightgrey;
font-weight: bold;
}
I thought the submenu could only affect the layout after being repositioned, which seems
to not be the case here. I'm a bit at a loss.
Using this type of menu pattern, you should use position:relative on the parent LI of the sub-menu, and position:absolute on the UL child menu. The allows the child element to appear outside of the layout flow, relative to its parent.
It's also good practice to put all non-position styling on the A-tag inside each LI and use display:block. It would be difficult for you to style the text on "Folder 1" without it.
Simple example: http://jsfiddle.net/Diodeus/jejNy/127/
Use position:absolute on the ul and position:relative on the LI:
HTML:
<ul id="menu">
<li>Item 1</li>
<li>Folder 1
<ul>
<li>Item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
CSS:
#menu, #menu ul {
border-style: solid;
border-width: 0px;
border-top-width: 1px;
float: left;
list-style: none;
margin: 0px;
padding: 0px;
width: 180px;
}
#menu li ul {
background-color: cyan;
display: none;
position: absolute;
top:-1px;
left: 178px;
}
#menu li:hover ul {
display: block;
}
#menu li {
position:relative;
border-style: solid;
border-width: 1px;
border-top-width: 0px;
padding: 10px;
}
#menu li:hover {
background-color: lightgrey;
font-weight: bold;
}
Check out this CodePen
I am trying to create a drop down menu, however whenever I hover over a parent menu the child menu won't line up with it. I have gone through many examples and I always get the same result.
My CSS code is
#mainNav {
margin-top: 20px;
width: 800px;
margin-left: auto;
margin-right: auto;
padding: 0;
overflow: hidden;
background-color: #BBFFFF;
zoom: 1;
}
#mainNav li {
float: left;
list-style: none;
}
#mainNav li a {
color: #000000;
display: block;
width: 80px;
font-size: 14px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
padding: 7px 0px 7px 0px;
border-right: 1px solid #999;
zoom: 1;
}
#mainNav li ul {
display: none;
}
#mainNav a:hover {
background-color: #66FF66;
}
#mainNav li:hover ul {
display: block;
position: absolute;
}
#mainNav li:hover li {
float: left;
width: 80px;
background-color: #BBFFFF;
margin: 0;
padding: 0;
}
My HTML is
<div>
<ul id="mainNav">
<li>Page One</li>
<li>Page Two</li>
<li>Page Three
<ul>
<li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li>
</ul>
</li>
</ul>
</div>
You could use a negative margin-left to pull it back in line. Add it to:
#mainNav li:hover ul {}
Or you can set padding: 0; on the same element.
Also, you are missing a closing '"' in:
<li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li>
Copy paste and try this. Something from this example will help you.
<html>
<head>
<style type="text/css">
#mainNav{
/* Your mainNav decoration here */
}
#mainNav li{
list-style:none;
display:inline-block;
background-color:#0FF;
padding:10px;
border:1px solid #000;
}
#mainNav ul{
position:absolute;
display:none;
padding:0px;
top:50px;
}
#mainNav li:hover ul{
display:inline-block;
}
</style>
</head>
<body>
<ul id="mainNav">
<li>Page One
<br />
<ul>
<li>Sub Page One</li>
</ul>
</li>
<li>Page Two</li>
<li>Page Three
<br />
<ul>
<li>Sub Page One</li>
</ul>
</li>
</ul>
</body>
</html>
There is a lot of css in there that is not specific enough and some stuff that is just in the wrong place.
I have written out a jsfiddle for you here: A DISTILED VERSION OF YOUR CODE
You have list style on li instead of ul where it belongs. You are also not specific enough about the sub lists and so one. Using > like,
.main-nav > li > a { } will say target the first layer of li only, and in that, the only a in that li etc.
I would give the ul's classes etc. See the fiddle for what I think is the most simple approach. For the other people, please let me know if my fiddle could be more concise.
I have written a CSS menu for a site I am helping develop, and it displays correctly in both IE 7 and Firefox 3 (on Windows XP).
The intended effect is that the drop down menus should be as wide as the widest element in them (but not wider). In Safari, however, they appear to be roughly twice as wide as they should be. I have no clue as to how to fix this. Any help?
The HTML is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div id="mainContainer">
<div id="mainNavContainer">
<img id="leftNavImg" src="imgsrc.jpg" alt="ignore me for now" height="34" width="91">
<div id="topNav">
<ul>
<li>Menu Item 1<ul>
<li>Submenu Item 1.1</li>
<li>Submenu Item 1.2</li>
<li>Submenu Item 1.3</li>
</ul></li>
<li>Menu Item 2<ul>
<li>Submenu Item 2.1</li>
<li>Submenu Item 2.2</li>
<li>Submenu Item 2.3</li>
</ul></li>
<li>Menu Item 3<ul>
<li>Submenu Items may have different lengths</li>
<li>short</li>
<li>or potentially moderately long</li>
<li>The submenu should be as wide as its longest item</li>
</ul></li>
<li>etc...<ul>
<li>Submenu Item 4.1</li>
<li>Submenu Item 4.2</li>
<li>Submenu Item 4.3</li>
</ul></li>
</ul>
</div>
</div>
</div>
</body>
and the CSS is
* {
margin: 0;
padding: 0;
}
ul, ol, dl, li, dt, dd {
list-style: none;
}
body {
background-color: #fff;
margin: 20px;
text-align: center;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
#mainContainer {
width: 975px;
background-color: #fff;
text-align: left;
margin: 0 auto;
position: relative;
padding-top: 52px;
}
#mainNavContainer {
height: 34px;
font-size: 11px;
width: 973px;
border: 1px solid #dedede;
background-color: #888;
position: absolute;
top: 0;
color: #000;
}
#mainNavContainer #leftNavImg {
padding: 0 20px 0 7px;
float:left;
border-right:1px solid #dedede;
}
#topNav {
float: left;
}
#topNav ul {
display: inline;
text-align: center;
}
#topNav li {
display: block;
float: left;
position: relative;
border-right: 1px solid #DEDEDE;
width: 102px;
}
#topNav li ul {
display:none;
border-bottom: 4px solid #422952;
position:absolute;
top: 35px;
left:0px;
width: auto;
white-space: nowrap;
text-align: left;
z-index:100;
}
#topNav li li {
display:block;
border-right: none;
border-bottom: 2px solid #622952;
background-color:#FBFBFB;
width: 100%;
font-size: 12px;
}
#topNav li a, #topNav form {
text-decoration: none;
display:block;
color: #000;
padding: 11px 6px;
}
#topNav li li a {
padding: 9px 6px;
color: #666;
width: 100%;
}
#topNav a:hover {
color: #fff;
background-color: #824972;
}
#topNav li:hover ul {
display:block;
z-index:100;
}
#topNav li li a:hover {
background-image:none;
background-color:#fff;
color: #000;
}
Move the
white-space: nowrap;
from
#topNav li ul { ...
to
#topNav li li a { ...
cheers!