The following code creates a NAV bar with hover lists.
The hover works but I have to move my mouse quickly down the hover list to make sure it stays open on hover - ie it flashes off very quickly . Do I need to squeeze the top of the hover closer to the main NAV bar ? Any help much appreciated.
/* Navigation Style */
.dropdown { position:relative; font-family: arial, sans-serif; width:100%; height:40px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; z-index:2; }
/* Basic List Styling (First/Base Level) */
.dropdown ul {padding:0; margin:0; list-style: none;}
.dropdown ul li {float:left; position:relative;}
.dropdown ul li a { border-right:1px solid #666666; padding:12px 8px 12px 8px; display:block; text-decoration:none; color:#000; text-align:center; color:#fff;}
.dropdown ul li a:hover {color:#ffffff; background:#232323;}
/* Second Level Drop Down Menu */
.dropdown ul li ul {display: none;}
.dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; top:41px; min-width:150px; left:0;}
.dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:170px; }
.dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;}
/* Third Level Drop Down Menu */
.dropdown ul li:hover ul li ul {display: none;}
.dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; }
The actual NAV bar HTML is
<div class="dropdown">
<ul>
<li>About</li>
<li>Steam Rail Tours
<ul>
<li>All Rail Tours</li>
<li>British Pullman (VSOE)</li>
</ul>
</li>
</ul>
</div>
The problem is that your dropdown menu is 1px away from your static menu. Can be fixed by changing this one line of code:
.dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; top:40px; min-width:150px; left:0;}
I changed 41px to 40px.
http://jsfiddle.net/eqH2Q/1/
Live Demo
Just add this simple rule:
.dropdown>ul>li>a:hover {
margin-bottom:20px;
}
This way when you hover the button, it gets an invisible bottom margin that will extend the area that triggers the hover event. This works with multiple dropdowns as the demo shows.
Try this line :
li:not(:hover) li {
display: none;
}
And get rid of all display: none and other hovers. It will make sublist's open when their partent list's li element is hovered, and you can add as many sublists as you want, without changing the CSS
Related
I have a web page that has two different UL elements in it, and each of them needs different CSS rules. One of the UL elements is a menu bar and I keep trying to add a style name to it, so that I can differentiate it from the other UL element. When I do the end result is a mess. I have hunted through this site and Google for hours but cannot find a solution, no matter which bits of the code I change.
The code that works for the menu without the class name is:
#menuBackground {
position: fixed;
top: 0;
background:#0ab2aa;
width:100%;
height:50px;
text-align: center;
z-index: 999;
}
#menuContainer {
text-align: center;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
vertical-align: top;
margin-right:1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:120px;
height:50px;
text-align: center;
line-height:50px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
color:#fff;
background:#0ab2aa;
text-decoration:none;
font-size: 1rem;
}
.drop a{
display:block;
min-width:120px;
height:50px;
text-align: left;
line-height:50px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
color:#fff;
background:#2f3036;
text-decoration:none;
font-size: 1rem;
}
/*Hover state for top level links*/
li:hover a {
background:#0ab2aa
}
/*Style for dropdown links*/
li:hover ul a {
background:#f3f3f3;
color:#2f3036;
height:40px;
line-height:40px
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background:#0ab2aa;
color:#fff
}
/*Hide dropdown links until they are needed*/
li ul {
position: absolute;
display:none
}
/*Make dropdown links vertical*/
li ul li {
display:block;
}
/*Prevent text wrapping*/
li ul li a {
width:auto;
min-width:100px;
padding:0 10px
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden,.hidden:hover {
display:block
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration:none;
color:#fff;
background:#0ab2aa;
text-align:left;
padding: 16px 0;
display:none;
width:100%!important
}
/*Hide checkbox*/
input[type=checkbox] {
display:none
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display:block;
margin:0 auto
}
/*Responsive Styles*/
#media screen and (max-width : 1007px) {
/*Make dropdown links appear inline*/
ul {
position:static;
display:none;
white-space: initial;
}
/*Create vertical spacing*/
li {
margin-bottom:1px
}
/*Make all menu links full width*/
ul li,li a {
width:100%
}
/*Display 'show menu' link*/
.show-menu {
display:block
}
}
But when I try to add class names nav-li and nav-ul, if I change it to (one of many different attempts):
#menuBackground {
position: fixed;
top: 0;
background:#0ab2aa;
width:100%;
height:50px;
text-align: center;
z-index: 999;
}
#menuContainer {
text-align: center;
}
/*Strip the ul of padding and list styling*/
.nav-ul{
list-style-type:none;
margin:0;
padding:0;
}
/*Create a horizontal list with spacing*/
.nav-li {
display:inline-block;
vertical-align: top;
margin-right:1px;
}
/*Style for menu links*/
.nav-li a {
display:block;
min-width:120px;
height:50px;
text-align: center;
line-height:50px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
color:#fff;
background:#0ab2aa;
text-decoration:none;
font-size: 1rem;
}
.drop a{
display:block;
min-width:120px;
height:50px;
text-align: left;
line-height:50px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
color:#fff;
background:#2f3036;
text-decoration:none;
font-size: 1rem;
}
/*Hover state for top level links*/
.nav-li:hover a {
background:#0ab2aa
}
/*Style for dropdown links*/
.nav-li:hover, .nav-ul a {
background:#f3f3f3;
color:#2f3036;
height:40px;
line-height:40px
}
/*Hover state for dropdown links*/
.nav-li:hover, .nav-ul a:hover {
background:#0ab2aa;
color:#fff
}
/*Hide dropdown links until they are needed*/
.nav-li, .nav-ul {
position: absolute;
display:none
}
/*Make dropdown links vertical*/
.nav-li, .nav-ul li {
display:block;
}
/*Prevent text wrapping*/
.nav-li, .nav-ul li a {
width:auto;
min-width:100px;
padding:0 10px
}
/*Display the dropdown on hover*/
.nav-ul li a:hover + .hidden,.hidden:hover {
display:block
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration:none;
color:#fff;
background:#0ab2aa;
text-align:left;
padding: 16px 0;
display:none;
width:100%!important
}
/*Hide checkbox*/
input[type=checkbox] {
display:none
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display:block;
margin:0 auto
}
/*Responsive Styles*/
#media screen and (max-width : 1007px) {
/*Make dropdown links appear inline*/
.nav-ul {
position:static;
display:none;
white-space: initial;
}
/*Create vertical spacing*/
.nav-li {
margin-bottom:1px
}
/*Make all menu links full width*/
.nav-ul li, .nav-li a {
width:100%
}
/*Display 'show menu' link*/
.show-menu {
display:block
}
}
The display is wrong. (No navigation links can be seen in this version, but other versions have different errors)
The html code is:
<div id="menuBackground">
<div id="menuContainer">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button" />
<ul class="nav-ul" id="menu">
<li class="nav-li">Home
</li>
<li class="nav-li">
About
</li>
<li class="nav-li">
Projects
<ul class="hidden">
<li class="drop">Handyman</li>
<li class="drop">Barrhill in Bloom</li>
<li class="drop">Youth Club</li>
<li class="drop">Coffee morning</li>
</ul>
</li>
<li class="nav-li">Hall
</li>
<li class="nav-li">Newsletters
</li>
<li class="nav-li">Meetings
</li>
<li class="nav-li">News
</li>
<li class="nav-li">Contact
</li>
</ul>
</div>
</div>
I know that it is probably something simple, but I keep trying so many different things (I now have 24 versions of the CSS file) and nothing works.
I assume there must be a format for adding a class name to CSS code with multiple elements like li ul li{} but I cannot seem the find the way to do it. Changing it to .nav-li, .nav-ul li{} does not seem to work. This is driving me crazy.
I do hope someone can help.
Many thanks in advance,
Tog
Use the immediate child selector to style only certain nested elements:
You don't actually need classes for the nav-ul and nav-li. If you want to do it only using CSS you can target only selected items using an immediate child selector ">". The immediate child selector will only affect the immediate children. i.e. If you do #menu > li. Only the immediate children(li items) of #menu will receive the styling:
This would mean that you can target the first level nav-li as:
#menu > li {
...styling goes here
}
Also, you can target the second level li as:
#menu > li > ul > li {
...styling goes here
}
This would make sure that your styles are separated for both the nested list elements.
Hope this helps.
If you want to use the nav-ul and nav-li classes on all your lists and list items, there are basically two things you need to do.
First, make sure all the <ul> and <li> elements in your HTML also have the right classes.
For example:
<ul class="hidden">
<li class="drop">Handyman</li>
...changes to
<ul class="nav-ul hidden">
<li class="nav-li drop">Handyman</li>
and so on.
Then you can rename all the ul and li selectors in your CSS to .nav-ul and .nav-li.
For example:
li ul li {
display:block;
}
...changes to
.nav-li .nav-ul .nav-li {
display:block;
}
/* Alternatively, if you prefer */
li .nav-ul li {
display:block;
}
Hope it helps!
I have a fiddle going here:
https://jsfiddle.net/vjdz8kxr/
<div class="span-8 last" id="primary_nav_wrap">
<ul>
<li>
Home
</li>
<li>Knowledge
<ul>
<li>kb1</li>
<li>kb2</li>
<li>kb3</li>
</ul>
</li>
<li>Forums
<ul>
<li>forum1</li>
<li>forum2</li>
<li>forum3</li>
</ul>
</li>
<li>Groups
<ul>
<li>group1</li>
<li>group2</li>
<li>group3</li>
</ul>
</li>
<li>Blogs
<ul>
<li>blog1</li>
<li>blog2</li>
<li>blog3</li>
</ul>
</li>
</ul>
#primary_nav_wrap { float:right; }
#primary_nav_wrap ul { list-style:none; margin:0; padding:0; text-transform: uppercase; }
#primary_nav_wrap ul a { display:block; color:#666666; text-decoration:none; font-weight:600; font-size:14px; line-height:30px; padding:0 15px; font-family:proxima-nova,sans-serif;}
#primary_nav_wrap ul li { float:left; padding:2px; }
#primary_nav_wrap ul li:hover {padding:0; border: 2px solid #efefef; border-bottom:2px solid #ee6129; position:relative; z-index:5; }
#primary_nav_wrap #home ul li:hover {border:2px solid #efefef; border-bottom:2px solid #efefef;}
#primary_nav_wrap ul ul { display:none; position:absolute; left:0; background:#fff; text-transform:none; border:2px solid #efefef; margin-left:-2px; margin-top:0; z-index:-1;}
#primary_nav_wrap ul li:nth-last-child(1) ul { left:-101px;} /* Right Most Menu will pop to left so it doesn't bleed off page*/
#primary_nav_wrap ul ul li {float:none; width:220px; text-align:left;}
#primary_nav_wrap ul ul li:hover {background: #ee6129; text-align:left; border:none; padding:2px; }
#primary_nav_wrap ul ul a { line-height:120%; padding: 5px;}
#primary_nav_wrap ul ul ul { top:0; left:100% }
#primary_nav_wrap ul li:hover > ul { display:block}
Basically, I am trying to make a border around the drop down, minus the part of the border that exists under the main menu's title. In this case, I have made that line Orange, so it is obvious whether this is working.
What I am expecting is that the orange line will show on top of the grey, with the z-index I have in place. I also am assuming that since the elements have a position (absolute or relative) that this should work.
Can anyone see what I am doing wrong here?
Here is a solution assuming the colors are basically staying the same.
Remove the border bottom (orange) on the main menu li:hover (border-bottom:none)
Also remove the z-index of 5 from that CSS Rule
Add a background of white to the selector.
Add a negative margin-top to your child (submenu). You added a negative left margin but there is no negative top.
Or just follow this: https://jsfiddle.net/vjdz8kxr/6/
#primary_nav_wrap ul li:hover {padding:0; border: 2px solid #efefef; border-bottom:none; position:relative; background:white;}
#primary_nav_wrap ul ul { display:none; position:absolute; left:0; background:#fff; text-transform:none; border:2px solid #efefef; margin-left:-2px; margin-top:-2px; z-index:-1;}
EDIT:
To add a little explanation: If you have a parent you want the parent to appear behind the child, the parent cannot have a z-index declaration AT ALL. Even if it is negative. Here is some proof: http://codepen.io/tylerism/pen/NGNxWR
I'm currently designing a Nav menu that includes ul, li and a elements. I'm trying to produce an effect where hovering over an a tag will only change the background color near the text for the link itself instead of the whole li area around it.
HTML:
<nav>
<div class="full_menu">
<ul>
<li>Login</li>
<li>About</li>
<li>FAQ</li>
<li>Blog</li>
<li>Our Team
<ul>
<li>Bob</li>
<li>James</li>
<li>Tom</li>
</ul>
</li><!--End team dropdown -->
</ul>
</div>
CSS:
nav {
margin:0 auto;
text-align:center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display:block;
}
nav ul {
background: #17A74A;
padding:0px;
list-style:none;
position:relative;
display: inline;
border:0px;
}
nav ul li {
float:right;
margin-top:0px;
}
nav ul li a {
display:block;
padding:33px 40px;
color:#000;
text-decoration:none;
font-weight:bold;
font-size:18px;
}
nav ul li a:hover {
background-color:#2D6AF7;
color:#FFF;
}
nav ul ul {
background:#17A74A;
position:absolute;
top:71px;
}
nav ul ul li {
float:none;
border-bottom:1px solid #FFFFFF;
}
nav ul ul li a {
padding:15px 40px;
color:#FFF;
}
nav ul ul li a:hover {
background:#27BCDD;
}
nav ul ul ul {
position:absolute;
left:100%;
top:0;
}
I thought that by using nav ul li a:hover would fix this problem but the whole li area is still changing its background color instead of just the immediate area around the link text.
Any help would be greatly appreciated!
Do you want to achieve following result? I've removed the padding from your <a> elements and added them to the <li> elements instead.
JSFiddle
You need to change the padding to a margin if you don't want the whole thing to change color. Try this:
nav ul ul li a {
margin:15px 40px;
color:#FFF;
}
I have a verticle navigation bar that has options that appear after you hover over the first option. When I have margins to the left, you see a circle bullet point appear before the first bullet. Anyone have a fix for this? I can't seem to fix it.
.nav
{
margin-left: 30px;
}
.nav li {
list-style:none !important;
color:black;
font-size:30px;
text-decoration:none;
}
.nav ul {
padding:0;
margin:0;
background-color: white;
}
.nav ul li {
list-style: none !important;
float:left;
}
li > a
{
background-image: url("media/pics/triangle.png");
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: right -10px;
}
li > a:only-child
{
background-image: none;
list-style-type: none;
}
.nav ul li a {
color:black;
font-size:30px;
text-decoration:none;
}
.nav li a:hover {
}
.nav ul li ul { display:none; } /* Makes the Dropdown menu Hidden by default */
.nav ul li:hover ul { /* Displayes the Dropdown menu when Hovered over the specific navigation item */
z-index:99999;
display:list-item !important;
position:absolute;
}
.nav ul li:hover ul li {
float:none;
list-style:none !important;
}
http://jsfiddle.net/zsPE9/
It's because of display:list-item !important added on :hover of .nav ul li.
You would use display:block, or something other than list-item.
.nav ul li:hover ul {
z-index:99999;
display:block; /* Changed from display:list-item !important */
position:absolute;
}
UPDATED EXAMPLE
Also, you should avoid usage of !important when possible. It essentially removes the cascade nature from CSS.
You have display set on list-item. That is probably what is causing your problem. Instead, maybe use block or inline. See other options here: http://www.w3schools.com/cssref/pr_class_display.asp. Also, next time please just post the code that is causing the issue :).
I want to know if i can get the ul class productnav to dissappear until the mouse hovers over the product button? Also, I want the productnav ul to go off to the side like a normal menu would.
the HTML:
<div class="sidebar1" align="center">
<ul class="nav">
<li>Home</li>
<li>Products</li>
<ul class="productnav">
<li>Products Overview</li>
<li>Unibook Enterprise</li>
<li>Unibook Standard</li>
<li>Univoice 2.0</li>
<li>Univoice lite</li>
<li>Pricing</li>
<li>Demo</li>
</ul>
<li>Solutions</li>
<li>Markets</li>
<li>About UDI</li>
<li>Contact Us</li>
</ul>
Ignore any missing /div tags and such.
The CSS:
ul.nav {
margin-top: 10px;
margin-left: 2px;
list-style: none; /* this removes the list marker */
border-top: 1px solid #FFF; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
ul.nav li {
border-bottom: 1px solid #FFF; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background-color: #CFCFCF;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background-color: #1075C7;
color: #FFF;
}
/*-----------------------------*/
ul.productnav {
margin-top: 10px;
margin-left: 2px;
list-style: none; /* this removes the list marker */
border-top: 1px solid #FFF; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
ul.productnav li {
border-bottom: 1px solid #FFF; /* this creates the button separation */
}
ul.productnav a, ul.productnav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background-color: #CFCFCF;
}
ul.productnav a:hover, ul.productnav a:active, ul.productnav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background-color: #1075C7;
color: #FFF;
}
And remember: I want a basic submenu thing going on; Hover over product, you get the .productnav ul showing up next to the normal stuff. Thanks!
Pure CSS Way
HTML
<ul class="nav">
<li>
Menu 1
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
</ul>
CSS
* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */
Fiddle: http://jsfiddle.net/vMuxA/ (Vertical Menu) http://jsfiddle.net/vMuxA/1/ (Horizontal Menu)
Steve Gibson wrote up an example on how to do css menus. He uses unordered lists.
GRC's Script-Free Pure-CSS Menuing System
/*==============================================================================
GRC multi-level script-free pure-CSS menuing system stylesheet.
This code is hereby placed into the public domain by its author
Steve Gibson. It may be freely used for any purpose whatsoever.
Computed Geometries: with a default 12px font, 1.0em == 12px and
1px == 0.08333em.
Thus, our 98px wide Freeware & Research buttons are 8.166666em wide.
==============================================================================*/
/*====== GLOBAL OVERRIDES FOR MAJOR ITEMS AND DIFFERING BROWSER DEFAULTS =====*/
body { color:#009; background:#fff; font-family: verdana, tahoma, arial, helvetica, sans-serif, MS Sans Serif; }
body, table, img, button, iframe, ul, li { margin:0; padding:0; border:0; }
table { text-align:left; }
iframe { width:0; height:0 }
ul { margin-left:20px; } /* kill default 50px left padding and set 20px */
li { margin-bottom:1em; } /* set default inter-item vertical spacing */
.tightlist li { margin-bottom:0.25em; } /* tighter list for simple bullets */
/* our default page-width div */
.pagecontainer { width:85%; text-align:left; font-size:10pt;}
/*================= STYLES FOR THE GRC MASTHEAD & CONTROLS ==================*/
.menuminwidth0 { /* for all browsers (non-IE) that obey min-width */
position:relative;
border:0;
margin:0;
padding:0;
width:100%;
height:55px;/* 36px masthead height + 18px button height + 1px lower border*/
min-width:560px;
}
/* suppress our whole menu when not an interactive mode (when printing, etc.) */
#media print, projection { .menuminwidth0 { d\isplay:none; } }
* html .menuminwidth1 { /* this allows IE5/6 to simulate min-width capability */
position:relative; /* we can simulate a minimum width by creating a large */
float:left; /* border in this first div, then placing our content */
height: 1px; /* into a second nested div (see 2nd nested div next */
border-left:560px solid #fff; /* CSS box-model borders are a fixed size */
}
* html .menuminwidth2 { /* used to simulate min-width capability for IE5/6 */
position:relative;
margin-left:-560px;
height: 1px;
}
#masthead {
position:relative; /* position our child objects relative to this div */
float:left;
vertical-align:top; /* protect from super-large user text sizing */
border:0;
margin:0;
padding:0;
width:100%; /* grey-fill the entire width */
height:36px; /* set the overall height above the menu-bar */
background:#F3F3F3; /* a very light shade of grey */
}
#mastheadlogo {
float:left;
vertical-align:top;
border:0;
padding:0;
margin:6px 0 0 7px;
}
#focus { /* GRC's focus label */
position:absolute;
border:0;
margin:0;
padding:0;
top:15px;
left:301px;
width:121px;
height:13px;
}
#search { /* search button */
position:absolute;
border:0;
margin:0;
padding:0;
top:7px;
right:6px;
width:60px;
height:19px;
}
#text { /* search text field */
position:absolute;
border:1px solid #404040;
margin:0;
padding:0 0 0 2px;
top:7px;
right:65px;
width:12em;
/* height:1.215em; we'll define this at the bottom of our style sheet */
font-size:14px !important;
background:#fefefe;
}
#yah { /* the "You are here" label graphic */
position:absolute;
top:5px;
right:99px;
width:87px;
height:9px;
}
/*========================= TOP OF THE MENU CASCADE =========================*/
.menu {
position:relative; /* establish a menu-relative positioning context */
float:left; /* play nicely with others */
margin:0;
padding:0;
border:0;
height:18px; /* the menu's overall height */
width:100%; /* we always want our menu to fill the available space */
background:#f3f3f3;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px; /* this (and also below) sets the menu's font size */
border-bottom:1px solid black; /* give us a black border underneath */
}
.menu img {
vertical-align: top; /* prevent images from being pushed down by text */
}
.menu ul {
padding:0;
margin:0;
border:0;
list-style-type:none; /* we don't want to view the list as a list */
line-height:1.5em; /* globally set the menu's item spacing. note */
} /* this must be 1.0 or 1.5 or 2.0 for Mozilla */
.menu li {
float:left; /* this creates the side-by-side array of top-level buttons */
position:relative; /* create local positioning contexts for each button */
margin:0;
}
.menu ul li table {
margin:-1px 0; /* IE5 needs -1px top and bottom table margins */
m\argin:0; /* re-zero the table margins for everyone but IE5 */
border-collapse:collapse; /* IE5 needs this for the sub-menus to work */
font-size:12px; /* this sets the base font size for our entire menu */
}
.drop {
display:block;
padding:0px 0.33em; /* this sets the l/r margins for our menu item */
margin:0;
text-align:right; /* this right alignment goes with the float:left below */
cursor:pointer; /* IE tries to switch back to an I-beam, don't let it */
cursor:hand; /* IE5 only knows about "hand", so set it both ways */
}
.drop span { /* this simultaneously left and right aligns the text and */
float:left; /* the >> in the drop-down menus which link to sub-menus */
}
.rightmenu {
position:relative; /* establish a local positioning context for YAH label */
float:right; /* and right-align it at the top of our page */
}
#research { /* this rightmost "Research" button must be positioned */
position:absolute; /* absolutely so that the YAH (you are here) text */
top:0px; /* label will slide underneath it under Opera v8.54 */
left:364px; /* which has a z-order sequencing bug with abs-pos elements */
}
/*======================== TOP LEVEL MENU DEFINITIONS ========================*/
.menu ul li ul {
display:none; /* initially hide the entire list hierarchy */
padding:1px; /* this is our box border width */
}
.menu ul li a,
.menu ul li a:visited { /* unselected top-level menu items */
display:block;
float:left;
text-decoration:none;
height:18px;
}
.menu ul li:hover a,
.menu ul li a:hover { /* selected top-level menu items */
border-top:1px solid #000; /* these 2 lines create the push-in illusion */
height:16px;
}
/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/
.menu ul li:hover ul,
.menu ul li a:hover ul { /* 2nd level drop-down box */
display:block;
position:absolute;
margin:0;
top:18px; /* place us just up underneath the top-level images */
left:-1px; /* left-align our drop-down to the previous button border */
height:auto; /* the drop-down height will be determiend by line count */
width:13.5em;
color:black; /* this sets the unselected-text color */
background:black; /* this sets our menu's effective "border" color */
}
.menu ul li:hover ul.leftbutton,
.menu ul li a:hover ul.leftbutton {/* our first dropdown should not be skewed */
left:0px;
}
.menu ul li:hover ul.skinny,
.menu ul li a:hover ul.skinny { /* 2nd level skinny drop-down box */
width:8.08333em; /* with a 12px default font, this is 97px width (97/12) */
}
.menu ul.rightmenu li:hover ul,
.menu ul.rightmenu li a:hover ul { /* 2nd level neighborhood drop-down box */
left:auto;
right:0; /* nudge the right menu right to line up under the border */
}
* html .menu ul.rightmenu li a:hover ul { /* IE5/6 needs a tweak here */
right:-1px;
}
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a { /* 2nd level unselected items */
border:0;
margin:0;
padding:0;
height:auto;
color:#000; /* this sets the unselected drop-down text color */
background:#d8d8d8; /* this sets the drop-down menu background color */
width:13.5em;
}
.menu ul li:hover ul li:hover a,
.menu ul li a:hover ul li a:hover { /* 2nd level selected item */
color:black;
background:white;
}
.menu ul li:hover ul.skinny li a,
.menu ul li a:hover ul.skinny li a,
.menu ul li:hover ul.skinny li a:hover,
.menu ul li a:hover ul.skinny li a:hover { /* 2nd level un+selected items */
width:8.08333em;
}
/*======================== 3RD LEVEL MENU DEFINITIONS ========================*/
.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul { /* hide inactive 3rd-level menus */
visibility:hidden;
}
.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul { /* 3rd level drop-down box */
visibility:visible;
position:absolute;
margin-top:-1px; /* bring the top edge of the 3rd level menu up one */
top:0;
left:8.08333em;
width:14em;
}
.menu ul li:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a { /* 3rd level unselected items */
width:14em;
background:#d8d8d8;
}
.menu ul li:hover ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover ul li a:hover { /* level3 selected items */
width:14em;
background:white;
}
#text { /* the Mac's standard Safari browser will not see this code */
height:1.215em;# /* ... but every other browser will and should */
} /* Safari barfs on the illegal pound sign (#) after the rule's property val */
With ul.menu being the parent of all the others, but differing from your html approach in this : the submenus (ul tags) are inside a parent's menu item (li tag), which is more consistent with html requirements (a w3 recommendation, a question, or just test it in the validator).
So your example would become the following :
<div class="sidebar1" align="center">
<ul class="nav">
<li>Home</li>
<li>Products
<ul class="productnav">
<li>Products Overview</li>
<li>Unibook Enterprise</li>
<li>Unibook Standard</li>
<li>Univoice 2.0</li>
<li>Univoice lite</li>
<li>Pricing</li>
<li>Demo</li>
</ul>
</li>
<li>Solutions</li>
<li>Markets</li>
<li>About UDI</li>
<li>Contact Us</li>
</ul>
And the css I would use (even though you could strip the sizes, as long as they're all the same, I think) :
.nav li
{
position:relative;
float:left;
width:180px;
height:30px;
padding:0;
margin:0;
list-style: none;
}
.nav ul
{
display:none;
position:absolute;
padding:0;
margin:5px 0 0 0;
}
.nav ul li ul
{
left:100%;
top:0;
margin:0px;
}
/* hiding or showing on second generations */
.nav li:hover ul ul, .nav li:hover ul ul ul
{
display: none;
}
.nav li:hover ul, .nav ul li:hover ul, .nav ul ul li:hover ul
{
display: block;
}
This works on up to three recursive levels of uls in your ul.nav, but you could expand it as much as you'd want by modifying the selectors of the two last css blocks.
But I still think that replacing the :hover with a .over class that appears on hover with hover events in javascript gives a better feeling, because you can set a timeout to keep the menu shown for a short moment after having hovered it. Allows for more natural moves with your pointer when navigating to a sub-menu, with the css approach you have to stay inside the li tags.