This is my code for my menu:
/*Menu*/
#menu {
text-align: right;
margin-left: auto;
margin-right: auto;
height: 50px;
position: relative;
z-index: 5;
font-size: 0.75em;
}
#menu ul {
margin: 0;
padding: 10px 5px 5px 5px;
list-style: none;
line-height: normal;
border: 0px solid #03426A;
-moz-border-radius: 6px;
background: #F3F4FF;
position:relative;
width: auto;
float:right;
}
#menu ul li {
float: left;
}
#menu li ul {
display: none;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #000;
display: block;
padding: 0px 15px 5px 15px;
text-decoration: none;
text-align: center;
font-size: 1em;
font-weight: normal;
border: none;
}
#menu ul li a:hover {
color: #0A67A3;
}
#menu li:hover ul {
display: block;
position: absolute;
}
#menu li:hover li {
float: none;
font-size: 0.9em;
}
#menu li:hover a { color: #0A67A3; }
#menu li:hover li a:hover { color: #000; }
/*End Menu*/
I have tried 2 tutorials however have not found a way of making the menu work in ie 5.5 or 6. How can I fix this?
IE6 doesn't support :hover pseudoclass on elements other than anchor tags. Son of Suckerfish has a solution that may work for you: http://www.htmldog.com/articles/suckerfish/dropdowns/
IE 5.5? Really... Wow I feel sorry for you if you need to still be compatible that far...Legacy corporate app I suppose? Damn!!
IE6 only understands :hover for <a> elements that's for sure. But you can try the solution given here that uses a htc file to create a new css behavior: http://www.xs4all.nl/~peterned/csshover.html
Related
My dropdown works fine, except it closes before i can move mouse top of last link in it.
CSS
nav {
width: 100%;
display: inline-block;
margin-bottom: 1%;
text-align: center;
background-color: #F0F0F0;
}
nav .links {
width: 100%;
line-height: 1.2;
font-size: 100%;
text-decoration: underline;
text-align: center;
}
nav .links a {
color: #666666;
text-decoration: none;
word-spacing: normal;
}
nav .links a:visited {
color: #666666;
text-decoration: none;
}
nav .links a:hover {
color: #383838;
text-decoration: none;
}
nav .links a:active {
color: #666666;
text-decoration: none;
}
nav ul {
position:relative;
list-style:none;
color: #666666;
white-space: nowrap;
}
nav li{
position:relative;
float: left;
margin-left: 5%;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #F0F0F0;
border: 2px solid;
border-radius: 5px;
padding: 0.5em 1em 0.5em 0.5em;
line-height: 1.2;
}
ul li:hover ul {
display: block;
}
HTML
<nav>
<div class="links">
<ul>
<li>ETUSIVU</li>
<li>HENKILÖKUVA JA HISTORIA</li>
<li>KORISTEKERAMIIKKA</li>
<li>GALLERIA
<ul>
<li>Keramiikkaveistokset</li>
<li>Keramiikka - kuparityöt</li>
<!--Next link is the one where dropdown closes before mouse reaches it-->
<li>Krisu testi</li>
</ul>
</li>
</ul>
</div>
I tested it with Chrome and FF. CSS is not top skill for me and i think this should work but obviously im wrong :)
I would appreciate help with this greatly, thanks.
EDIT
I changed nav ul li ul as...
nav ul li ul {
z-index: 1;
display: none;
position: absolute;
background-color: #F0F0F0;
border: 2px solid;
border-radius: 5px;
padding: 0.5em 1em 0.5em 0.5em;
}
and now it works just fine. So basically i just added z-index there.
There is an image right below dropdows, not sure is it possible that it messes this one? Atleast z-index did help...
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've noticed that the CSS code related to my regular page links had an impact on the navigation items of my webpage navigation menu.
How can I avoid that and keep the navigation menu links styled as they initially were? See http://jsfiddle.net/8MwX7/
Many thanks
Page links:
a:link {
border-bottom: none;
color: #2d7ddf;
text-decoration: none;
}
a:hover {
border-bottom: 1px dotted #2d7ddf;
background: none;
}
a:visited {
background: none;
}
a:active {
background: none;
}
Navigation menu:
nav {
float: right;
margin: 20px auto;
width: 100%;
}
nav ul {
margin-right: -4px;
margin-left: 5px;
text-align: right;
}
nav ul li {
display: inline-block;
margin-right: -4px;
margin-left: 5px;
vertical-align: top;
}
nav a {
padding: 4px 8px;
text-decoration: none;
color: rgba(255,255,255,1);
background: rgba(0,0,0,0.25);
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 14px;
font-weight: 400;
}
nav a:hover {
background: rgba(0,0,0,0.35)
}
.activeNav {
background: rgba(0,0,0,0.35)
}
nav ul li ul {
position: absolute;
display: block;
margin-top: 5px;
background: none;
padding-top: 5px
}
nav ul li ul li {
display: block;
float: none;
margin: 0;
padding: 0
}
nav ul li ul li a {
display: block;
text-align: left;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px rgba(0,0,0,0.33);
padding: 10px
}
nav ul li ul li a:hover {
background: rgba(20,150,220,0.5);
color: white;
text-shadow: 0 1px rgba(0,0,0,0.5)
}
.hover a {
display: block;
}
.hover span {
color: rgba(255,255,255,0.9);
background: rgba(20,150,220,0.5);
border-radius: 5px;
position: absolute;
display: block;
margin: 5px 0 0 -57px;
padding: 10px;
font-size: 13px;
font-weight: 300;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: center;
cursor: default;
}
I would like to add that using the !important keyword in CSS is generally considered bad practice.
What are the implications of using "!important" in CSS?
http://james.padolsey.com/usability/dont-use-important/
The reason your styles are not working correctly because
a:link, a:hover, a:active, a:visited
are considered more specific than
nav a
If you would like to correct this without using the important tag then modify 'nav a' to the following:
nav a:link, nav a:hover, nav a:active, nav a:visited {
padding: 4px 8px;
text-decoration: none;
color: rgba(255,255,255,1);
background: rgba(0,0,0,0.25);
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 14px;
font-weight: 400;
}
The code above makes the following css:
nav a:link, nav a:hover, nav a:active, nav a:visited
more specific than
a:link, a:hover, a:active, a:visited
Here is a link to an updated fiddle:
http://jsfiddle.net/8MwX7/2/
Mark the styles of your menu with !important to prevent it from being overridden.
nav a {
/*other css rules*/
color: rgba(255,255,255,1) !important ;
}
Updated Fiddle
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!