The issue I’m having is with my navigation menu drop downs – I know jquery and javascript are possible solutions but I’d rather keep it pure css if possible.
I have 3 main links: two of those links have a simple drop down with 2 links each.
The drop down works and I have been able to play with the margins and padding on the nav and ul/li classes to get the styling and spacing I like. The issue is that if I have the sub-links spaced down not immediately underneath the header link the gap causes the drop down to disappear.
How do I have it so if you mouse over a main link, the drop down stays open until you mouse to another navigation link. (not disappear immediately after not being on a active link) I know there are ways of making the area around the link active, and since my sub links are purposely styled kind of small it would be nice to have a buffer around the text that is also actively linked so people aren’t having trouble actually getting to the inner pages. (I’m going to create a mobile version because the links are microscopic on a phone)
I’ve applied some transition effects which make the colors slowly fade in on the nav links, is there anyway with just CSS I could have the drop down links also ease in some cool way rather than just instantaneously popping up/dissapearing when you’re moused over? I tried applying some effects but I couldn’t get it to work.
I hope this made sense and I really appreciate it in advance. I’d post the HTML and CSS here but I think everything should be easy to see from Chrome or Firebug inspector, if you have any questions just ask me. Like I said I’m a total rookie and I know a lot of my code is probably really sloppy so if you see anything else alarming feel free to let me know.
One option for keeing the space but not causing the dropdown to disappear would be to remove the top margin on .subtitle and instead place bottom padding on the top level LIs, by changing this:
nav ul li {
float: left;
}
to this:
nav [COLOR="#FF0000"]>[/COLOR] ul [COLOR="#FF0000"]>[/COLOR] li {
float: left;
[COLOR="#FF0000"]padding-bottom: 30px;[/COLOR]
}
is there anyway with just CSS I could have the drop down links also ease in some cool way rather than just instantaneously popping up/dissapearing when you’re moused over?
There are ways to do that with newer CSS properties. I find it a little tricky, but here’s one way to do it: http://www.greywyvern.com/?post=337
And here’s a demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Drop down with delay</title>
<style type="text/css">
body {font: 100% Verdana, Arial, Helvetica, sans-serif;}
#nav {margin-bottom: 30px;}
#nav:after {content:""; display:table; clear:both;}
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
position: relative;
float: left;
width:149px;
}
#nav li ul {
position: absolute;
top: auto;
left:0;
}
ul#nav li a {
display: block;
text-decoration: none;
color: #777;
background: #ffffcc;
padding: 5px;
border: 1px solid #ccc;
margin-bottom:-1px;
min-height:0;
}
#nav li:hover a,#nav li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {
color: #fff;
background-color: red;}
#nav li:hover li a,#nav li.over li a {
color: #777;
background-color: #ffffcc;
}
#nav li ul li a { padding: 2px 5px; }
/* the CSS from greywyvern */
#nav li > ul {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
#nav li:hover > ul {
visibility:visible;
opacity:1;
transition-delay:0s;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
<p>Dropdown example by <a href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm">Paul O'Brien</a>, modified for hover delay based on this <a href="http://www.greywyvern.com/?post=337">greywyvern post</a>.</p>
</body>
</html>
Hey, thank you so much for your response – I replaced your code line into mine and got this result:
I have been playing with the margin and padding on all the UL, LI, and Nav links, and visually I can get the look I want but functionality wise I can’t get it to work.
As for the CSS properties you sent me you can see in my code I have something similar for the transition effect I’m using on the links for the colors to fade in but I can’t seem to get the effects to apply to the drop down.
actually, I used your suggestion (think I messed something up before) and got this
are you saying I should add the padding bottom: 30px to just that one class or multiple classes? The drop down gap doesn’t disappear in the above screenshot which is definitely and improvement of what I had but the spacing gets wonky again.
It would be good if you could update your live example. I tested the code I gave you and it worked fine. Make sure to remove the top margin on the sub UL—i.e.
ul.subtitle {
margin-top: 30px;
}
and change this:
nav ul li {
float: left;
}
to what I suggested above:
nav > ul > li {
float: left;
padding-bottom: 30px;
}
You need the > bits to stop the styles affecting the drop list.
Ah I forgot the >, that worked. Thank you! I will play with those transition effects and see if I can get the links to have a little more time on hover.
