I know this question has been asked quite a few times, but I'm working on a Wordpress theme and I have the submenus styled exactly how I want them. However, they disappear upon hover. I have set all of my margin-tops to zero as stated on Stack previously but they still don't work properly.
My CSS for this top navigation is the following:
.top-nav {
background-color: #444;
min-height: 40px;
}
.top-nav ul {
margin-bottom: 0;
}
.top-nav li {
margin: 0 20px 0 0;
padding: 0;
float: left;
display: inline-block;
position: relative;
}
.top-nav li a {
color: #aaa;
font-size: 12px;
line-height: 40px;
}
.top-nav li a:hover, .top-nav li.current-menu-item a {
color: #fff;
background-color: #444;
}
.top-nav ul li ul.sub-menu {
display: none;
margin-top:0px;}
.top-nav ul li:hover > .sub-menu {
display: block;
position: absolute;
height: 0px;
margin-top:-5px;
overflow: visible;
margin-left:0px;}
.top-nav li.menu-item ul li {
display: block;
position:relative;
width: 100%;
float: left;
margin:0px;
padding:5px 0 5px 10px;
background-color:#444!important;
border-bottom: 1px solid #faf3bf;}
.top-nav ul li.menu-item ul li a {
width: inherit;
padding: 0;}
Any help would be greatly appreciated.
Had to add:
z-index: 1; to .top-nav li.menu-item ul li
The H3 of the title was covering the dropdown.
Related
When I hover over the html section the html & css nav option is moved to the right for some reason, how do I get it to align with the other nav options.
http://codepen.io/anon/pen/bEqPRQ
#nav {
list-style: none;
text-align: center;
padding: 1.250em 0 1.250em 0;
background: #ffffff;
font-size: 106.25%;
font-family: 'Oxygen';
}
#nav li a {
text-decoration: none;
text-align: center;
color: #FFF;
}
#nav ul li ul.dropdown {
background-color: #000000;
display: none;
position: fixed;
z-index: auto;
left: 400;
vertical-align: left;
}
#nav ul li:hover ul.dropdown {
display: block;
}
#nav ul li ul.dropdown li {
display: block;
}
#nav > ul > li {
display: inline-block;
margin-right: 2%;
padding: 4.375em 1.250em 4.375em 1.250em;
}
#nav > ul > li > a {
text-decoration: none;
color: #000000;
}
#nav > ul > li > a:hover {
color: #00c5a2;
}
Your <ul> has a default styling (padding-left) which has to be removed. Adding
#nav ul li ul.dropdown {
padding-left: 0;
}
moves your text to the left.
You should also check your CSS, vertical-align: left and left: 400 (doesn't have a unit) aren't valid and won't work.
You can solve the problem adding padding left = 0 in the css of #nav ul li ul.dropdown :
#nav ul li ul.dropdown {
padding-left: 0;
}
Try changing the .dropdown style as follows:
#nav ul li ul.dropdown {
background-color: #000000;
display: none;
position: absolute;
z-index: auto;
left: 0;
vertical-align: left;
}
Then the parent li position to relative:
#nav > ul > li {
display: inline-block;
margin-right: 2%;
padding: 4.375em 1.250em 4.375em 1.250em;
position: relative;
}
This ensures the dropdown always positions itself absolute to its parent (the li).
Also adding padding: 0 to the dropdown ul:
#nav ul li:hover ul.dropdown {
display: block;
padding: 0;
}
Fiddle: https://jsfiddle.net/04zospoj/
I have a drop down menu and when you hover over an option it shows the submenu, but then when you move the cursor down; sometimes the rest of the menu will hide. I have noticed there is a little bit of space (margin? border?) underneath that I am assuming is the culprit unless someone can tell me differently.
Below is an image to show what I mean; there is a small gap between the two options and I am assuming when you make the cursor go over that point it comes off "hover" and hides it
Any help would be greatly appreciated.
.menu ul { margin = ..;}
The above code makes the margin bigger, however even when it is set to 0 it still seems to be there..
This is my HTML for the menu
<td align="center" bgcolor="#666666">
<div class="menu" align="center">
<ul>
<li>Bar Equipment
<ul>
<li>Tills</li>
<li>Bar Furniture</li>
<li>Bar Sundries</li>
...
</div></td>
This is the Css for the menu class
#charset "utf-8";
* {
margin: 0px; padding: 0px;
}
.menu {
margin: 0px;
text-align: center;
background: #efefef;
padding: 0px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
margin: 0px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: #999;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 10px;
color: #757575;
text-decoration:none;
}
.menu ul ul {
background: #efefef;
padding: none;
position: absolute;
top: 100%; /* ?? */
}
.menu ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
}
.menu ul ul ul li a:hover {
background: red; */
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
}
see the jsfiddle: http://jsfiddle.net/p1kuzzdo/
try this css:
#charset "utf-8";
* {
margin: 0px; padding: 0px;
}
.menu {
background: none repeat scroll 0 0 #efefef;
height: 50px;
line-height: 50px;
margin: 0;
padding: 0;
text-align: center;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
height: 50px;
line-height: 50px;
list-style: outside none none;
margin: 0;
padding: 0;
position: relative;
text-align: center;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
padding: 0 10px;
}
.menu ul li:hover {
background: #999;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
color: #757575;
display: block;
text-decoration: none;
}
.menu ul ul {
background: none repeat scroll 0 0 #efefef;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
border-bottom: 0 solid pink;
border-top: 0 solid #6b727c;
float: none;
margin: 0;
padding: 0;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul ul li a {
color: #fff;
}
.menu ul ul ul li a:hover {
background: red; */
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
}
This discussion has already been great in helping me set my nav bar. But now, my child links have large spaces between and do not line up with the parent links.
My site can be seen here
Any ideas on how to align my child links (Los Angeles, San Diego Honolulu...etc.) with the parent link (Location)? Also, how do I reduce the space between the child links (Los Angeles, San Diego, Honolulu...)?
This is my CSS for quicker reference.
#mainNav {
/*font-size: 1.0em; doesn't seem to do anything*/
/*height: 20px; doesn't seem to do anything*/
margin-top: -10px;
position: absolute;
right: 5%;
top: 40%;
}
/*-------------------------------*/
/*----------Below is CSS for List of Parent Links---------------------*/
#mainNav ul {
list-style-type: none;
position: relative;
display: inline-table;
}
/*----------Below is CSS for List of Location Links---------------------*/
#mainNav ul ul{
list-style: none;
display: none;
}
/*----------Below is CSS for List of Location---------------------*/
#mainNav ul li {float: left;
text-decoration: none;
margin: 0 0 0 25px;
padding-top: 0;
float: left;
width: auto;
list-style: none outside none;
font-size: 0.90em;
text-transform: uppercase;}
#mainNav ul li a {display: block; text-decoration: none;}
#mainNav ul ul {
display: none; /*if this is block, it causes all the sub links to show at once!*/
position: absolute;
width: auto;
top: 35%;
}
#mainNav ul li:hover > ul { display: block;}
#mainNav ul ul li {width: 100%;}
#mainNav li li {
float: none;
width: auto;
}
You can try this css
#mainNav ul ul {
display: none;
position: absolute;
width: auto;
top: 13px;
left: 0;
margin: 0;
padding: 0;
line-height: normal;
}
#mainNav ul ul li {
width: 100%;
margin: 0;
padding: 0;
background: red;
margin-top: 2px;
}
#mainNav ul li{}
#mainNav ul li > ul > li a {
height: auto;
line-height: 21px;
margin: 0;
padding: 0;
text-align: left;
}
Result images
This code ended up doing it for me. I think you copied and pasted wrong Rohit!
li{
list-style: none;
display: inline-block;
/*width: 150px;*/
max-width: auto;
}
ul li a{
text-decoration: none;
display: block;
text-align: center;
padding: 10px; /*needed for spacing between LOCATIONS and LOS ANGELES*/
}
ul li ul li a{
padding-top: 5px;
margin-top: 5px;
float: left;
font-weight:bold;
}
ul ul{
position: absolute;
visibility: hidden;
}
#mainNav ul li:hover ul{
visibility: visible;
padding: 0;
}
ul li ul li{
display: block;
}
Click here for the latest.
I am having a simple problem with my CSS dropdown menu, I want to make it so the dropdowns are equal length to the button above them. See example below, I just want to stretch the block to the length of the above block.
New user, can't upload image
If you use my jsFiddle link you can see my code, and edit it live. I'll post the code anyway just in case.. Note I am only posting the CSS stylesheet in here as the HTML is not part of the problem.
/* Dropdown Menu */
#nav {
float: right;
width: 600px;
height: 90px;
margin: 0 auto;
padding-top: 65px;
}
#nav ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
float: right;
}
#nav ul li {
display: block;
position: relative;
float: left;
}
#nav li ul { display: none; }
#nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #3636FE;
margin-left: 1px;
white-space: nowrap;
}
#nav ul li a:hover { background: #3636FE; }
#nav li:hover ul {
display: block;
position: absolute;
}
#nav li:hover li {
float: none;
font-size: 11px;
}
#nav li:hover a { background: #3636FE; }
#nav li:hover li a:hover { background: #6868FE; }
Fixed. (at least for Chrome+Firefox+IE9)
http://jsfiddle.net/QZWj3/4/
You had to add width: 100% to #nav li:hover ul and to #nav li:hover li
Below is the code that I am writing in HTML and I'm getting what I want perfectly in FF, Opera. My friend is able to run in IE too but I'm not... Also I am not able to see output Chrome. Any reason??
<html>
<head>
<style>
#nav, #nav ul {
line-height: 1.5em;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
#nav a:link, #nav a:active, #nav a:visited {
background-color: #333333;
border: 1px solid #333333;
color: #FFFFFF;
display: block;
padding: 0 5px;
text-decoration: none;
visibility: visible;
}
#nav a:hover {
background-color: #FFFFFF;
color: #333333;
}
#nav li {
position: relative;
width: 100px;
}
#nav ul {
display: none;
left: 100px;
position: absolute;
width: 192px;
top:0;
}
#nav li ul a {
float: left;
width: 192px;
}
#nav ul ul {
top:0;
}
#nav li ul ul {
left: 192px;
top:25px;
margin: 0 0 0 13px;
}
#nav li ul ul ul {
left: 192px;
top:0px;
margin: 0 0 0 13px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
display: block;
}
</style>
</head>
<body>
<ul id="nav">
<li>cat1<ul class="jaccordion">
<li>cat1.1<ul class="jaccordion"></ul></li>
<li>cat1.2<ul class="jaccordion">
<li>cat1.2.1<ul class="jaccordion">
<li>cat1.2.1.1<ul class="jaccordion"></ul></li></ul></li></ul></li>
<li>cat1.3<ul class="jaccordion"></ul></li>
</ul></li>
<li>cat2<ul class="jaccordion">
<li>cat2.1<ul class="jaccordion"></ul></li></ul></li>
</ul>
</body>
</html>
Thanks in advance...
You have a lot of duplicate styles in your css. Try to eliminate those. Especially the uls have a lot of rules which override each other. Try to use classes for the different levels of your uls to make to rules more specific.
EDIT:
all the css code you need: (test it)
#nav, #nav ul {
line-height: 1.5em;
list-style:none; /* <- shorthand declaration is enough */
margin: 0;
padding: 0;
position: relative;
}
#nav a:link, #nav a:active, #nav a:visited {
background-color: #333333;
border: 1px solid #333333;
color: #FFFFFF;
display: block;
padding: 0 5px;
text-decoration: none;
}
#nav a:hover {
background-color: #FFFFFF;
color: #333333;
}
#nav li {
position: relative;
width: 80px; /* <- This defines the width, no need to declare elsewhere */
}
#nav ul {
display: none;
left: 100%; /* <- % makes you indepentent of declared with in li*/
position: absolute;
top:0;
}
#nav li:hover > ul{
display:block; /* <- does all the hovermagic for you, no matter how many ul-levels you have */
}
for several reasons, this code wont work in IE 6 (if you need to support it, you need some really nasty workarounds)
Part of the issue is that you have not declared a doctype in your HTML. No declared doctype will put IE into quirksmode and then it behaves differently than what you're expecting.
You're going to want to place <!DOCTYPE html> at the top of your document.
Quirksmode Explanation
Additionally I think there are a many robust solutions available that will work a little better than yours. As previously mentioned you have many duplicate styles declared, which is likely also causing you issues.
A quick google search game up with the following solution which works really well.
CSS3 Dropdown Menu
I did a quick modification of the code there and applied it to yours. Not sure if this will do exactly what you're looking for, but it's a start.
<style>
#nav {
margin: 0;
padding: 0;
list-style: none;
line-height: 1.5em;
}
#nav li {
position: relative;
width: 100px;
}
/* main level link */
#nav a:link, #nav a:active, #nav a:visited {
background-color: #333333;
border: 1px solid #333333;
color: #FFFFFF;
display: block;
padding: 0 5px;
text-decoration: none;
visibility: visible;
}
#nav a:hover {
background: #ffffff;
color: #333333;
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
left: 100px;
position: absolute;
width: 192px;
top: 0;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
</style>
Hope that helps!