My sub menu is disappearing on hover. When I hover over the menu item it appears but when i try to go to the sub menu item.. it goes away. Any idea why?
I have tried doing this:
.nav ul li:hover ul {
display: block !important;
}
But i still have the same issue. Any help will be appreciated!
HTML:
<div class="nav">
<ul>
<li>
Testing
<ul>
<li>Testing 1</li>
</ul>
</li>
</ul>
</div>
CSS:
.nav ul {
letter-spacing: 2px;
margin-top: 10px;
}
.nav ul li {
display: inline-block;
border-right: 1px solid #7d7a7a;
}
.nav ul ul li {
border-right: none;
}
.nav ul li:last-child {
border-right: none;
}
.nav ul li a {
display: inline-block;
color: #000;
text-decoration: none;
padding: 0 10px;
height: 80%;
}
.nav ul li a i {
color: #000;
}
.nav ul ul li:hover ul {
display: block;
}
.nav ul li:hover ul {
display: block !important;
}
.nav ul li ul {
position: absolute;
display: none;
background-color: #333;
height: auto;
top: 34px;
padding: 13px 10px;
}
.nav ul li ul li:hover {
background-color: #47a3da;
}
JSFiddle demo
It's happening because there is a gap between the dropdown and the button.
You need to get rid of any margin and top for the dropdown to be right under the button.
Demo
.nav > ul {
letter-spacing: 2px;
margin-top: 10px;
}
.nav ul li ul {
position: absolute;
display: none;
background-color: #333;
height: auto;
padding: 13px 10px;
}
Since you parent li and its dropdown menu-item has extra space between them, dropdown ul losses the event of .nav ul li ul li:hover. To make it work,
simply adjust the vertical distance b/w parent and its dropdown child menu-item
.nav ul li ul {
position: absolute;
display: none;
background-color: #333;
height: auto;
top: 18px; /* Works fine on 18px*/
padding: 13px 10px;
}
JSFiddle
Related
In the below snippet I have a CSS menu using nested lists. A problem I have with it is that when you hover over the second list item, it reveals the nested list but in the process, increases the parent list's height pushing everything else down.
I'm aware I can use a position of absolute however that leads to a problem of the nested list not sitting below it's parent element and making it incredibly annoying to style for each nested list I may want.
Is there a simple way I can solve my problem while maintaining the nested loop sitting below it's parent (and by extension, making it possible to access with the :hover)
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li > ul {
display: none;
position: relative;
left: 50px;
border: 1px solid #fff;
}
nav ul li > ul li {
display: block;
color: #fff;
}
nav ul li:hover > ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3</li>
<li>Item-4</li>
</ul>
</nav>
I hope your issue is fixed in below fiddle. Try it.
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li > ul {
display: none;
position: absolute;
left: 50px;
top:100%;
border: 1px solid #fff;
}
nav ul li > ul li {
display: block;
color: #fff;
}
nav ul li:hover > ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3</li>
<li>Item-4</li>
</ul>
</nav>
For this you will need to understand the concept of position...Use position:absolute for the drop-menu and position:relative for its parent li...no need to write css for every drop-menu
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li>ul {
display: none;
position: absolute;
top: 100%;
left: 0px;
border: 1px solid #fff;
min-width: 150px;
}
nav ul li>ul li {
display: block;
color: #fff;
}
nav ul li:hover>ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3
<ul>
<li>Item-3A</li>
<li>Item-3B</li>
<li>Item-3C</li>
<li>Item-3D</li>
</ul>
</li>
<li>Item-4</li>
</ul>
</nav>
There is nothing to worry about using absolute position for submenu. just make the parent relative. According to your code
nav ul li {
display: inline-block;
position: relative; // Added
}
and than modify nested ul like this
nav ul li > ul {
display: none;
position: absolute; // Added
left: 0; // Changed
border: 1px solid #fff;
width: 160px; // Change as per your requirement
}
I have a hovering drop down menu, after putting a border on hover, my dropdown menu overlaps with the menu. Tried to add padding but it's even worse. How can you adjust the position of the dropdown, knowing I have a 5px border transparent when not hovering, transforming into a 5px border solid at bottom when hovering?
#nav {
background-color: #e26a63;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
border: 5px solid transparent;
}
#nav ul li:hover {
background-color: #cb5f59;
border-bottom: 5px solid #9e4a45;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li>
</ul>
</div>
</div>
Short answer is to add margin-top: 5px; to #nav ul ul, where 5px is the same value of the bottom border width.
Note the following set of style outputs a trapezoid shape1 bottom border on hover.
#nav ul li { border: 5px solid transparent; }
#nav ul li:hover { border-bottom: 5px solid #9e4a45; }
Change border in first line to border-bottom it will then output a real rectangle shape.
I also reorganized the CSS table layout, make the table to be centered automatically (I guess you wanted that, but it's easy to change if not). And removed the border style in drop down items.
Jsfiddle Example
#nav {
background-color: #e26a63;
}
#wrap {
display: table;
height: 100px;
margin: 0 auto;
}
#nav ul {
padding: 0;
margin: 0;
display: table-cell;
vertical-align: bottom;
}
#nav ul li {
display: inline-block;
border-bottom: 5px solid transparent;
}
#nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: white;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
margin-top: 5px;
}
#nav ul ul li {
display: block;
min-width: 200px;
}
/* hover */
#nav ul li:hover {
background-color: #cb5f59;
border-bottom-color: #9e4a45;
}
#nav ul li:hover ul {
display: block;
}
#nav ul li:hover li {
border-bottom-width: 0;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li>
</ul>
</div>
</div>
In addition, you can also use :after + background to get the same bottom border style.
Jsfiddle Example
#nav {
background-color: #e26a63;
}
#wrap {
display: table;
height: 100px;
margin: 0 auto;
}
#nav ul {
padding: 0;
margin: 0;
display: table-cell;
vertical-align: bottom;
}
#nav ul li {
display: inline-block;
}
#nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: white;
}
#nav ul li:after {
content: "";
display: block;
height: 5px;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
margin-top: 5px;
}
#nav ul ul li {
display: block;
min-width: 200px;
}
/* hover */
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul li:after {
height: 0;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li>
</ul>
</div>
</div>
1 The Shapes of CSS - https://css-tricks.com/examples/ShapesOfCSS/
Because you've integrated your dropdown inside your header it might resize the header if you'd just make it visible.
An easy solution is to add something like this:
ul li ul{
position: absolute;
top: 58px;
}
By making this element absolute we "break" it out of the header code.
Note: this prabably isn't the perfect code, but it might give you a direction.
Your ul is absolute positioned, so it is implicitly at top: 0px,
Just set this to 5px to compensate the border size
#nav ul ul {
top: 5px; /* added */
}
#nav {
background-color: #e26a63;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
border: 5px solid transparent;
}
#nav ul li:hover {
background-color: #cb5f59;
border-bottom: 5px solid #9e4a45;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li>
</ul>
</div>
</div>
you can change the border to box-shadow and a box shadow does not take up place from the box model
#nav ul li:hover {
background-color: #cb5f59;
box-shadow: 0 -2.2px 0 #9e4a45 inset,0 0 0 #9e4a45;
}
My border radius on the last option in my sub menu "Get Ready!" works, but I can't get it to do the same when you hover over it. I have tried looking at previous answers, but for the life of me I can't get it to work. Code is as follows:
JS Fiddle example
HTML:
<nav>
<ul>
<li id="active">Home</li>
<li>The Team</li>
<li>Trips</li>
<li>Availability</li>
<li>Get Ready!
<ul>
<li>What to Bring</li>
<li>Map</li>
<li>Gallery</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
CSS:
/* nav container */
nav { float: right; }
nav ul { position: relative; display: inline-block; padding: 0px 20px; list-style: none; background: #DBFFFB; border-radius: 10px; }
nav ul li { position: relative; float: left; }
nav ul li:hover { background: #80c5ff; }
nav ul li a, nav ul li:hover ul li a { display: block; font-family: Maven Pro, Myriad Pro, sans-serif; text-decoration: none; color: #181818; padding: 10px 8px; font-size: 0.8em; text-transform: uppercase; }
nav ul li ul { position: absolute; display: none; border-radius: 0 0 10px 10px; width: 120px; top: 36px; left: 0px; z-index: 1000; }
nav ul li:hover > ul { display: block; margin: 0; padding: 0; }
nav ul li#active a, nav ul li a:hover, nav ul li ul li > a:hover { background: #80c5ff; color: #fff; }
nav ul li:hover > ul li { float: none; display: block; }
nav ul li ul li:last-child > a:hover { border-radius: 0 0 10px 10px; }
I believe it's something to do with the CSS in the line 3rd from the bottom and the bottom line itself, but I've tried different combinations and can't get it to function.
Thanks in advance for your help, it will be greatly appreciated!!
This is what you're looking for
nav ul li ul li:last-child:hover
{
border-radius: 0 0 10px 10px;
}
FIDDLE
You can slightly shorten the selector to target the nested li like this:
nav li li:last-child:hover
{
border-radius: 0 0 10px 10px;
}
FIDDLE
I would also add webkit & moz border radius to ensure all browsers display it properly. It wasn't working for me in local enviroment, but jsfiddle displayed it properly.
nav ul li ul li:last-child:hover {
border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
}
I have a CSS menu using the following CSS.
What is the best way to center the whole menu on the page?
I have tried using another <div> outside <nav> and setting margins but its just aligning left all the time.
nav {
margin: 0 auto;
text-align: center;
border:1px solid black;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #000000;
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
jsfiddle : http://jsfiddle.net/njuVm/
You can center the navigation bar by using the following CSS rules:
nav {
margin: 0 auto;
text-align: center;
border:1px solid black;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
margin: 0; /* << add this */
padding: 0; /* << add this */
display: inline-block; /* << add this */
vertical-align: top; /* << add this */
}
nav ul li {
float: left;
margin: 0; /* << add this */
padding: 0; /* << add this */
}
nav ul li:hover a {
color: #000000;
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
background-color: pink; /* optional... */
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
See demo at: http://jsfiddle.net/audetwebdesign/DP6Ax/
The key is to set display: inline-block for nav ul, which will allow your text-align: center rule to take effect.
Make sure to zero out margins and paddings on the ul and li elements. Everything else that you did was more or less right, so you should be good.
Instead of floating the li, you can display them as inline-blocks.
Then, they will be centered relatively to the ul because of text-align: center.
Since the ul is as wide as the nav by default, the li will look like centered relatively to the nav.
nav {
text-align: center;
border: 1px solid black;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav > ul > li {
display: inline-block;
}
nav a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
}
nav li:hover > ul {
display: block;
}
nav > ul ul {
display: none;
position: absolute;
}
nav > ul ul > li {
border-bottom: 1px solid #000000;
}
nav > ul ul a:hover {
color: #666666;
}
<nav>
<ul>
<li>Add Contact</li>
<li>View Contact</li>
<li>Tickets
<ul>
<li><a>TEST1</a></li>
<li><a>TEST2</a></li>
</ul>
</li>
<li>Invoices</li>
<li>Itemised Calls</li>
</ul>
</nav>
First, when you float the ul's you have to clear the float by adding clear div:
HTML :
<div class="clear"></div>
CSS :
.clear{
clear:both;
}
And for centring the menu you should specify a width of the ul as in example and randomly I have set the width to 560px :
nav ul {
list-style: none;
width : 560px;
margin: 0 auto;
}
Take a Look:
http://jsfiddle.net/njuVm/6/
Recently a few months ago I had to add sublevel functionality into a drop down menu on one of our sites. The tactic I took before worked well for the one column in the navigation, but I was asked to add a sublevel to the column before it which didn't work because I was using relative positioning (see the example below):
<style type="text/css">
#div#mycontent { overflow: visible; }
#nav ul { font-family: Arial, Verdana; font-size: 10px; margin: 0; padding: 0; list-style: none; font-weight: bold; }
#nav ul li { display: block; float: left; margin: 0;}
#nav li ul { display: none; }
#nav ul li a { display: block; text-decoration: none; color: #3c1c4e; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #f0e8d8; margin-left: 1px; white-space: nowrap; }
#nav ul li a:hover { background: #f0e8d8; }
#nav li:hover ul { display: block; position: absolute; }
#nav li:hover li { float: none; font-size: 11px; }
#nav li:hover a { background: #f0e8d8; }
#nav li:hover li a:hover { background: #fff7e7; }
/* This is for sublevels in the drop down */
#nav li:hover ul li ul {display: none}
#nav li ul li:hover ul { display: block; }
#nav li ul li ul li { position: relative; left: 188px; bottom:25px ;padding-left:1px }
So I modified the sublevels in the drop down menu to use relative positioning used an overlap approach (due to the way to previous coder originally designed the drop down). The new code looks like the one below:
#nav li ul li ul li { position: absolute; left: 125px; bottom: 0px; border-style: solid; border-width: 1px; border-color:purple; z-index: 1; }
However as the title indicates the LI under the unordered list are now stacking on top of one another. Instead of displaying vertically one after the other. I believe it requires me to clear the float, but it looks like it was done up above. So I'm unsure if I need to redefine the float then clear it in order to make sure the links in the sub list will display vertically.
Edit:
A good thought to add the HTML to show how I'm trying to execute this:
<html>
<head>
<style type="text/css">
#div#mycontent { overflow: visible; }
#nav ul { font-family: Arial, Verdana; font-size: 10px; margin: 0; padding: 0; list-style: none; font-weight: bold; }
#nav ul li { display: block; float: left; margin: 0;}
#nav li ul { display: none; }
#nav ul li a { display: block; text-decoration: none; color: #3c1c4e; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #f0e8d8; margin-left: 1px; white-space: nowrap; }
#nav ul li a:hover { background: #f0e8d8; }
#nav li:hover ul { display: block; position: absolute; z-index: 0;}
#nav li:hover li { float: none; font-size: 11px; }
#nav li:hover a { background: #f0e8d8; }
#nav li:hover li a:hover { background: #fff7e7; }
/* This is for sublevels in the drop down */
#nav li:hover ul li ul {display: none}
#nav li ul li:hover ul { display: block; }
#nav li ul li ul li { position: absolute; left: 125px; bottom: 0px; border-style: solid; border-width: 1px; border-color:purple; z-index: 1; }
</style>
</head>
<body>
<div id="nav">
<ul id="menu">
<li>Column 1
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li> Column 2
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Column 3<li>
</ul>
</div>
</body>
</html>
Try these CSS rules for your sublevels in the drop down:
/* This is for sublevels in the drop down */
#nav li:hover ul li ul {
display: none
}
#nav li ul li:hover ul {
display: block;
position:absolute;
top:0;
left:100%;
}
#nav li ul li ul li {
position:relative;
display: block;
float: left;
border: 1px solid purple;
z-index: 1;
}