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
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'm trying to create a site navigation bar that uses sub-menus.
Using whatever I can gather from the internet I've done my best and have got one working with one small issue.
When you hover the mouse over the sub-menu, the main menu text colour does not stay white like I'd like it to.
Can anyone get this to work?
.header nav.site_nav {
float: right;
}
.header ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.header ul a {
display: block;
font-weight: bold;
color: #2C395D;
font-size: 14px;
text-decoration: none;
padding: 8px 8px 8px 8px;
}
.header ul a:hover {
color: white;
}
.header ul li {
float: left;
position: relative;
margin: 0 2px 0 2px;
}
.header ul li:hover {
background: #2C395D;
}
.header ul ul {
display: none;
position: absolute;
text-align: right;
top: 100%;
right: 0;
}
.header ul ul li {
float: none;
width: 150px;
background: #BFC8E1;
margin: 0;
}
.header ul li:hover > ul {
display: block;
}
jsfiddle code
I wasn't able to do this easily without adding more information to your html. I added a class to all top level menu items, then added a small amount of css to make them white on hover.
Updated Fiddle
Add this class to your top level menu items in html:
<a class="topLevel" href="#">Courses ▾</a>
Add this to your CSS:
.header ul li:hover a.topLevel {
color: white;
}
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.
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/
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!