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.
Related
I have a problem with the navigation bar. When I hover over About or Text on the nav bar it shows a spacing on the left side of the button, I want it the hover colour to contain the full width of the button.
https://jsfiddle.net/jdd3h0sf/3/
HTML:
<div id="nav">
<ul>
<li class="home">Home</li>
<li>About</li>
<li>Text ⌄
<ul class="submenu">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
<li>Work</li>
<li>Contact ⌄
<ul class="submenutwo">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
</ul>
CSS:
#nav {
background-color: #333;
height: 52px;
text-align: center;
margin: 0 auto;
letter-spacing: 1px;
text-transform: uppercase;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li {
border-right: 1.8px solid #191919;
height: auto;
width: 156.5px;
padding: 0;
margin: 0;
}
.home {
border-left: 1.8px solid #191919;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #444;
}
#nav ul li a, visted {
color: #ccc;
display: block;
padding: 15px;
margin: 0;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #444;
border: 1px solid #333;
border-top: 0;
max-width: 169px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:visited {
color: #ccc;
}
#nav ul ul li a:hover {
color: #2980B9;
}
This is a part of display:inline-block;. If you want to keep them displayed inline-block, there are several different solutions (Read a css-Tricks article about it):
1 - Change your HTML format:
Change your <li>'s html like this:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
Or this:
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
Or even with comments, like this:
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
Or, just place all the li's on a single line:
<ul><li>one</li><li>two</li><li>three</li></li>
It is messy, yet effective.
2 - Negative margins:
Pretty straightforward:
li{
display: inline-block;
margin-right: -4px;
}
3 - Skip the closing tag:
This is actually perfectly fine in HTML5, li's do not have to have a closing tag.
<ul>
<li>one
<li>two
<li>three
</ul>
4 - Set the <ul>'s font size to 0:
ul {
font-size: 0;
}
ul li {
font-size: 16px;
}
5 - Or, just float the <li>'s:
Whatever floats your boat.
You are experiencing the dreaded inline-block spacing issue. In your fiddle, if you condense all of your li elements to be on the same line, the hover works as expected. The linked article outlines a few other options.
You can also just float the elements and that would resolve the issue.
#nav ul li {
float: left;
}
i have simple css & html menu. it's fine, but i try to move some links to right, but when i try, all of these goes. i tried with inside - and still nothing. Can someone help me?
#forum-nav,
#forum-nav ul {
list-style: none;
padding-left: 20px;
padding-right: 20px;
width: 960px;
}
#forum-nav {
float: left;
}
#forum-nav > li {
float: left;
}
#forum-nav li a {
display: block;
height: 28px;
line-height: 2em;
padding: 0 1.0em;
text-decoration: none;
}
#forum-nav ul {
position: absolute;
display: none;
z-index: 999;
}
#forum-nav ul li a {
width: 80px;
}
#forum-nav li:hover ul.dropdown {
display: block;
}
/* Main menu
------------------------------------------*/
#forum-nav {
background:#597288;
}
#forum-nav > li > a {
color: #fff;
font-weight: bold;
}
#forum-nav > li:hover > a {
background: #889bac;
color: #fff;
}
.active {
background: #889bac;
color: #fff;
}
/* Submenu
------------------------------------------*/
#forum-nav ul{
margin-left: -20px;
}
#forum-nav ul a {
border-top: 1.5px solid #fff;
width: 100%;
padding-left: 20px;
padding-right: 20px;
background: #597288;
}
#forum-nav ul li a {
color: #FFF;
}
#forum-nav ul li:hover a {
background: #889bac;
}
#forum-nav ul li:last-child a {
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
and html:
<ul id="forum-nav">
<id="m_index">LINK ON LEFT</li>
<id="m_index">LINK ON LEFT</li>
AND I WANT IN ON RIGHT
<id="m_index">LINK ON RIGHT</li>
<id="m_index">LINK ON RIGHT</li>
</ul>
how can i move it, and still it will be works fine?
Firstly, you haven't actually defined any li elements within your ul so your markup is invalid, secondly you need to add a rule in your CSS to float the last two list items to the right.
Change your HTML to:
<ul id="forum-nav">
<li>LINK ON LEFT</li>
<li>LINK ON LEFT</li>
<li>LINK ON RIGHT</li>
<li>LINK ON RIGHT</li>
</ul>
And add to your CSS:
#forum-nav li:nth-child(3),#forum-nav li:nth-child(4){
float:right;
}
nb. if you want to float all children other than the first two to the right you can use:
#forum-nav li:nth-child(n+3){
float:right;
}
nb. per Chriz's answer- id attributes must be unique.
html
<ul id="forum-nav">
<li>LINK ON LEFT</li>
<li>LINK ON LEFT</li>
AND I WANT IN ON RIGHT
<li class='right'>LINK ON RIGHT</li>
<li class='right'>LINK ON RIGHT</li>
</ul>
css
.right { float:right; }
Note : give li open tag, and giving same id more element is not good practice, this CSS classright will do your job
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.
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.
Im trying to make a vertical menu that produces a horizontal menubar on hover. So far I have kind of gotten it to work but there is a gap between the first li and the sub li.
For example, i want it to look like this:
x
xxxx
x
Instead, it looks like this:
x
x xxx
x
Here is my html:
<ul id="mainmenu">
<li>Top 1
<ul class="submenu">
<li>sub 11
<li>sub 12</li>
</ul>
</li>
<li>Top 2
<ul class="submenu">
<li>sub 21
<li>sub 22</li>
</ul>
</li>
</ul>
Here is my css:
#mainmenu {
margin: 0;
padding: 0;
list-style-type: none;
}
#mainmenu li {
clear: left;
}
#mainmenu a {
display: block;
overflow: hidden;
float: left;
background-color: white;
border: 1px solid black;
color: black;
font-weight: bold;
text-decoration: none;
width: 10em;
text-align: center;
margin:0;
}
.submenu {
list-style-type: none;
float: left;
display: none;
}
#mainmenu li a:hover {
display: block;
color: white;
background-color: black;
}
#mainmenu li a:hover+.submenu, .submenu:hover{
display: block;
display: inline;
}
.submenu li {
float: left;
clear: none !important;
}
.submenu li a:hover {
color: white;
background-color: black;
}
You need to add this:
.submenu {
margin: 0;
padding: 0
}
You have already done this for ul#mainmenu, but you've forgotten to do it for the ul.submenus.
Also, check your HTML. You're missing a couple of </li>. With a HTML5 doctype, you are allowed to omit them, but it's confusing (for humans) if you do so.
it's a little bit hard to see it in this form, but I have impression that you did not clear padding and margin for "li" element. you did it only for "a" and "ul" (mainmenu)