I am trying to build a pure CSS hover menu and I having two issues with my current code.
When the user hovers over an li tag with a sub-menu ul tag, it push the item up instead of hovering below.
The sub-menu ul tag is not taking the width of the parent li tag
Here is the source code:
You can also see a working copy of the code here: http://jsfiddle.net/Fbgug/
HTML:
<ul id="subnav">
<li class="subnavtab">
Plan Your Visit
<ul class="sub-menu">
<li>Fee and Hours</li>
<li>Directions</li>
<li>Field Trips</li>
<li>Birthday Parties</li>
<li>Rentals</li>
</ul>
</li>
<li class="subnavtab">
Tour the Museum
<ul class="sub-menu">
<li>Artville</li>
<li>ArtZone</li>
<li>Exhibitions</li>
</ul>
</li>
<li class="subnavtab">
Program & Events
<ul class="sub-menu">
<li>Weather or Not</li>
<li>Classes & Workshops</li>
</ul>
</li>
<li class="subnavtab">Membership</li>
<li class="subnavtab">Donate</li>
</ul>
CSS:
#subnav { margin-top: 20px; width: 740px; float: left; position: relative; }
.subnavtab { background-color: #A1CD3A; padding: 10px 10px 10px 10px; margin: 0 1px 0 1px; display: inline-block;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
-webkit-border-radius-topright: 15px; -moz-border-radius-topright: 15px; border-top-right-radius: 15px;
-webkit-border-radius-topleft: 15px; -moz-border-radius-topleft: 15px; border-top-left-radius: 15px;
border-radius: 15px 15px 0px 0px;
behavior: url(pie.htc);
}
.subnavtab:first-child { margin-right: 3px; margin-left: 0px; }
.subnavtab:last-child { margin-right: 0px; margin-left: 3px; }
.subnavtab a { color: #000; text-decoration: none; font-weight: bold; font-size: large; }
.subnavtab a:hover { color: #fff; text-decoration: none; font-weight: bold; font-size: large; }
#subnav ul.sub-menu
{
display: none;
position: relative;
left: -10px;
padding: 10px;
z-index: 90;
list-style-type: none;
margin-left: 5px;
}
#subnav ul.sub-menu li { text-align: left; }
#subnav li:hover ul.sub-menu { display: block; background-color: #A1CD3A;
-webkit-border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-left-radius: 15px;
border-radius: 0px 0px 15px 15px;
behavior: url(pie.htc);
}
#subnav ul.sub-menu a { color: #000; text-decoration: none; font-weight: bold; font-size: small; }
#subnav ul.sub-menu a:hover { color: #fff; text-decoration: none; font-weight: bold; font-size: small; }
Since your li elements have display: inline-block adding vertical-align: top; should do the trick:
.subnavtab {
...
vertical-align: top;
}
http://jsfiddle.net/Fbgug/1/
Add vertical-align: top; to .subnavtab.
EDIT: dfsq beat me to it.
Related
My navbar is not centering properly and it's driving me nuts - there's slightly more white space on the left side of it. Thank you so much in advance. Here is the code
HTML:
<div class="navbar">
<ul class="navitems">
<li>
<a class="current" href="index.html">Home</a>
</li>
<li>
Podcasts
</li>
<li>
Articles
</li>
<li>
Merch
</li>
<li>
About Us
</li>
</ul>
</div>
CSS:
body {
margin:0
}
.navbar {
text-align: center;
border: 1px solid black;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.navitems ul {
list-style: none;
}
.navitems li {
display: inline-block;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-right: 3%;
padding-left: 3%;
border: 1px solid blue;
width: 12%;
font-size: 20px;
}
.navitems a {
color: black;
text-decoration: none;
font-family: georgia;
}
.navitems li:hover a{
transition: all ease-in-out .5s;
color: #f88122;
text-decoration: underline;
}
<ul> tag has got default padding-inline-start style so it is needed to reset that value.
To align items in the middle, it is needed to set vertical-align: middle on <li> items.
.navitems ul indicates the <ul> selector inside .navitems selector. And from your html code, you should change it to ul.navitems.
Below is the working snippet.
body {
margin: 0
}
.navbar {
text-align: center;
border: 1px solid black;
width: 100%;
margin-left: auto;
margin-right: auto;
}
ul.navitems {
list-style: none;
padding-inline-start: 0;
}
.navitems li {
display: inline-block;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-right: 3%;
padding-left: 3%;
border: 1px solid blue;
width: 12%;
font-size: 20px;
vertical-align: middle;
}
.navitems a {
color: black;
text-decoration: none;
font-family: georgia;
}
.navitems li:hover a {
transition: all ease-in-out .5s;
color: #f88122;
text-decoration: underline;
}
<div class="navbar">
<ul class="navitems">
<li><a class="current" href="index.html">Home</a></li>
<li>Podcasts</li>
<li>Articles</li>
<li>Merch</li>
<li>About Us</li>
</ul>
</div>
If you check your code, you will find that your selector is wrong in the .navitems you don't need to add ul and there is padding-left for ul, so the padding should be zero.
Good luck
body {
margin:0
}
.navbar {
text-align: center;
border: 1px solid black;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.navitems { /* Change the css selector */
list-style: none;
padding: 0 !important; /* Add this line */
}
.navitems li {
display: inline-block;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-right: 3%;
padding-left: 3%;
border: 1px solid blue;
width: 12%;
font-size: 20px;
}
.navitems a {
color: black;
text-decoration: none;
font-family: georgia;
}
.navitems li:hover a{
transition: all ease-in-out .5s;
color: #f88122;
text-decoration: underline;
}
<div class="navbar">
<ul class="navitems p-0">
<li><a class="current" href="index.html">Home</a></li><li>Podcasts</li><li>Articles</li><li>Merch</li><li>About Us</li>
</ul>
</div>
There is a navigation menu, the design is as given in the image below.
Now, when I hover on About Us sub-menu gets open.
But when I try to move the cursor to the sub-menu item, the sub-menu gets closed - the reason being that hover is being removed from li.
I want the menu to remain open till the cursor reaches the sub-menu item.
Please Note:The space between Menu and sub-menu has to be kept as it is (As indicated with red border in the image above).
You can find the link to the code, here
Any help would be appreciated!
A quick solution:
ul#nav li:hover > ul {margin: 40px 0 0 0; border-top: 10px solid #b58d69; }
Cheers!
You have to make li a bit higher, so it will cover free space between sub-menu and this particular li a. The simplest solution was in this case to add margin to main a tag inside li. There will be more solutions how to achieve this effect (adding padding inside li and applying background-color to a tag), but this one is the fastest one.
Search for "added" and "changed" notes in css below
#menu {
width: 960px;
height: 40px;
clear: both;
}
ul#nav {
float: left;
width: 960px;
margin: 0;
padding: 0;
list-style: none;
background: #b58d69 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li {
display: inline-block; /*changed*/
padding-bottom: 10px; /*added*/
position: relative; /*added*/
}
ul#nav li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
margin: 0;
padding: 0px 20px;
background: #b58d69 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li a.plus_a { /*added*/
position: absolute;
}
ul#nav .current a, ul#nav li:hover > a {
color: #b58d69;
text-decoration: none;
background: #30251b;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav ul {
display: none;
}
ul#nav li:hover > ul {
position: absolute;
width: 920px;
height: 45px;
position: absolute;
margin: 50px 0 0 0;
background: #fff;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 45px;
color: #b58d69;
text-decoration: none;
margin: 0;
padding: 0 20px 0 0;
background: #fff;
}
ul#nav li:hover > ul li a:hover {
color: #30251b;
text-decoration: none;
text-shadow: none;
}
ul#nav li:hover > ul {
display:block !important;
}
I have done something like what you are asking for and this might give you an idea. Saw it in a tutorial on youtube fro css only drop down. You could use the idea behind this to solve your problem. But this works for when user clicks on the link.
.fixed-nav-container {
height: 90px;
width: 100%;
background-color: #111;
position: fixed;
z-index: 16;
}
.fixed-nav-container:hover {
opacity: 1;
}
.fixed-nav .active {
padding: 23px 0px;
background-color: #2a2730;
box-shadow: inset 0 3px 7px black;
}
.fixed-nav {
width: 100%;
height: 70px;
font-family: Arial, Helvetica, sans-serif;
}
.fixed-nav ul {
display: block;
text-align: center;
}
.fixed-nav ul li {
display: inline-block;
padding: 20px 15px;
font-weight: bold;
width: 15%;
border-right: 2px solid #2a2730;
}
.fixed-nav ul li:last-child {
border-right: 0px;
}
.fixed-nav ul li a {
text-decoration: none;
color: silver;
transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
padding: 10px 0px;
}
.fixed-nav ul li a:hover {
font-size: medium;
transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
}
.fixed-nav-content {
position: absolute;
top: 70px;
overflow: hidden;
background-color: #111111;
color: #FFFFFF;
max-height: 0px;
}
.fixed-nav-content a {
text-decoration: none;
color: #FFFFFF;
}
.fixed-nav-content a:hover {
background-color: silver;
box-shadow: inset 0 3px 7px black;
color: #2a2730;
}
.fixed-nav-content:active {
max-height: 400px;
}
.fixed-nav-sub ul {
padding: 0px;
list-style-type: none;
text-align: left;
}
.fixed-nav-sub ul li {
width: 20%;
}
.fixed-nav-sub ul li a {
padding: 10px;
display: inline-block !important;
background-color: #2a2730;
box-shadow: inset 0 3px 7px black;
}
.nav-item:focus {
background-color: #2a2730;
padding: 10px;
box-shadow: inset 0 3px 7px black;
}
.nav-item:hover ~ .fixed-nav-content {
max-height: 400px;
transition: max-height 0.4s linear;
}
<div class="fixed-nav-container">
<nav class="fixed-nav">
<ul>
<li>
About
<div class="fixed-nav-content">
<div class="fixed-nav-sub">
<ul>
<li>About Us</li>
<li>Meet The team</li>
<li>Recent Projects</li>
</ul>
</div>
</div>
</li>
<li>
Services
<div class="fixed-nav-content">
<div class="fixed-nav-sub">
<ul>
<li>Civil Works</li>
<li>Electrical</li>
<li>Water Engineering</li>
<li>Telecoms</li>
<li>Info. Technology</li>
<li>Renewable Energy</li>
<li>Consulting</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
I've checked some web pages I've developed. There are some css problems for li width.
Here is the code for the navigation menu:
ul.tabs {
padding: 0px;
list-style: none;
background: transparent;
border-bottom: 3px solid #ff6600;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
text-align: center;
position: relative;
width: 100%;
}
ul.tabs li {
background-color: #ff6600;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: none;
color: #f5ede3;
display: inline-block;
padding: 5px 15px;
cursor: pointer;
margin-left: 0px;
width: 16%;
text-align: center;
}
ul.tabs li.current {
background: #f5ede3;
color: #ff6600;
}
<ul class="tabs">
<li data-tab="tabs-1" class="current">Amenities</li>
<li data-tab="tabs-5">Attractions</li>
<li data-tab="tabs-2">Rates</li>
<li data-tab="tabs-6">Calendar</li>
<li data-tab="tabs-4">Reviews</li>
<li data-tab="tabs-3">Inquire</li>
</ul>
But I get the following result:
The width of the li tag is 16%. And the number of li is 6. Why is the total width of li tags larger than the ul width?
Set box-sizing: border-box globally as a quick fix - see demo below:
*{
box-sizing: border-box;
}
ul.tabs {
padding: 0px;
list-style: none;
background: transparent;
border-bottom: 3px solid #ff6600;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
text-align: center;
position: relative;
width: 100%;
}
ul.tabs li {
background-color: #ff6600;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: none;
color: #f5ede3;
display: inline-block;
padding: 5px 15px;
cursor: pointer;
margin-left: 0px;
width: 16%;
text-align: center;
}
ul.tabs li.current {
background: #f5ede3;
color: #ff6600;
}
<ul class="tabs">
<li data-tab="tabs-1" class="current">Amenities</li>
<li data-tab="tabs-5">Attractions</li>
<li data-tab="tabs-2">Rates</li>
<li data-tab="tabs-6">Calendar</li>
<li data-tab="tabs-4">Reviews</li>
<li data-tab="tabs-3">Inquire</li>
</ul>
With this should work:
ul.tabs li{
background-color: #ff6600;
border-top-left-radius:5px;
border-top-right-radius:5px;
border:none;
color: #f5ede3;
display: inline-block;
padding: 5px 15px;
cursor: pointer;
margin-left:0px;
width:16%;
text-align:center;
box-sizing: border-box;// Try adding this line (:
}
Why does the second and third submenu expand start from another position than the first two menus? I want every menu to start at det same place and end at the same place with a width of 95%.
<html>
<head>
<style>
// css
#menu {
width: 960px;
height: 40px;
clear: both;
}
ul#nav {
float: left;
width: 95%;
margin: 0;
padding: 0;
list-style: none;
background: #0066ff;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li {
display: inline;
}
ul#nav li a {
float: left;
font: bold 1.1em arial,verdana,tahoma,sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #880000;
margin: 0;
padding: 0 30px;
background: #0066ff;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
/* APPLIES THE ACTIVE STATE */
ul#nav .current a, ul#nav li:hover > a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #330000;
background: #abcdef;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav ul {
display: none;
}
/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
display: block;
width: 95%;
height: 45px;
position: absolute;
margin: 40px 0 0 0;
background: #abcdef;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial,verdana,tahoma,sans-serif;
line-height: 45px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #110000;
margin: 0;
padding: 0 30px 0 0;
background: #abcdef;
}
ul#nav li:hover > ul li a:hover {
color: #120000;
text-decoration: none;
text-shadow: none;
}
</style>
</head>
<body>
<div id="menu">
<ul id="nav">
<li>Menu 1
<ul>
<li>Menu 1 Submenu item 1</li>
<li>Menu 1 Submenu item 2</li>
<li>Menu 1 Submenu item 3</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Menu 2 Submenu item 1</li>
<li>Menu 2 Submenu item 2
<ul>
<li>Menu 2 Submenu 2 item 1</li>
<li>Menu 2 Submenu 2 item 2
<ul>
<li>Menu 2 Submenu 2 item 1</li>
<li>Menu 2 Submenu 2 item 2</li>
</ul>
</li>
</ul>
</li>
<li>Menu 2 Submenu item 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Menu 3 Submenu item 1</li>
<li>Menu 3 Submenu item 2</li>
<li>Menu 3 Submenu item 3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I have tried to change the margins and other values to, but cant find it. Do you know why?
Since the position of the ul element is absolute, I added left: 0 to it, which keeps them all opening in the same position.
Here's the bit I changed:
ul#nav li:hover > ul {
display: block;
left: 0; /* added to keep positioning the same */
max-width: 960px; /* set the max width of the submenu(s) */
width: 100%; /* set to 100% */
height: 45px;
position: absolute;
margin: 40px 0 0 0;
background: #abcdef;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
And here's a jsfiddle of it.
Edit:
To make everything work the way you want you'll have to change a few more things, you'll want to set all margins in the body to be 0. Also, again the width is set to 960px if you want to adjust that to be smaller adjust that pixel size instead of using percentages.
body {
margin: 0; /* to remove margins */
}
#menu {
width: 960px;
height: 40px;
clear: both;
}
ul#nav {
float: left;
width: 100%; /* this needs to be 100% if you want to adjust the size, adjust above where it says 960px */
margin: 0;
padding: 0;
list-style: none;
background: #0066ff;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li {
display: inline;
}
ul#nav li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #880000;
margin: 0;
padding: 0 30px;
background: #0066ff;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
/* APPLIES THE ACTIVE STATE */
ul#nav .current a,
ul#nav li:hover > a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #330000;
background: #abcdef;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav ul {
display: none;
box-sizing: border-box; /* needed to help margins */
}
/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
display: block;
left: 0; /* added to keep positioning the same */
max-width: 960px; /* set the max width of the submenu(s) */
width: 100%; /* set to 100% */
height: 45px;
position: absolute;
margin: 40px 0 0 0;
background: #abcdef;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 45px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #110000;
margin: 0;
padding: 0 30px 0 0;
background: #abcdef;
}
ul#nav li:hover > ul li a:hover {
color: #120000;
text-decoration: none;
text-shadow: none;
}
And here's the fiddle of the updated changes.
SEE THE DEMO
Here's the CSS you need to add/update:
body {
margin: 0;
}
ul#nav {
width: 100%;
}
ul#nav ul {
box-sizing: border-box;
}
ul#nav li:hover > ul {
left: 0;
max-width: 960px;
width: 100%;
}
I have a drop down ul menu that is working in every browser except IE8. I have tried messing with the Z-index but haven't had much luck. When the user hovers over the first element, there is it displays the 2nd list as a drop down but then once the user tries to navigate to it, it disappears. Is there something else that I may be missing? Please help.
Here is the generated HTML:
<div id="topNav" class="topNavMenu">
<ul>
<li>Home</li>
<li><a rel="submenu1">Account Information</a></li>
<li><a rel="submenu2">Financial</a></li>
<li><a rel="submenu3">Pricing</a></li>
<li><a rel="submenu4">Operations</a></li>
<li><a rel="submenu5">Support</a></li>
<li><a rel="submenu6">Document Management</a></li>
<li><a rel="submenu7">Administration</a></li>
</ul>
<ul id="submenu1" class="ddsubmenustyle">
<li>Bill To/Ship To Search</li>
<li>Customer Account Information</li>
</ul>
<ul id="submenu2" class="ddsubmenustyle">
<li>Statement Search</li>
</ul>
<ul id="submenu3" class="ddsubmenustyle">
<li>Price Notification Summary</li>
</ul>
<ul id="submenu4" class="ddsubmenustyle">
<li>Online Environmental Compliance</li>
</ul>
<ul id="submenu5" class="ddsubmenustyle">
<li>Manage Profile</li>
<li>Administrative Interfaces</li>
</ul>
<ul id="submenu6" class="ddsubmenustyle">
<li>HES</li>
<li>Marketing Services</li>
<li>Sunoco University Classes</li>
<li>Credit Card Program Information</li>
</ul>
<ul id="submenu7" class="ddsubmenustyle">
<li>Create a New User</li>
<li>User Administration</li>
<li>Create a New Role</li>
<li>Maintain Menu Items</li>
<li>Refresh Menu</li>
</ul>
</div>
and the CSS:
/* Top navigation menu
topNavMenu = the class used on the menu div.
ddsubmenustyle = dropdown div css.
-----------------------------------------------------------*/
.topNavMenu ul
{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
background: #C3C9D9; /* #153371 */
overflow: hidden;
width: 100%;
background-image:url(../images/menu_bg.png);
height:35px;
float:left;
}
.topNavMenu li
{
display: inline;
margin: 0;
z-index: 100;
}
.topNavMenu li a
{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 0px 10px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: black;
background: #6c94b0; /* #153371 */
background-image:url(../images/menu_bg.png);
height:35px;
line-height:35px;
font-family:Verdana, Arial, Helvetica, sans-serif;
/*font-size:10px;*/
}
.topNavMenu li a:visited
{
color: black;
}
.topNavMenu li a:hover
{
background:#4D77A7; /*background of tabs for hover state */
color:White;
text-decoration:bold;
}
.topNavMenu a.selected
{
background: #4D77A7; /*background of tab with "selected" class assigned to its LI */
color:White;
}
.ddsubmenustyle, .ddsubmenustyle div
{ /*topmost and sub DIVs, respectively*/
font: normal 12px Verdana;
margin: 0;
font-weight:bold;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border-bottom-width: 0;
visibility: hidden;
z-index: 300;
}
.ddsubmenustyle ul
{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
z-index: 300;
}
.ddsubmenustyle li a
{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: white;
background-color: #aec6f6;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid white;
background-color:#4D77A7;
line-height:24px;
z-index: 300;
}
.ddsubmenustyle li ul li a, .ddsubmenustyle li ul li:first-child a
{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: white;
background-color: #aec6f6;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid white;
background-color:#4D77A7;
line-height:24px;
background-image:none;
-moz-border-bottom-radius: none;
-webkit-border-bottom-radius: none;
-khtml-border-bottom-radius: none;
border-bottom-radius: none;
}
.ddsubmenustyle li:first-child a
{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: white;
background-image:url(../images/arrow_first-child.png);
background-repeat:no-repeat;
background-position:top left;
background-color: #4D77A7;
text-decoration: none;
padding: 16px 5px 4px 5px;
border-bottom: 1px solid white;
background-color:#4D77A7;
}
.ddsubmenustyle li ul li:last-child a
{
-moz-border-bottom-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-khtml-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
-moz-border-bottom-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-khtml-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: none;
}
.ddsubmenustyle li ul li a:hover
{
background-color:#4D77A7;
color: 40638A;
line-height:24px;
}
.ddsubmenustyle li:last-child a
{
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
}
* html .ddsubmenustyle li
{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover
{
background-color:#38587C;
color: white;
line-height:24px;
}
/* Neutral CSS */
.downarrowpointer
{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer
{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim
{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
I tried to view this in Chrome but couldn't get it to work properly. Why are the sub-menus separate ul's? Perhaps you could try a nested list, like this:
<nav>
<ul class="top-nav">
<li>
Item 1
<ul class="sub-nav">
<li>Item 1a</li>
<li>Item 1b</li>
<li>Item 1c</li>
</ul>
</li>
<li>
Item 2
<ul class="sub-nav">
<li>Item 2a</li>
<li>Item 2b</li>
<li>Item 2c</li>
</ul>
</li>
</ul>
</nav>
And here's some CSS to make it work:
* {
margin: 0;
padding: 0;
list-style: none;
color: inherit;
text-decoration: none;
}
body {
font-family: sans-serif;
}
nav {
margin: 0 auto;
}
.sub-nav {
display: none;
}
.sub-nav li {
background: #333;
color: #fff;
padding: 4px 2px;
border-bottom: 1px solid #e0e0e0;
}
.top-nav {
overflow: hidden;
}
.top-nav > li {
float: left;
width: 100px;
padding: 4px 0;
background: #e0e0e0;
}
.top-nav > li:hover ul {
display: block;
}
Just tested in Chrome and IE, and worked fine.