i have a navbar with a horizontal submenu and issued with the submenu appearing on hover. I used display none to hide it but the hover code didn't work. Here is the whole code.
body {
margin: 0;
padding: 0;
background: #eee;
}
.nav ul {
list-style: none;
margin: 200px 0 0 14px; /* top, right, bottom, left*/
padding: 0;
overflow: hidden;
}
.nav li {
float: left;
}
.nav a {
background-color: gray;
padding: 10px;
margin-right: 10px;
display: block;
}
/*SUBNAV*/
.subnav ul {
list-style: none;
padding: 10px;
margin: 0;
overflow: hidden;
background-color: black;
display: none;
}
.subnav li {
float: left;
margin-left: 25px;
}
.nav li:hover .subnav ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:\Users\Arda\Desktop\website 2\style1.css">
<title>Sunucu</title>
</head>
<body>
<div class="nav">
<ul>
<li class="ana"><a class="active" href="#">Home</a></li>
<li class="magaza">Shop</li>
</ul>
</div>
<div class="subnav">
<ul>
<li>Yetki</li>
<li>Kredi</li>
</ul>
</div>
</body>
</html>
So as you can see when you hover shop, it's supposed to show the submenu but it doesn't.
Your CSS selects .subnav as a child of .nav li, but your HTML is not structured that way.
To use your current CSS, you'll need to move the .subnav into .nav li.
Example below:
body {
margin: 0;
padding: 0;
background: #eee;
}
.nav ul {
list-style: none;
margin: 0 0 0 14px;
/* top, right, bottom, left*/
padding: 0;
overflow: hidden;
}
.nav li {
float: left;
}
.nav a {
background-color: gray;
padding: 10px;
margin-right: 10px;
display: block;
}
/*SUBNAV*/
.subnav ul {
list-style: none;
padding: 10px;
margin: 0;
overflow: hidden;
background-color: black;
display: none;
}
.subnav li {
float: left;
margin-left: 25px;
}
.nav li:hover .subnav ul {
display: block;
}
<div class="nav">
<ul>
<li class="ana">
<a class="active" href="#">Home</a>
</li>
<li class="magaza">
Shop
<div class="subnav">
<ul>
<li>Yetki</li>
<li>Kredi</li>
</ul>
</div>
</li>
</ul>
</div>
Edit
It seems that you want the dropdown menu to be horizontal, the full width of the page, and below the main navigation.
I set the subnav to be position:absolute. That way it can be positioned outside of its container li.magaza but still be triggered by a hover event on its ancestor.
I also added an opacity/visibility transition to fade the submenu in and out (without using JavaScript).
body {
margin: 0;
padding: 0;
background: #eee;
}
.nav ul {
list-style: none;
margin: 0 0 0 14px;
/* top, right, bottom, left*/
padding: 0;
overflow: hidden;
}
.nav li {
float: left;
}
.nav a {
background-color: gray;
padding: 10px;
margin-right: 10px;
display: block;
}
/*SUBNAV*/
.subnav ul {
position: absolute;
left: 0;
width: 100%;
box-sizing: border-box;
list-style: none;
padding: 10px;
margin: 0;
background-color: black;
visibility: hidden;
opacity: 0;
transition: opacity .2s, visibility 0s .2s;
}
.subnav li {
float: left;
margin-left: 25px;
}
.nav li:hover .subnav ul {
visibility: visible;
opacity: 1;
transition: opacity .2s;
}
<div class="nav">
<ul>
<li class="ana">
<a class="active" href="#">Home</a>
</li>
<li class="magaza">
Shop
<div class="subnav">
<ul>
<li>Yetki</li>
<li>Kredi</li>
</ul>
</div>
</li>
</ul>
</div>
<p>Page content goes here</p>
You have structured your HTML wrong. You need to move your subnav div under the parent li.
Here is JQUERY for you. Updated your example. Gave fadeIn effect.
If you only want to use css check for the comment in css section.
$( "li.has-subnav" ).hover(
function() {
$('.subnav').fadeIn(200);
},
function() {
$('.subnav').fadeOut(200);
}
);
.nav ul {
list-style: none;
margin: 0 0 0 14px; /* top, right, bottom, left*/
padding: 0;
}
.nav li {
display: inline-block;
}
.nav a {
background-color: gray;
padding: 10px;
margin-right: 10px;
display: block;
}
/*SUBNAV*/
.subnav {
list-style: none;
padding: 10px;
background-color: black;
display: none;
position: absolute;
left:0;
width:100%;
box-sizing: border-box;
}
/** Uncomment the following css and remove jQuery to use only css **/
// .has-subnav:hover .subnav {
// display: block;
// }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:\Users\Arda\Desktop\website 2\style1.css">
<title>Sunucu</title>
</head>
<body>
<div class="nav">
<ul>
<li class="ana"><a class="active" href="#">Home</a></li>
<li class="magaza has-subnav">
Shop
<div class="subnav">
<ul>
<li>Yetki</li>
<li>Kredi</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
Related
I am looking to have it so that when you hover over the nav bar the drop-down menu sits above/on-top of the main content, however at the moment when the menu drops down it is pushing the main image down and not sitting on top as I would expect the z-index property to do.
I have set the nav div to relative and also the main section div to relative but still with no joy!
Anyone out there able to help with this, please?
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img/main-image.png" alt="" />
</div>
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
position: relative;
z-index: 1;
}
ul {
list-style: none;
padding: 0;
float: right;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
position: relative;
}
#main-img {
width: 100%;
height: 100vh;
}
The #main-section is pushed down because the dropdown menu is positioned within the flow of the document.
When it is not hovered, it has display: none which takes it out of the DOM.
When hover, it switches to position: block which puts it back - and it occupies space, and pushes the main-content down.
You can test this by adding the desired end-result display: block by default, and see how the document would look in it's expanded state.
You need to apply position: absolute to your drop-down, in order for it to not interfere with the document flow. You could also move the z-index: 1 directly on it, if that is the content that should be on top - or you could leave it on the parent, and should work just as well. - the z-index is not the problem here.
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
}
ul {
list-style: none;
padding: 0;
float: right;
background-color: #ec671c;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
position:relative;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
}
#main-img {
width: 100%;
height: 100vh;
}
#top-bar-container >nav >ul > li > ul{
position:absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img" alt="" />
</div>
</body>
</html>
hi
You can do in the section ul>li{position:relative} and Also, put in a second UL {position:absolute}
I am new to web design. I am trying to create a site where in some menus in menu bar have sub menus. I want on mouse hove it should display submenu which is not happening. This is my code:
#charset "UTF-8";
body {
margin: 0;
}
. wrapper {
height: 100vh;
}
nav {
height: 44px;
background: #323232;
text-align: center;
/* to center the UL in the nav */
}
nav ul {
display: flex;
max-width: 1200px;
justify-content: space-around;
align-items: center;
padding: 0;
margin: 0 auto;
/* 0 auto allows it to self-center in the nav */
list-style-type: none;
}
nav li {}
nav a {
display: inline-block;
height: 44px;
line-height: 44px;
color: white;
font-size: 15px;
font-weight: 100;
text-decoration: none;
transition: 0.3s;
}
nav a:hover {
color: #B8B8B8;
}
.dropdown ul {
position: absolute;
top: 43px;
z-index: 100;
visibility: hidden;
}
.dropdown ul li a {
background: none;
text-align: left;
display: block;
}
li li {
width: 100%;
}
.dropdown li:hover>ul {
display: block;
}
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a>Drinks</a>
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Special Diet</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div class="fft">Food For Thought</div>
<br>
<br>
<img src="Indian_Spices.jpg" alt="Spices" class="main_wrapper">
<!--<div class="main_wrapper" ></div>-->
On mouse hover on 'Drinks' nothing comes up. I want when I move mouse on 'Drikns' sub menus 'Pan Shots' and 'Tea' should be visible and should hide when mouse is not on 'Drinks'.
Your example is kinda messy and there's a lot of unnecessary code, i'm gonna present you with an example that can you work from.
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
list-style: none;
}
ul>li {
flex: 1;
background: dodgerblue;
height: 45px;
text-align: center;
}
ul>li>a {
text-align: center;
line-height: 45px;
text-decoration: none;
color: #fff;
}
ul>li>ul {
display: none;
}
ul>li:hover>ul {
display: block;
}
.dropdown>a:after{
content:'▿';
font-weight:bold;
}
<ul>
<li>Home</li>
<li class="dropdown">Drinks
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Contact Us</li>
</ul>
You are mixing display and visibility. Your selector is wrong as well.
.dropdown li:hover>ul
Means that CSS is looking for an li child element of .dropdown to be hovered before something is done with the > ul
Since CSS properties are inherited your text is still white in a child element. Therefor you don't see the text.
Try the following:
#charset "UTF-8";
body {
margin: 0;
}
. wrapper {
height: 100vh;
}
nav {
height: 44px;
background: #323232;
text-align: center;
/* to center the UL in the nav */
}
nav ul {
display: flex;
max-width: 1200px;
justify-content: space-around;
align-items: center;
padding: 0;
margin: 0 auto;
/* 0 auto allows it to self-center in the nav */
list-style-type: none;
}
nav li {}
nav a {
display: inline-block;
height: 44px;
line-height: 44px;
color: white;
font-size: 15px;
font-weight: 100;
text-decoration: none;
transition: 0.3s;
}
nav a:hover {
color: #B8B8B8;
}
.dropdown ul {
position: absolute;
top: 43px;
z-index: 100;
visibility: hidden;
}
.dropdown ul li a {
background: none;
text-align: left;
display: block;
}
li li {
width: 100%;
}
.dropdown:hover ul {
visibility: visible;
}
.dropdown ul a {
color: black;
}
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a>Drinks</a>
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Special Diet</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div class="fft">Food For Thought</div>
<br>
<br>
<img src="Indian_Spices.jpg" alt="Spices" class="main_wrapper">
<!--<div class="main_wrapper" ></div>-->
function ServicesMenu() {
document.getElementsByClassName("services-cont")[0].classList.toggle("showS");
}
#charset "UTF-8";
*{padding:0;margin:0;}
body{min-width:300px; margin: 0px; padding: 0px; background:#f8f8f8 }
.wrapper {
max-width: 980px;
height:2000px;
margin: 0px auto;
position: relative;
background-color: #fff;
}
header{
width:980px;
height:105px;
background: #e60000;
}
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top:63px;
right:60px;
width: 560px;
display: block;
position: absolute;
}
ul.navbar li {
display:inline-block;
Margin-left:15px;
background: black;
}
ul.navbar li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
}
ul.navbar li a:hover {background-color: #660000;}
.services-cont{display: none;}
.services-cont.showS {
list-style-type: none;
display: block;
background-color: #707070 ;
}
.services-cont.showS li {
float: none;
display: inline;
height:0;
border:none;
}
.services-cont.showS li a {
display: block;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="menustyle.css">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<script src="MenuFunc.js"></script>
<Title>Menu</title>
</head>
<body>
<div class="wrapper">
<header>
</header>
<ul class="navbar">
<li>Home</li>
<li>Services
<ul class="services-cont">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
However, the parent <li> appears on top with the nested list below and the rest <li> of the parent list are below aligned with the end of the child list.
How do I get the parent list items Home, Services and Contact horizontally aligned in a straight line?
Explanation
The position: absolute and overflow: hidden properties were interfering and not allowing the dropdown list to display properly. I have commented them in the code so you can see.
You should refrain from using absolute positioning where you can achieve the same effect by simply nesting the tags properly. For instance, I nested your navbar inside the red header.
Code
Press the 'Run code snippet' button below to see the code output.
* {
padding: 0;
margin: 0;
}
body {
min-width: 300px;
margin: 0px;
padding: 0px;
background: #f8f8f8
}
.wrapper {
max-width: 980px;
height: 2000px;
margin: 0px auto;
/*position: relative;*/
background-color: #fff;
}
header {
padding: 20px;
width: 980px;
height: 30px;
background: #e60000;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow: hidden;*/
top: 63px;
right: 60px;
width: 560px;
display: block;
/*position: absolute;*/
}
.navbar li {
display: inline-block;
Margin-left: 15px;
background: black;
}
.navbar li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
}
.navbar li a:hover {
background-color: #660000;
}
.navbar li ul {
position: absolute;
top: auto;
list-style-type: none;
display: none;
background-color: #707070;
}
.navbar li ul li {
float: none;
display: inline;
height: 0;
border: none;
}
.navbar li ul li a {
display: block;
text-align: left;
}
.navbar li:hover>ul {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Title>Menu</title>
</head>
<body>
<div class="wrapper">
<header>
<ul class="navbar">
<li>Home
</li>
<li>Services
<ul>
<li>Service 1
</li>
<li>Service 2
</li>
<li>Service 3
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</header>
</div>
</body>
</html>
Explanation
You need to add the following two line of CSS code for the nested <li> tag.
ul li ul {
position: absolute;
top: auto;
}
Setting the position to absolute and top to auto will display your nested ul under the parent tag.
Code
Press the 'Run code snippet' button below to see the code output.
ul li {
background: black;
color: white;
display: inline-block;
width: 100px;
}
ul li ul {
margin: 0px;
padding: 0px;
background: grey;
/*YOU NEED THE TWO LINES BELOW*/
position: absolute;
top: auto;
}
ul li ul li {
color: white;
background: grey;
display: block;
width: 80px;
padding: 10px;
}
<html>
<body>
<ul>
<li>
Home
</li>
<li>
Services
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</body>
</html>
I want to vertically align the a links 1-4 under the class dropdown-menu.
In this example I'm trying to do this by displaying the div as a table-row but nothing worked.
CODE
body {
font-family: 'Arial', sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #1ebb90;
overflow: hidden;
}
li {
float: left;
}
li a,
.dropdown-btn {
display: inline-block;
padding: 18px 22px;
}
div {
display: table-row;
}
div a {
display: inline;
vertical-align: middle;
}
<ul>
<li>Home
</li>
<li>About
</li>
<li>Blog
</li>
<li class="dropdown">
Dropdown
<div class="dropdown-menu">
Link 1
Link 2
Link 3
Link 4
</div>
</li>
</ul>
There are different ways to do it, but one simple way is to use display: block on the links.
(fiddle)
Here's a related question/answer related to how inline vs block work.
[1] Get rid of overflow: hidden on the ul
[2] Make the dropdown absolutely positioned:
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
visibility: hidden;
}
[3] Establish the li as the parent.
li {
...
position: relative;
}
[4] Set up a hovering rule over the anchor next to the hidden dropdown menu.
.dropdown:hover .dropdown-menu {
visibility: visible;
}
Demo: https://jsfiddle.net/b3gbowrn/
body {
font-family: 'Arial', sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style-type: none;
margin:0;
padding: 0;
background-color: #1ebb90;
}
li {
float: left;
position: relative;
border: 1px solid rgba(0,0,0,0.25);
border-right: none;
}
li:last-child {
border: 1px solid rgba(0,0,0,0.25);
}
.dropdown:hover .dropdown-menu {
visibility: visible;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
visibility: hidden;
}
li a, .dropdown-btn {
display: inline-block;
padding: 18px 22px;
}
div {
display: table-row;
}
div a {
display: inline;
vertical-align: middle;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li class="dropdown">
Dropdown
<div class="dropdown-menu">
Link 1
Link 2
Link 3
Link 4
</div>
</li>
</ul>
use inline-block in li
change your HTML to be semantically correct to a menu, by using ul li in dropdown
apply to your dropdown position:absolute and top:100% with relative to li
if you want to make it show/hide, you can use :hover in li
body {
font-family: 'Arial', sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #1ebb90;
}
li {
display: inline-block;
vertical-align: top;
position: relative
}
li a,
.dropdown-btn {
display: block;
padding: 18px 22px;
}
li ul {
position: absolute;
top: 100%;
left: 0;
background: red;
display: block;
width: 100%;
text-align: center;
display: none
}
li:hover ul {
display: block
}
<ul>
<li>Home
</li>
<li>About
</li>
<li>Blog
</li>
<li class="dropdown">
Dropdown
<ul class="dropdown-menu">
<li> Link 1
</li>
<li> Link 2
</li>
<li> Link 3
</li>
<li> Link 4
</li>
</ul>
</li>
</ul>
I am looking to make a navbar menu that drops down when hovering over a specific navbar li.
My navbar looked and worked fine until I tried to get a hover drop down to work. Specifically this is what I am looking for:hover over "work" and get a drop down menu of "videos" and "photography". I don't think that I am nesting anything wrong, so I figure that it is the CSS that is wrong. I have tried a few different suggestions, but nothing has worked.
Side note: I recently gave the nav items the id of "menu". I had it so that the current page on the nav would be a certain darker color and when the current page nav was hovered it would stay that same color. This worked before I changed to id to "menu" (before it was "nav ul li"). Now when you hover, it changes the color. what made this change happen?
* {
padding: 0;
margin: 0;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
ul#menu {
list-style: none;
text-align: center;
background-color: #bac9a9;
padding-top: 5px;
padding-bottom: 5px;
overflow: hidden;
}
ul#menu:after {
content:"";
background-image: url("../images/navbar-shadow-green.jpg");
height: 8px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 4px;
}
ul#menu li {
display: inline;
}
ul#menu li a {
text-decoration: none;
color: #f3ffcf;
font-size: 22px;
padding: 10px 25px;
margin: 0 -2px;
}
ul#menu li a:hover {
background-color: #b2c1a2;
}
a.selected-page, a.selected-page:hover {
background-color: #a6b396;
}
li#sub ul {
display: none;
}
ul#menu li#sub:hover ul {
display: block;
}
<nav>
<ul id="menu">
<li>about
</li>
<li id="sub">work
</li>
<ul>
<li>videos
</li>
<li>photography
</li>
</ul>
<li>services
</li>
<li>contact
</li>
</ul>
</nav>
JSFiddle
I think you have got the nesting wrong. You want the list which is revealed when you roll over the work list item to be a child of that list item. Try updating your HTML / CSS as follows (see fiddle):
HTML:
<nav>
<ul id="menu">
<li>about
</li>
<li id="sub">
work
<ul>
<li>videos</li>
<li>photography</li>
</ul>
</li>
<li>services
</li>
<li>contact
</li>
</ul>
</nav>
CSS:
* {
padding: 0;
margin: 0;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
ul#menu {
list-style: none;
text-align: center;
background-color: #bac9a9;
padding-top: 5px;
padding-bottom: 5px;
overflow: hidden;
}
ul#menu:after {
content:"";
background-image: url("../images/navbar-shadow-green.jpg");
height: 8px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 4px;
}
ul#menu li {
display: inline;
}
ul#menu li a {
text-decoration: none;
color: #f3ffcf;
font-size: 22px;
padding: 10px 25px;
margin: 0 -2px;
}
ul#menu li a:hover {
background-color: #b2c1a2;
}
a.selected-page, a.selected-page:hover {
background-color: #a6b396;
}
li#sub ul {
display: none;
position: absolute;
top: 35px; left: 115px;
background-color: #b2c1a2;
}
li#sub ul li {
display: block;
}
ul#menu li#sub:hover ul {
display: block;
}