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>
Related
I have tried to make horizontal menu in center of page but 'div align=center' not working properly.
.nav ul {
display: block;
list-style-type: none;
margin: 0;
position: absolute;
}
.nav li {
display: inline-block;
float: left;
}
.nav li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica
Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } .nav li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } .nav div ul {display:block;} .nav li ul { display: none; } .nav
li ul li {
display: block;
float: none;
}
.nav li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
.nav ul > li:hover ul {
display: block;
visibility: visible;
}
.nav ul li:hover > ul {
display: block;
}
<div class="nav">
<ul>
<li>Home
</li>
<li>
About
<ul>
<li>A1
</li>
<li>A2
</li>
</ul>
</li>
</ul>
</div>
sample code
I have tried to make horizontal menu in center of page but 'div align=center' not working properly.
Remove position:absolute; from your ul and add these minor changes
.nav{
width: 100%;
}
.nav ul {
display:block;
list-style-type:none;
margin: 0px auto;
width: 50%;
}
Here's the solved fiddle
Remove position:absolute;. It doesn't take any margin or padding values.
.nav ul {
list-style-type:none;
margin:0 auto;
display:table;
}
Here solved fiddle link
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #19c589;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li class="dropdown">
About
<div class="dropdown-content">
A1
A2
A3
</div>
</li>
<li>New</li>
</ul>
Use as the below:
.nav {
margin:0 auto;
}
please remove the ul position: absolute; style other styling left as it is. These are the additional changes you have to do.
.nav {
display: -webkit-box;
}
.nav ul {
margin: 0 auto;
}
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
this might be a bit complicated but I really need some help here..
I made a HTML menu and a css file for it. This was for a desktop version of my website.
I was in need of a mobile menu and due to my low skills of html and css, I asked a friend to make a mobile css file for the menu.
He ended up changing a little bit of code of the original HTML menu, this means that the mobile version is working, but I have to update my original css file for desktop a bit.
That's where the problem is, I just can't get it done, I can't find the right tag to update the file.
Original Desktop HTML menu and css file
body {
font-family: Raleway;
margin: 0;
}
main {
margin: 0 auto;
width: 1280px;
}
/*Menu*/
ul.menu {
margin-bottom: 50px;
}
label.show-menu {
display: none;
}
input.show-menu {
display: none;
}
a:visited {
border: none;
color: black;
text-decoration: none;
}
ul.menu > ul {
margin-left: 80px;
border: none;
}
ul.menu > ul li
{
display: inline-block;
list-style-type: none;
margin: 0;
margin-left: 80px;
}
ul.menu > ul {
position: relative;
}
ul.menu > ul li {
font-size: 30px;
min-height: 1px;
line-height: 1.3em;
padding: 10px;
}
ul.menu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.menu > ul ul li {
float: none;
font-size: 20px;
margin: 30px;
}
ul.menu > ul li:hover {
border-bottom: 1px solid black;
}
ul.menu > ul li:hover > ul {
visibility: visible;
}
ul.menu ul > li > ul > li {
margin: 0 10px 0 0;
position: relative;
padding: 0;
float: left;
}
ul.menu ul > li > ul > li > a {
padding: 10px 20px 10px 10px;
display: block;
}
#Logo {
float: left;
display: inline-block;
position: absolute;
width: 56px;
height: 79px;
}
<header>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" class="show-menu" role="button">
<div id="Logo"><img src="Images/logo.png" alt="logo"></div>
<nav id="primary_nav_wrap">
<ul id="menu" class="menu">
<ul>
<li class="current-menu-item">home</li>
<li>informatie
<ul id="navinformatie">
<li>algemene info</li>
<li>wijken</li>
<li>goed om te weten</li>
</ul>
</li>
<li>verblijf
<ul id="navverblijf">
<li>hotels</li>
<li>hostels</li>
</ul>
</li>
<li>bezienswaardigheden
<ul id="navbezienswaardigheden">
<li class="dir">toers</li>
<li class="dir">entertainment</li>
<li class="dir">musicals</li>
<li class="dir">sport</li>
</ul>
</li>
</ul>
</ul>
</nav>
</header>
The new HTML menu and mobile css file for it
body {
margin: 0;
}
main {
margin: 0 auto;
width: 480px;
}
/*menu*/
ul{
list-style-type:none;
margin:0;
padding:0;
position: static;
display: none;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
border-bottom:1px solid #CCC;
}
li a {
display:block;
min-width:180px;
height: 50px;
text-align: center;
line-height: 50px;
color: black;
background: white;
text-decoration: none;
}
li:hover a {
border-bottom: 1px solid black;
}
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
border-bottom: 1px solid black;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
text-align:center;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
#Logo {
display: none;
}
.show-menu {
text-decoration: none;
color: white;
background: black;
text-align: center;
padding: 10px;
display: block;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
ul li, li a {
width: 100%;
text-align:left;
}
ul li a{
padding:0 10px;
}
li ul li a {
text-align:center;
}
<header>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" role="button">
<div id="Logo"><img src="logo.png" alt="logo"></div>
<ul id="menu" class="mobile-top">
<li class="current-menu-item">home</li>
<li>informatie
<ul class="hidden">
<li>algemene info</li>
<li>wijken</li>
<li>goed om te weten</li>
</ul>
</li>
<li>verblijf
<ul class="hidden">
<li>hotels</li>
<li>hostels</li>
</ul>
</li>
<li>bezienswaardigheden
<ul class="hidden">
<li class="dir">toers</li>
<li class="dir">entertainment</li>
<li class="dir">musicals</li>
<li class="dir">sport</li>
</ul>
</li>
</ul>
</header>
<div style="clear:both;"></div>
So what I need now is some help to adjust the desktop css file to the new html menu, I can't figure it out where to start and what I should change.
You might want to use media queries to apply a different set of CSS for mobile and desktop. You could wrap your original css like this, to only apply the desktop CSS when the width is bigger than 600px.
#media (min-width: 600px) {
body {
font-family: Raleway;
margin: 0;
}
main {
margin: 0 auto;
width: 1280px;
}
/*Menu*/
ul.menu {
margin-bottom: 50px;
}
label.show-menu {
display: none;
}
input.show-menu {
display: none;
}
a:visited {
border: none;
color: black;
text-decoration: none;
}
ul.menu > ul {
margin-left: 80px;
border: none;
}
ul.menu > ul li
{
display: inline-block;
list-style-type: none;
margin: 0;
margin-left: 80px;
}
ul.menu > ul {
position: relative;
}
ul.menu > ul li {
font-size: 30px;
min-height: 1px;
line-height: 1.3em;
padding: 10px;
}
ul.menu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.menu > ul ul li {
float: none;
font-size: 20px;
margin: 30px;
}
ul.menu > ul li:hover {
border-bottom: 1px solid black;
}
ul.menu > ul li:hover > ul {
visibility: visible;
}
ul.menu ul > li > ul > li {
margin: 0 10px 0 0;
position: relative;
padding: 0;
float: left;
}
ul.menu ul > li > ul > li > a {
padding: 10px 20px 10px 10px;
display: block;
}
#Logo {
float: left;
display: inline-block;
position: absolute;
width: 56px;
height: 79px;
}
}
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'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/