Screenshot1:
Screenshot 2:
If you look at the screenshot1, you can see when you hover over web design it doesn't completely change the background color. However it does in case you hover over text 'Search Engine' in Screenshot 2.
Here is the markup:
Html:
<div id="nav">
<ul>
<li><a href="#" >My Health</a></li>
<li><a href="#" >Fitness</a></li>
<li><a href="#" >Diet & Nutrition</a>
<ul>
<li>Webdesign</li>
<li>Development</li>
<li>Illustration</li>
<li>Search engine</li>
<li>WordPress</li>
</ul>
</li>
<li>Stress Management</li>
</ul>
</div>
CSS:
#nav {
width: 100%;
height: 36px;
background: url('../images/nav-bg.png') repeat;
margin-bottom: 10px;
}
#nav ul li a{
display: block;
float: left;
font: bold 15px Arial, Helvetica, sans-serif;
color: #FFFFFF;
padding: 9px 14px;
}
#nav ul li a:hover{
color: #355da5;
background: #fff;
border: medium black;
}
#nav ul li ul{
display: none;
position: absolute;
top: 130px;
margin: 8px 0px 0px 180px;
background: url('../images/nav-bg.png') repeat;
}
#nav ul li ul li a{
text-align: center;
font-size: 12px;
}
#nav ul li:hover ul, li.over ul{
display: block;
}
Does anyone know how can i fix this?
Thank you.
Try setting width: 100% on #nav ul li a.
your nested <a> tags are matched by the css selector #nav ul li a, and are therefore floated left.
try adding float:none; inside #nav ul li ul li a
Related
I'm having great difficultly designing a drop down menu with pure css, that has fluid width. The examples I've found all have a fixed width top menu. As soon as I make the top menu fluid width, the drop down doesn't work. Can anyone help me complete the code? I basically have 7 menu items including a blank middle one. Over the middle one I have an absolute positioned logo.
HTML
<div style="position:relative;">
<img style="position:absolute; width:14.28%; max-height:80px; margin-left: auto;margin-right: auto;left: 0;right: 0;" src="\adrenicon.jpg"/>
<nav>
<ul>
<li>Start Here</li>
<li>Destinations
<ul>
<li>Africa</li>
<li>Europe</li>
<li>America</li>
</ul>
</li>
<li>Features</li>
<li> </li>
<li>Activities</li>
<li>Planner</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS:
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
width:14.28%;
text-align: center;
line-height: 50px;
display: inline-block;
position: relative;
}
nav li a {
font-weight: bold;
color: hotpink;
text-align: center;
padding: 0px;
text-decoration: none;
-webkit-transition: color 1s;
transition: color 1s;
}
nav li a:hover {
color: #111;
}
nav ul li ul {
position: absolute;
display: none;
background-color: #f9f9f9;
min-width: 160px;
}
Thanks for any help.
first you need to set overflow:visible to the main ul ( nav ul )
then, because you set a width of 14.28% on the nav ul li you need to set a width of 100% to the second level of li ( nav ul li ul li ) so they don't get on top of eachoter and each stays on a separate row
and because the li has float:left; you need to set float:left;width:100% on the nav ul also.
then on hover on li change display:none to display:block on the second ul
see below snippet. let me know if it works
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
background-color: #333;
float:left;
width:100%;
}
nav li {
float:left;
width:14.28%;
text-align: center;
line-height: 50px;
position: relative;
}
nav li a {
font-weight: bold;
color: hotpink;
text-align: center;
padding: 0px;
text-decoration: none;
-webkit-transition: color 1s;
transition: color 1s;
}
nav li a:hover {
color: #111;
}
nav ul li ul {
position: absolute;
display: none;
background-color: #f9f9f9;
min-width: 160px;
}
nav ul li ul li {
width:100%;}
nav ul li:hover > ul{
display:block;
}
nav ul ul ul {
right:-100%;
top:0
}
<div style="position:relative;">
<img style="position:absolute; width:14.28%; max-height:80px; margin-left: auto;margin-right: auto;left: 0;right: 0;" src="http://placehold.it/100x100.jpg"/>
<nav>
<ul>
<li>Start Here</li>
<li>Destinations
<ul>
<li>Africa
<ul>
<li>Kenya</li>
<li>Tanzania</li>
</ul>
</li>
<li>Europe
<ul>
<li>Spain</li>
<li>France</li>
</ul>
</li>
<li>America</li>
</ul>
</li>
<li>Features</li>
<li> </li>
<li>Activities</li>
<li>Planner</li>
<li>Contact</li>
</ul>
</nav>
</div>
Edited also for 3rd level of ul .
code : ul ul ul { right:-100%;top:0;}
I'm trying to center my nav bar.
HTML is
<nav>
<ul>
<li>HJEM</li>
<li>FORUM</li>
<li>DONER</li>
<li style="margin-right: 0px;">SERVERE
<li style="margin-right: 0px;">FAQ</li>
<li style="margin-right: 0px;">KONTAKT</li>
</ul>
</nav>
CSS is
nav {margin: 3px 0; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none;}
nav ul li a {
background: #FFFFFF;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 18px;
text-align: center;
color: #717171;
text-decoration: none;
float: left;
padding: 8px 0;
width: 106px;
margin: 0px 10px 0 0;
}
nav ul li a:hover {background: #f1f1f1;}
Right now it floats from left to right. I want to center it.
Bonus question; if someone know this, if you can point me in the direction on how to create a touch compatible sub menu for "doner".
Thanks for your time.
hjortefjellet.com
If you want the elements to be in a line, I would use li { display:inline-block; }
then yo can define for your nav element: margin: 3px auto;.
Did I understand you right that you want a dropdown menu for the items in the nav? That's not too difficult: Add the dropdown menu as a div element into the li element:
<li>
HJEM
<div class="dropdown">Hello!<br />I'm a dropdown menu!</div>
</li>
Then add to the stylesheet:
.dropdown {
display:none;
position:absolute;
top:56px;
background-color:#f1f1f1;
width:200px;
padding:10px;
}
li:hover .dropdown, .dropdown:hover { display:block; }
Just do this
nav {
margin: 3px auto;
}
first of all, close your 4th "li" tag. Also, add "margin:0 auto;" to "nav ul" and remove inline styles.
code should look like this:
HTML
<nav>
<ul>
<li>HJEM</li>
<li>FORUM</li>
<li>DONER</li>
<li>SERVERE</li>
<li>FAQ</li>
<li>KONTAKT</li>
</ul>
</nav>
And CSS
nav {margin: 3px auto; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none; margin:0 auto; display:block;}
nav ul li a {
background: none repeat scroll 0% 0% #FFF;
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
font-weight: 300;
font-size: 18px;
text-align: center;
color: #717171;
text-decoration: none;
float: left;
padding: 8px 0px;
width: 106px;
}
nav ul li a:hover {background: #f1f1f1;}
http://jsfiddle.net/Sb42u/1/
1. To center your nav bar:
You just need to change margin: 3px 0; to margin: 3px auto in nav.
2. To create a DropDown menu:
First I would advise to change your markup this way:
<nav>
<ul>
<li>HJEM</li>
<li>FORUM</li>
<li>
DONER
<ul class="submenu">
<li>SERVERE
<li>FAQ</li>
<li>KONTAKT</li>
</ul>
</li>
</ul>
</nav>
Then you can simulate a dropdown using this css classes:
nav ul li{
position:relative;
float:left;
}
nav ul li ul.submenu {
position: absolute;
width: auto;
display:none;
top: 35px;
}
nav ul > li:hover > ul {
left: 0;
display: block;
}
Fiddle here: http://jsfiddle.net/9Yg47/4/
I'm beginning to make a website and I managed to make a navigation bar, with the first set of menus. The second set took awhile, but I managed to make. But now I would like to make a third set of submenu, but I have no idea how. Sort of like this image: http://vista-buttons.com/vista-skin/images/help/1_3.gif. Where a visitor has the choice to hover their mouse over products > submenu item 1 > submenu item 1_2
Here's what I have:
HTML:
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Menu1</li><li>
Menu1
<ul>
<li>Menu2
</li></ul><li>
Menu1</li><li>
Menu1</li>
</ul>
</div>
<div style="z-index:0;left:0;top:0;width:100%;height:100%">
<img src="unknown.jpg" style='width:100%;height:100%'/>
</div>
CSS:
body{
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 18px;
}
#nav{
background-color: #222;
}
#nav-wrapper{
width: 960px;
margin: 0 auto;
tex-align: left;
}
#nav ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li{
display: inline-block;
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li a,visited{
color: #ccc;
display: block;
padding: 15px;
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: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
min-width: 200px;
}
#nav ul ul li{
display: block;
}
#nav ul ul li a,visited{
color: #ccc
}
#nav ul ul li a:hover{
color: #099;
}
div#nav{
text-align: center;
}
Sorry if the question is too simple, thank you.
Try with this Fiddle Example..
<ul class="top-level-menu">
<li>About</li>
<li>Services</li>
<li>
Offices
<ul class="second-level-menu">
<li>Chicago</li>
<li>Los Angeles</li>
<li>
New York
<ul class="third-level-menu">
<li>Information</li>
<li>Book a Meeting</li>
<li>Testimonials</li>
<li>Jobs</li>
</ul>
</li>
<li>Seattle</li>
</ul>
</li>
<li>Contact</li>
DEMO FIDDLE
I would like to have a dropdown sub- menu in the same style, I know it's simple but I'm still new to making websites and I can't figure it out by myself.
here's the top part of my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Startpagina</title>
<LINK href="../CSS/stylesheet.css" rel=stylesheet>
</head>
<body>
<div class="schikking">
<img src="../Images/bibram.png" alt="Logo van de bib" height="90" width="170">
<!-- navigatie -->
<nav>
<ul>
<li><span class ="s2">Startpagina</span></li>
<li>Aanwinsten</li>
<li>Catalogus
<ul class="sub">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
</ul>
</li>
<li>Uitlening</li>
<li>Reservatie</li>
<li>Suggestie</li>
<li>Contact</li>
</ul>
</nav>
and a big part of my CSS file:
.schikking {
margin: 0 auto;
padding: 30px 0px 0px 0px;
max-width: 1010px;
}
.content {
background-color: red;
background-color: rgba(147, 4, 0, 0.84);
border: 1px solid black;
}
nav li
{
display: inline;
padding-right: 8px;
}
nav {
text-align: center;
margin: -20px 0px 0px 0px;
}
nav ul{
background-color: rgba(126, 4, 0, 0.79);
border: 1px solid black;
}
nav ul li{
display: inline;
}
nav ul li a{
padding-left: 1em;
padding-right: 1em;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: lightgray;
}
nav ul li a:hover{
color: #999999;
}
nav ul ul{display: none; position: relative;}
nav li ul li{float:none;display: inline-block; }
nav ul li:hover ul {display: inline-block;}
heres a picture of how it looks atm:
normal: http://gyazo.com/8f6553245b736feee8cc5ebf8d4a030c
while hovering over "catalogus": http://gyazo.com/662eee4bbbb2ea2318925be76b3722d2
You have nearly got it. I have only made some minor changes to the CSS to make it work.
nav ul li { display: inline-block; height: 100%; } instead of just display: inline is required so that the each <li> takes up all the height of the "menu" otherwise there is a small gap between the bottom of the <li> and the sub-menu which would cancel the :hover event since you are out of the <li>. inline elements do not have height (or width), so changed to display: inline-block.
The CSS at the end is where the other changes are. Your code is:
nav ul ul{display: none; position: relative;}
nav li ul li{float:none;display: inline-block; }
nav ul li:hover ul {display: inline-block;}
The display code doesn't need to be anything more than
nav ul li:hover ul {
display: block;
}
But to position the sub-menu outside of it's normal flow (which is currently appearing next to the parent menu item), you need to add an absolute position to the sub-menu `.
nav ul ul {
display: none;
position: absolute;
}
If you want a horizontal menu, that should be all the changes needed, since your rule nav ul li { display: inline-block; }will already apply to the sub-menu list-items. If you want a vertical menu, you need to reset the display back to the default list-item or block with:
nav ul ul li {
display: block;
}
See demo
Don't do it yourself. I use this jquery plug-in and its great:
Superfish
If you are having problems with anything I'd reccomend you to google them first. Here's a generator (just choose the one you want and follow the instructions):
Css drop down menu maker
I would also reccomend you to actually learning the language and expanding your knowledge, as well as googling questions before posting them here.
HTML :
<nav>
<ul>
<li><span class ="s2">Startpagina</span></li>
<li>Aanwinsten</li>
<li>Catalogus
<ul class="sub">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
</ul>
</li>
<li>Uitlening</li>
<li>Reservatie</li>
<li>Suggestie</li>
<li>Contact</li>
</ul>
CSS :
nav {
margin: -20px 0px 0px 0px;
text-align: center;}
nav ul ul {
display: none;
padding-right: 8px;}
nav ul li:hover > ul {
display: block;}
nav ul {
background-color: red;
border: 1px solid black;
list-style: none;
position: relative;
display: inline-table;}
nav ul:after {
content: ""; clear: both; display: block;}
nav ul li {
float: left;}
nav ul li:hover a {
color: #999999;}
nav ul li a {
display: block;
padding-left: 1em;
padding-right: 1em;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: lightgray;}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;}
nav ul ul li {
float: none; position: relative;padding: 10px;}
nav ul ul li a {
color: #fff;}
nav ul ul ul {
position: absolute; left: 100%; top:0;}
New to CSS. I have a nav menu bar and I am trying to fill the background color (blue) in the drop down menu under "portfolio" when you hover over it. Any ideas? I think its because of that absolute?
CSS:
#nav, #nav ul {
float: left;
list-style: none;
box-shadow: 0px 1px 7px #000000;
background-color: #F5F1DE;
border-radius: 5px 5px 0px 0px;
z-index: 100;
}
#nav li a {
display: block;
padding: 16px;
text-decoration: none;
font-weight: bold;
color: black;
border-left: 1px solid #ccc;
font-size: 1em;
}
#nav li a:hover {
color: black;
background-color: #bbecff;
}
#nav li {
float: left;
}
#nav li ul {
position: absolute;
width: 11em;
left: -999em;
border-radius: 1px;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
HTML:
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Packages</li>
<li>Portfolio
<ul>
<li>Weddings</li>
<li>Special Events</li>
<li>Holidays</li>
<li>Fresh Flowers</li>
<li>Balloon Sculptures</li>
</ul>
</li>
<li>Contact</li>
</ul>
Add float:left only for first child of ul.Update your following line of css:
#nav li {float: left;}
to
#nav > li {float: left;}
Here is the fiddle
Try this, hope it will work for u
add the CSS
#nav li ul{
background:#0066CC;
}
give background color to the following
#nav li:hover ul, #nav li.sfhover ul
#nav li:hover ul, #nav li.sfhover ul {
background-color: #bbecff;
}
But with that said: Why don't you apply the background-color to the submenu ul directly?
U may also try this, I hav given an id to respective li
<li id=blueColor>
<li>Weddings</li>
<li>Special Events</li>
<li>Holidays</li>
<li>Fresh Flowers</li>
<li>Balloon Sculptures</li>
</ul>
In CSS
#blueColor:hover{
backgroung-color:blue
}