Could someone explain to me why navigating away from the main menu item causes the sub-menu to vanish? And possibly provide a fix. My google-foo skills are below par this morning. Thanks all.
CSS:
body, html{
margin: 0;
}
.content{
padding: 30px;
}
.nav-main{
width: 100%;
background-color: #222;
height: 70px;
color: #fff;
}
.nav-main > ul{
margin: 0;
padding: 0;
float: left;
list-style-top: none;
}
.nav-main > ul > li {
float: left;
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
color: #fff;
text-decoration: none;
}
.nav-item:hover{
background-color: #444;
}
.nav-content{
position: absolute;
top: 70px;
overflow: hidden;
background-color: #222; /* same color as main nav*/
max-height: 0; /*will not display if .nav-content no padding */
}
.nav-content a{
color: #fff;
text-decoration: none;
}
.nav-content a:hover{
text-decoration: underline;
}
.nav-sub{
padding: 20px;
}
.nav-sub ul{
padding: 0;
margin: 0;
list-style-type: none;
}
.nav-sub > ul > li{
display: inline-block;
}
.nav-sub ul li a{
padding: 5px 0;
}
.nav-item:focus{
background-color: #444; /*remove if click focus not necessary*/
}
.nav-item:hover ~ .nav-content{
max-height: 400px;
-webkit-transition:max-height 0.6s ease-in;
-moz-transition:max-height 0.6s ease-in;
transition:max-height 0.6s ease-in;
}
HTML:
<body>
<nav class="nav-main">
<ul>
<li>
first
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>this is a thing</li>
<li>this is a thing 2</li>
</ul>
</div>
</div>
</li>
<li>
second
</li>
<li>
third
</li>
</ul>
</nav>
<div class="content">this is content</div>
</body>
I have changed:
.nav-item:hover ~ .nav-content{
To
nav > ul > li:hover > .nav-content{
And now it's working - example:
https://jsfiddle.net/saxkayv2/
Related
I'm having problems with my navbar. The process of making one is already done, but when I hover over my nav and my subnav appears, all the text below it moves down.
How do I fix this?
Here is a code snippet which demonstrates the problem, hover over TAKKEN to see the issue:
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Here is some text below the nav.
Image showing the problem
Try giving a fixed width to the li elements.
Check this:
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal > li {
float: left;
width: 6rem;
}
.horizontal li ul{
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a{
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color:#FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
}
.horizontal li a:hover {
background-color: darkorange;
color:#a2becf
}
.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
There appear to be 2 style-related problems with your nav.
Elements are being shifted to the side when you hover over TAKKEN.
This is happening because the text KAPOENEN and KAWELLEN is longer and therefore wider than TAKKEN. The quickest fix would be to define a specific width for each of the items in your nav.
Any text below the nav moves down as soon as one of the subnavs open.
To solve this problem, you need to give your nav an absolute position, and add a placeholder div to just above it in your HTML.
Run the code snippet below to see a demonstration of both points. I've marked all my changes in the CSS using comments.
/* New code */
#placeholder {
height: 100px;
}
nav {
position: absolute;
top: 5px;
}
/* End new code */
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
/* New code */
width: 80px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
<div id="placeholder"></div>
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Here is some text under the nav.
NOTE: THE NAVBAR IS NOT IN BOOTSTRAP
Okay, so, when I hover over my "More" button, it displays dropdown content but it just suddently appears and when I move my mouse somewhere else it suddently disappears. What I want, is to make the dropdown content appear through a transition or something like that. Here is my code:
<nav>
<ul>
<li>Home</li>
<li>Earn Coins</li>
<li>Get Rewards</li>
<li>Referrals</li>
<li>Vouchers</li>
<li><div class="dropdownd">
More
<i class="fa fa-caret-down"></i>
<div class="dropdown-contentd">
<a class="dropdowncontentn" href="leaderboard.php">Leaderboard</a>
<a class="dropdowncontentn" href="partnerships.php">Partnerships</a>
<a class="dropdowncontentn" href="contact.php">Contact us</a>
<a class="dropdowncontentn" href="socialmedia.php">Social Media</a>
<a class="dropdowncontentn" href="settings.php">Settings</a>
</div>
</div> </li>
<li>
<a href="#">
<i class="fa fa-bars"></i>
</a>
</li>
<li class="thum" style="float:right;margin-right:25px;">
<a onClick="navbar_coins_refresh.php" href="#" class="coinsnumber"><?php include 'navbar_coins.php'; ?></a>
</li>
</ul>
</nav>
# CSS #
* {
box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav ul li a {
color: #FFF;
text-decoration: none;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 15px;
font-family: Ubuntu;
}
nav ul li a:hover {
text-decoration: none;
color: #444;
}
nav ul li a.coinsnumber:hover {
text-decoration: none;
color: white;
}
.dropdown-contentd {
display: none;
position: absolute;
top: 49px;
background-color: royalblue;
color: #FFF;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
z-index: 1;
/*border: 1px solid black;*/
margin: 0;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
transition: all .3s ease;
}
.dropdown-contentd a {
float: none;
color: black;
padding: 12px 16px;
color: #ffffff;
text-decoration: none;
display: block;
text-align: left;
transition: all .3s ease;
background-color: royalblue;
}
.dropdown-contentd a:hover {
color: #444;
}
.dropdownd:hover .dropdown-contentd {
display: block;
}
/* End General */
/* Start Navbar */
nav ul {
background-color: royalblue;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
nav ul > li {
padding-left: 20px;
padding-right: 20px;
padding: 15px;
display: inline-block;
transition: all .3s ease;
margin-left: -5px
}
nav ul > ol {
position: absolute;
top: 49px;
right: 0;
background: #333;
text-align: center;
list-style: none;
display: none
}
nav ul > ol > li {
width: 100vw;
color: #FFF;
margin: 0;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
transition: all .3s ease;
}
nav ul > ol > li:hover a {
margin: 20px;
}
nav ul > ol > li:hover {
background: #000;
cursor: pointer
}
nav ul input {
opacity: .7;
padding: 5px;
float: right;
display: none
}
/* Start Menue Right */
/* Start Media Query */
#media screen and (max-width:950px){
nav ul > li:not(:first-child) {
display:none;
}
nav ul > li:nth-last-of-type(2) {
display: inline-block;
}
nav ul > li:last-of-type {
display: inline-block;
}
}
#media screen and (min-width:950px) {
nav ul > ol > li {
display:none
}
nav ul > li:nth-last-of-type(2) {
display: none
}
}
.dropdowncontentn {
background-color: royalblue;
}
nav {
z-index: 1;
position: fixed;
right: 0;
left: 0;
top: 0;
}````
It's common question. You have to use max-height transition, not just height. Check here How can I transition height: 0; to height: auto; using CSS?
I have created a CSS Navigation Bar and its divided into three parts:
1.Left (.logo is class and it placed at the Left)
2.Center (.menu is another class and it placed at the Center)
3.Right (.menu2 is last class and i can't place at the Right correctly)
I want Something Like this and how can I achieve this task:
.logo {
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav{
position: fixed;
width: 100%;
background-color: #000;
}
/*Menu 1*/
nav .menu ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: center;
margin:0;
transition: 2s;
}
nav .menu ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
/*Menu 2*/
nav .menu2 ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin:0;
transition: 2s;
}
nav .menu2 ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu2 ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
<nav>
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li>Menu1</li>
<li>Menu1</li>
</ul>
</div>
<div class="menu2">
<ul>
<li>menu2</li>
<li>menu2</li>
</ul>
</div>
</nav><!----- nav ------>
You might put the menu2s before the Menu1s in the HTML, and give .menu2 right: 0; and position: absolute;:
nav{
position: fixed;
width: 100%;
background-color: #000;
}
.logo {
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
/*Menu 1*/
nav .menu ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: center;
margin:0;
transition: 2s;
}
nav .menu ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
/*Menu 2*/
nav .menu2 {
right: 0;
position: absolute;
}
nav .menu2 ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin:0;
transition: 2s;
}
nav .menu2 ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu2 ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
<nav>
<div class="logo">
LOGO
</div>
<div class="menu2">
<ul>
<li>menu2</li>
<li>menu2</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Menu1</li>
<li>Menu1</li>
</ul>
</div>
</nav><!----- nav ------>
i'm trying to add an effect to a mega menu. (it's under the health tab) when you hover over a link on the left, a section on the right is supposed to appear. looking at other stack overflow examples i found that if i used a:hover + div to make the div display, that should work, but for some reason it isn't. some assistance would be greatly appreciated!
#import url("http://fonts.googleapis.com/css?family=Roboto");
/* mini reset */
.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
border: none;
margin: 0;
outline: none;
padding: 0;
}
.nav a {
text-decoration: none;
}
.nav li {
list-style: none;
}
/* menu container */
.nav,
input {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.nav {
cursor: default;
display: inline-block;
position: relative;
z-index: 500;
}
/* menu list */
.nav > li {
display: block;
float: left;
}
/* menu links */
.nav > li > a {
background: #0a64a2;
border-left: 1px solid #0f8ee2 !important;
display: block;
color: #fcfcfc;
font-weight: bold;
height: 54px;
line-height: 54px;
padding: 0 20px;
position: relative;
text-shadow: 0 0 1px rgba(0,0,0,.35);
-webkit-transition: all .3s ease;
transition: all .3s ease;
z-index: 510;
}
.nav > li:hover > a {
background: #8cbd3a;
}
.nav > li:first-child > a {
border-left: none;
border-radius: 3px 0 0 3px;
}
/* search form */
.nav > li.nav-search > form {
border-left: 1px solid #0f8ee2;
height: 54px;
position: relative;
width: inherit;
z-index: 510;
}
.nav > li.nav-search input[type="text"] {
background: #0a64a2;
display: block;
font-weight: bold;
font-size: 14px;
float: left;
height: 54px;
line-height: 24px;
padding: 15px 0 !important;
text-shadow: 0 0 1px rgba(0,0,0,.35);
-webkit-transition: all .3s ease 1s;
transition: all .3s ease 1s;
width: 1px;
color: #ebebeb;
}
.nav > li.nav-search input[type="text"]:focus {
color: #fcfcfc;
border:none;
box-shadow: none;
}
.nav > li.nav-search input[type="text"]:focus,
.nav > li.nav-search:hover input[type="text"] {
padding: 15px 20px !important;
-webkit-transition: all .3s ease .1s;
transition: all .3s ease .1s;
min-width: 110px;
width: 60%;
color: #ebebeb;
}
.nav > li.nav-search input[type="submit"] {
background: #0a64a2 url(../img/search-icon.png) no-repeat center center;
border-radius: 0 3px 3px 0;
cursor: pointer;
display: block;
float: left;
height: 54px;
padding: 0 25px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
width: 20px;
}
.nav > li.nav-search input[type="submit"]:hover {
background-color: #4b4441;
}
/* menu dropdown */
.nav > li > div {
background: #fff;
border: 1px solid #ddd;
border-radius: 0 0 3px 3px;
position: absolute;
display: block;
left: 0;
opacity: 0;
overflow: hidden;
top: 50px;
-webkit-transition: all .3s ease .15s;
transition: all .3s ease .15s;
visibility: hidden;
width: 100%;
}
.nav > li:hover > div {
opacity: 1;
overflow: visible;
visibility: visible;
}
/* menu content styles */
.nav .nav-column {
float: left;
padding: 2.5%;
width: 25%;
}
.nav .nav-column h3 {
color: #372f2b;
font-size: 14px;
font-weight: bold;
line-height: 18px;
margin: 20px 0 10px 0;
text-transform: uppercase;
}
.nav .nav-column h3.orange {
color: #ff722b;
}
.nav .nav-column li a {
color: #888;
display: block;
font-weight: bold;
line-height: 26px;
}
.nav .nav-column li a:hover {
color: #8cbd34;
}
.nav a:hover > .menuheader {
color: #8cbd3a;
}
.nav a p {
color: black;
font-weight: normal;
}
.menuheader {
font-weight: bold !important;
margin-bottom: 0px;
margin-top: 5px;
font-size: 1.2em;
line-height: 18px;
}
.nav-column.info {
width: 75%;
}
.nav-column.info a {
display: none !important;
}
.healthlink1:hover + .healthinfo1 {
display: block !important;
}
<link href="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css" rel="stylesheet"/>
<div class="menu-wrapper">
<ul class="nav">
<li>item</li>
<li>item</li>
<li>Health
<div>
<div class="nav-column left">
<ul>
<li class="healthlinks">
Asthma
Birth Defects
Cancer
Carbon Monoxide Poisoning
COPD
Heart Attacks
Heat Related Illness
Lead Poisoning
Oral Health
Reproductive Outcomes
</li>
</ul>
</div><!-- /nav-column -->
<div class="nav-column info left">
<ul>
<li>
Asthma info
Birth Defects info
Cancer info
Carbon Monoxide Poisoning info
COPD info
Heart Attacks info
Heat Related Illness info
Lead Poisoning info
Oral Health info
Reproductive Outcomes info
</li>
</ul>
</div><!-- /nav-column -->
</div>
</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
.nav-column.info a {
display: none !important;
}
Issue with display: none !important;
Just remove it from css style and right div will be displayed.
https://jsfiddle.net/cyhog5ra/
ok so i found foundation 6 and it does exactly what i needed so to help anyone else who has this problem here's something that works!`
$(document).ready(function() {
$(document).foundation();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<div class = "row collapse">
<div class = "medium-3 columns">
<ul class = "tabs vertical" data-tabs id = "tabs_example">
<li class = "tabs-title is-active">text 1</li>
<li class = "tabs-title">text 2</li>
<li class = "tabs-title">text 3</li>
<li class = "tabs-title">text 4</li>
<li class = "tabs-title">text 5</li>
</ul>
</div>
<div class = "medium-9 columns">
<div class = "tabs-content vertical" data-tabs-content = "tabs_example">
<div class = "tabs-panel is-active" id = "tab1">
<p>First text</p>
</div>
<div class = "tabs-panel" id = "tab2">
<p>Second text</p>
</div>
<div class = "tabs-panel" id = "tab3">
<p>Third text</p>
</div>
<div class = "tabs-panel" id = "tab4">
<p>Fourth text</p>
</div>
<div class = "tabs-panel" id = "tab5">
<p>Five text</p>
</div>
</div>
</div>
`
I am looking for help on this navigation bar, I need it to be able to drop down while keeping the other items of the navigation bar in place. I have looked through all of the other submissions and still didn't find anything that helped. Here is the code and example.
http://jsfiddle.net/doctor_turkey/G2xfz/
<html>
<style>
#div5 {
background-color: black;
-webkit-box-shadow: 0px 0px #000000;
box-shadow:0px 5px 5px #5B5454;
width: 100%;
clear: both;
margin-left: -1%;
margin-right:-1%;
padding-left:1%;
padding-right:1%;
}
#div5 ul{
margin: 0 0 0 60px;
padding: 0px;
list-style: none;
}
#div5 ul li{
display: inline;
-webkit-box-shadow: 0px 0px #000000;
box-shadow: 0px 0px #000000;
position:relative;
}
#div5 ul li a{
float: left;
width: 15%;
height: 20px;
margin-top: -5px;
margin-bottom: 10px;
padding: 0;
font-size: 15px;
font-weight: none;
text-align: center;
text-decoration: none;
color: black;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
#div5 ul li .firstmenu{
border-left: 2px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
}
#div5 ul li .smallmenuend{
border-left: 1px solid #CCCCCC;
border-right: 2px solid #CCCCCC;
}
/* HOVER MENU TEST*/
#div5 li ul {
float: left;
left: 0;
opacity: 0;
position:relative;
display:none;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#div5 li:hover ul {
opacity: 1;
/* top: 50px;*/
display:block;
float: left;
color:black;
clear:left;
display:block;
margin-left:20%;
}
#div5 li ul li {
clear:left;
color:black;
display:block;
width:100%;
}
#div5 li ul li a{
width:100%;
}
#div5 li ul a:hover {
background: #bbb;
}
</style>
<div id="div5" class="fluid">
<p align="center">
<div align="center">
<ul>
<li> One</li>
<li> Two
<ul>
<li> Test 1 </li>
<li> Test 2 </li>
</ul>
</li>
<li><a href="#" >Three</a></li>
<li> Four </li>
<li>Five</li>
<li >Six</li>
</ul>
</div>
</p>
</div>
Your code needs a lot of work - it is a soup of unnecessary markup and styles.
Here's a cleaned up version of this navigation bar. You are welcome to study this code and optimize yours.
HTML:
<ul id = "nav">
<li>Home</li>
<li>Energy
<ul>
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
<li>Account</li>
<li>Contact</li>
<li>Services</li>
<li >Solutions</li>
</ul>
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #eee;
}
#nav {
list-style-type: none;
display: table;
min-width: 610px;
margin: 0 auto;
background-color: #fff;
text-align: center;
}
#nav > li {
display: inline-block;
position: relative;
}
#nav ul {
list-style-type: none;
background-color: #5f6975;
position: absolute;
min-width: 100%;
}
#nav li a {
font: normal 15px/1 Sans-Serif;
text-decoration: none;
color: #4b545f;
display: block;
padding: 10px 20px;
text-align: left;
white-space: nowrap;
}
#nav ul a {
color: #fff;
}
#nav ul > li + li {
border-top: 1px solid #6b727c;
}
#nav li:hover {
background-color: #4b545f;
}
#nav > li:hover > a {
color: #fff;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
And, a fiddle: http://jsfiddle.net/bE2D2/.