I am making a website and my navigation bar's drop down is not lining up with the parent navigation bar when I try and position it into the middle of the page. When I use relative positioning, it does not line up. This is my code:
nav ul ul {
display: none;
margin: 0;
padding: 10px;
list-style-type: none;
text-align: center;
background-color: #A7C5A5;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
text-decoration: none;
padding: 0em;
color: #030;
background-color: #A7C5A5;
font-family: Georgia, "Times New Roman", Times, serif;
list-style: none;
position: relative;
display: inline-table;
top: 60px;
left: 300px;
float: inherit;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
display: inline;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #000;
background-color: #CCC;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background-color: #A7C5A5;
border-radius: 0px;
padding: 0;
position: relative;
top: 60px;
left: 300px;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
color: #000;
background-color: #CCC;
}
<body>
<div id="bg-right"></div>
<div id="bg-left"></div>
<div class="img">
<img src="greenlogo.jpg" width="504" height="160">
</div>
<nav>
<ul>
<li> Home</li>
<li>Animals
<ul>
<li>Disney</li>
<li>Farm</li>
<li>Nickolodean
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</body>
I tried to make a fiddle for private and I saw in Chrome-Devconsole that some styles are double used or used where you won't that they are used. I would recommend to use classes for the different ul's
Devlen
Related
This is my nav bar with a drop down menu below some. Book goes below Departments, I have a lot more but this is an example. When I hover over more options, it loses focus on the nav bar and shows the on hover discription for an image. how do i stop this?
<div class="NavBar">
<div align="center">
<ul>
<li>Home</li>
<li>Departments
<ul class="MiniNavBar">
<li>Books</li>
<li>Books</li>
<li>Books</li>
<li>Books</li>
</ul></li>
<li>Top Brands</li>
<li>Gallery</li>
<li>About Us</li>
</ul>
</div>
</div>
My CSS
.NavBar{
background-color: #C10000;
height: auto;
width: 430px;
border: thin solid #000000;
border-radius: 5px;
margin-top: 8px;
}
.MiniNavBar{
width: 97px;
}
.NavBar ul ul {
display: none;
}
.NavBar ul li:hover > ul {
display: block;
font-family: Calibri;
font-size: 10px;
}
.NavBar ul {
padding: 2px;
list-style: none;
position: relative;
display: inline-block;
font-family: Calibri;
font-size: 15px;
}
.NavBar ul li {
float: left;
}
.NavBar ul li:hover {
background-color: #C10000;
color: #FFDD00;
}
.NavBar ul li:hover a {
background-color: #000000;
color: #FFDD00;
}
.NavBar ul li a {
display: block;
padding: 10px 10px;
background-color: #C10000;
color: #FFDD00;
text-decoration: none;
}
.NavBar ul ul {
position: absolute;
}
.NavBar ul ul li {
float: none;
margin-top: 0px;
position: relative;
}
.NavBar ul ul li a {
padding: 15px 40px;
background-color: #C10000;
color: #FFFFFF;
}
.NavBar ul ul li a:hover {
background-color: #C10000;
color: #FFFFFF;
}
.NavBar ul ul ul {
position: absolute;
left: 100%;
top:0;
}
I want to add a dropdown menu to my navigation bar but i am not being able to do it properly ? Can anyone help me to properly format it so that that would drop down properly whenever hovered ?
HTML:
<nav>
<ul>
<li>Home</li>
<li>About
<ul>
<li>Me</li>
<li>Website</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
CSS:
nav {
background-color: #311310;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
position: absolute;
left: 0px;
width: 100%:
}
nav ul li ul li {
background: #311310;
display: block;
}
nav ul{
margin: 0px;
padding: 10px 0px 10px 100px;
}
nav ul li {
color: #d9d9d9;
display: inline;
padding: 0px 10px;
font-family: klavika;
font-size: 14pt;
}
nav ul li a {
color: #d9d9d9;
text-decoration: none;
}
nav ul li a:hover{
color: #ffffff;
}
And here is the broken navigation bar Snap :
How can i display the nested one right below about ?
Give position: relative; to the parent:
nav ul li {
color: #d9d9d9;
display: inline;
padding: 0px 10px;
font-family: klavika;
font-size: 14pt;
position: relative;
}
And position: absolute; to the menu:
nav ul li ul {
background: #311310;
display: block;
position: absolute;
left: 0;
}
Try this code
add position: relative for nav ul li
i've a menu and i would want to use border on left but here is the desired look how i wanted, i am able to add border but it will take full height of the li element and also i do not want that border to appear on sub menus
example : aunipark.in
here is my code :
html
<div class="menudiv">
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>School</li>
<li>Vision and Mission </li>
<li>Principal’s desk
<li>Management
</ul> </li>
<li>Admission
<ul>
<li>Overview</li>
<li>Download application form</li>
</ul> </li>
<li>Gallery</li>
<li>School Calander</li>
<li>News & Events</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div>
css
.menudiv
{
width:980px;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size:14px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #111312;
margin: 0;
list-style: none;
position: relative;
padding: 0;
border:3px solid #111312;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
border-bottom: 3px solid transparent;
}
.menu ul li:hover {
background: #111312;
border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 15px;
border-right: 3px solid #fff;
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #111312;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.head
{
width:500px;
height:200px;
background:#789;
}
.foot
{
width:500px;
height:200px;
background:#123;
}
and also the fiddle : jsfiddle.net/p7Nsf/9/
try this....
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
#list { background-color: aqua; }
.horizontal { display: inline; border-left: 2px solid; padding-left: 0.3em; }
.first { border-left: none; padding-left: 0; }
</style>
</head>
<body>
<div id="list">
<div>
<ul>
<li class="first">Home</li>
<li class="horizontal">About
<ul>
<li class="first">School</li>
<li class="horizontal">Vision and Mission </li>
<li class="horizontal">Principal’s desk
<li class="horizontal">Management
</ul> </li>
<li class="horizontal">Admission
<ul>
<li class="first">Overview</li>
<li class="horizontal">Download application form</li>
</ul> </li>
<li class="horizontal">Gallery</li>
<li class="horizontal">School Calander</li>
<li class="horizontal">News & Events</li>
<li class="horizontal">Career</li>
<li class="horizontal">Contact</li>
</ul>
</div>
</div>
</body>
</html>
Add the padding-top and bottom not to the anchor, but to the li. And give the anchor a border-right:
.menu > ul > li > a {
border-right: 2px solid white;
display: block;
padding-left: 25px;
padding-right: 25px;
}
.menu > ul > li:last-child > a {
border-right: 0;
}
Check here.
Like this
demo
css
.menudiv {
width: 788px;
margin:0 auto;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
.menu ul ul {
display: none;
margin:4px 0 0 0;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #111312;
margin: 0;
list-style: none;
position: relative;
padding: 0;
border: 3px solid #111312;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius:13px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
border-bottom: 3px solid transparent;
border-right: 3px solid #fff;
}
.menu ul li:last-child{
border:none;
}
}
.menu ul li:hover {
background: #111312;
border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 15px;
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #111312;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
border-right:none;
}
.menu ul ul li a {
padding: 10px;
color: #000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
text-decoration: none;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
.head {
width: 500px;
height: 200px;
background: #789;
}
.foot {
width: 500px;
height: 200px;
background: #123;
}
The border will always be as tall as the element, but you can draw a line and apply it to all the elements with
background:url(line.png) bottom right no-repeat;
This might be helpfull, I usually handle border lines in navigation with the help of "line-height" property, it allows to control the height borders from left or right sides. In other words you can change the height of a left/right border by changeing "line-height" property.
HTML
<div class="wrapper">
<div class="container">
<ul class="nav">
<li>My Wishlist</li>
<li>My Account</li>
<li>My Cart</li>
<li>Login</li>
</ul>
</div>
</div>
CSS
.wrapper{
background: #f1f1f1;
width: 100%;
border-top: 5px solid #d1b792;
border-bottom: 5px solid #d1b792;
padding-bottom: 1px;
}
.nav li{
display: inline-block;
margin-left: -4px;
}
.nav li a{
display: block;
font-size: 18px;
padding: 0px 12px 3px 12px;
margin: 5px 0;
color: #666694;
line-height: 12px;
border-right: 2px solid #4679BD;
text-decoration: none;
}
.nav li a:hover{
color: darkblue;
}
.nav li:last-child a{
border-right: none;
}
Here is the Fiddle: http://jsfiddle.net/johannesMt/Lt143z8x/
i've a menu with sub menus in it, i've added border at bottom while hovering but when i hover on the menu the menu height increases a bit, the whole menu takes a space at top and bottom when i put it in a div.
here is my fiddle : http://jsfiddle.net/p7Nsf/
<div class="head"></div>
<div class="menudiv">
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>School</li>
<li>Vision and Mission </li>
<li>Principal’s desk
<li>Management
</ul> </li>
<li>Admission
<ul>
<li>Overview</li>
<li>Download application form</li>
</ul> </li>
<li>Gallery</li>
<li>School Calander</li>
<li>News & Events</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div><!-- menu div ends-->
<div class="foot"></div>
CSS
.menudiv
{
width:980px;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size:14px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #111312;
list-style: none;
position: relative;
display: inline-table;
border:3px solid #111312;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: #111312;
border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding-top: 10px; padding-left: 25px; padding-right: 25px; padding-bottom: 10px;
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #111312;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.head
{
width:500px;
height:200px;
background:#789;
}
.foot
{
width:500px;
height:200px;
background:#123;
}
Try this, your menu item jumps because you are adding border to the item so it increases its height by the 3 px border
.menu ul li {
float: left;
border-bottom: 3px solid transparent;
}
http://jsfiddle.net/p7Nsf/1/
reduce padding on the anchor to compensate for the 3px
.menu ul li a {
padding-bottom: 7px;
}
http://jsfiddle.net/p7Nsf/2/
Update
.menu ul {
background: none repeat scroll 0 0 #111312;
border: 3px solid #111312;
display: inline-table;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
I removed the display prop
http://jsfiddle.net/p7Nsf/4/
Below is my code, currently when I hover on "About Us" everything below the dropdown menu opens; how can i change the css so that it only hovers when i mouseover, this means, when i hover on "Team", then I should see the menus below it.
also how can i adjust the width so that it is shiffted more to the left.
also when the dropdown menu is longer in lenth, it hides below my content, i want the dropdown menu to be over the body of the page, not in hiding.
thanks in advance you all.
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>
JSFiddle: http://jsfiddle.net/LWEry/
Like this:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover > ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
.sub-menu
{
position: absolute;
top: 0;
left: 100%;
}
http://jsfiddle.net/3xWcu/2/
I changed one selector.
FROM
li:hover ul
TO
li:hover > ul
Edited my fiddle above. Added a sub-menu class to the ul containing the Profile and Board li tags:
<ul class="sub-menu">
<li>Profile</li>
<li>Board</li>
</ul>
and added some CSS above.
You mean like this? http://jsfiddle.net/3xWcu/
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>