I'm having serious issues with IE, I have a simple menu which shows correctly in Firefox and Chrome, but IE is a pain in the ass..
It seems that IE doesn't show the <li> tag properly, so my dropdown menu doesn't work in IE.
Can someone help me out?
This is my JsFiddle: http://jsfiddle.net/PE597/
This is the complete code for the menu, if you copy - paste this then you could see what I mean.
<style type="text/css">
#cssmenu{
border-bottom:1px solid #efefcf;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
color:8e8e8e;
width:1000px;
clear:both;
}
#cssmenu ul{
background:url(images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px 8px 0px 8px;
display: inline;
}
#cssmenu li a{
color:#000000;
*display:inline-block;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
display: inline;
}
#cssmenu li a:hover{
color:#000000;
text-decoration:none;
display: inline;
}
#cssmenu li ul{
background:#FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:175;
z-index:200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
display:block;
padding:0px;
width:225px;
}
#cssmenu li ul a{
display:block;
font-size:12px;
font-style:normal;
text-align:left;
width:200px;
}
#cssmenu li ul a:hover{
background:#f7cab9;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
width:125px;
float:left;
}
#cssmenu p{
}
#cssmenu .active > a{
background:url(images/current-bg.gif) top left repeat-x;
color:#ffffff;
}
#cssmenu .active > a:hover {
color:#ffffff;
}
/** breadcrumb **/
ul.sf-menu, ul.sf-menu ul{display:block;margin:0;padding:0}
ul.sf-menu li{padding:0;list-style:none;margin:0;padding:0px 28px;float:left; display:inline;}
ul.sf-menu li.first{padding-left:0px}
ul.sf-menu a{font-size:12px;color:black;display:block;text-transform:uppercase}
ul.sf-menu ul{position:absolute;top:35px;width:170px;border:1px solid #626165;padding:10px 0px;background:white}
ul.sf-menu ul a{font-size:12px;text-transform:none;width:150px;padding:2px 10px}
ul.sf-menu ul li{padding:0px;display:block;position:relative;float:none;width:170px}
ul.sf-menu ul a:hover, ul.sf-menu ul li.sfHover a{background:#f7cab9}
ul.sf-menu ul ul{position:absolute;z-index:10;left:162px;top:5px}
ul.sf-menu ul li.sfHover ul a{background:none}
ul.sf-menu ul li.sfHover ul a:hover, ul.sf-menu ul li.sfHover ul li.sfHover a{background:#f7cab9}
</style>
<div id="cssmenu">
<?php
echo "<ul class='sf-menu'>
<li class='first'>
<a title='Dashboard' href='index.php?page=dashboard&user=".$_SESSION['username']."'>Dashboard</a>
<ul>
<li class=''>
<a title='Nieuwe call' href='index.php?page=new_call&user=".$_SESSION['username']."'>Nieuwe Call</a>
</li>
</ul>
</li>
<li class=''>
<a title='Contact' href='index.php?page=contact&user=".$_SESSION['username']."'>Contact</a>
</li>
<li class=''>
<a title='Uitloggen' href='index.php?action=logout&user=".$_SESSION['username']."'>Uitloggen</a>
</li>
</ul>";
?>
</div>
You needed to add <!DOCTYPE html> to the top of your file, because IE depends on a doctype to know which rendering engine to use.
Related
I'm working on old Wordpress page created with myMag theme, and i after centering menu to fill whole menu space, i have troubles with drop down menu.
I'm new in CSS and maybe you could say where I did a mistake?
menu before:
menu after:
inspecting the drop down element shows this:
<ul class='children'>
<li class="page_item page-item-187">Progetti di formazione</li>
<li class="page_item page-item-183">Progetti di mobilità</li>
<li class="page_item page-item-185">Progetti pilota</li>
<li class="page_item page-item-168">Ricerche e studi</li>
</ul>
the css looks like this:
#navcontainer #navbar {
float:left;
height: 51px;
line-height:50px;
margin-left: -15px;
margin-top: 1px;
}
#navbar, #navbar ul {
margin:0;
padding:0;
width:900px;
list-style-type:none;
display: table;
position:relative;
line-height:50px;
z-index:5;
}
#navcontainer #navbar a {
height: 40px;
display:block;
padding:0 21px;
text-decoration:none;
text-align:center;
line-height:28px;
outline:none;
float: left;
z-index:35;
position:relative;
color: #FFF;
text-shadow:1px 1px 0 #515151;
font-weight: bold;
vertical-align: middle;
}
#navcontainer #navbar a:hover {
color: #CCC;
}
#navcontainer #navbar ul a {
line-height: 30px;
}
#navcontainer #navbar li {
z-index:20;
text-align: center;
display: table-cell;
font-size: 13px;
vertical-align: bottom;
}
#navcontainer #navbar li li {
border-left:none;
margin-top:0;
}
#navcontainer #navbar ul {
position:absolute;
display:none;
width:172px;
top:38px;
left:-1px;
background: #f5f5f5;
}
#navcontainer #navbar li ul a {
width:130px;
height:auto;
float:left;
text-align:left;
padding:0 21px;
color: #606060;
text-shadow: none;
}
#navcontainer #navbar ul ul {
top:auto;
}
#navcontainer #navbar li ul ul {
left:172px;
top: 0px;
}
#navcontainer #navbar li ul ul a {
border-left:1px solid #CCC;
}
#navcontainer #navbar ul {
border-top:none;
}
#navcontainer #navbar ul a, #navcontainer #navbar ul li {
background-color:#e7e7e7;
}
#navcontainer #navbar ul a:hover, #navcontainer #navbar ul a:focus {
color: #18649a;
}
#navcontainer #navbar li:hover ul ul, #navcontainer #navbar li:hover ul ul ul,#navcontainer #navbar li:hover ul ul ul ul {
display:none;
}
#navcontainer #navbar li:hover ul, #navcontainer #navbar li li:hover ul, #navcontainer #navbar li li li:hover ul, #navcontainer #navbar li li li li:hover ul {
display:block;
}
and php file that creates this menu looks like this:
<div id="navcontainer">
<div class="navigation">
<div class="wrapper">
<ul id="navbar">
<?php $exclude = $myOptions['pages_excl'];?>
<?php if(!$myOptions['pages_limit']) {
$limit = '10'; } else {
$limit = $myOptions['pages_limit'];
}
if($myOptions['pages_limit'] == '0') {
$limit = 0;
}
?>
<li>Home</li>
<?php wp_list_pages("exclude=$exclude&title_li=&depth=3&number=$limit");?>
</ul>
</div>
</div>
</div>
You will need to set
ul ul{
width: 100px;/*or whatever you want for the drop downs width*/
}
ul ul li {
display: block;
}
As there is a width set in just one UL of 900px you can overwrite to ensure constraint. Adding the display block to the LI's causes then to display on top of each other as they take full width of parent up.
I have an existing CSS that only shows a two level menu. I want to add a third level but I'm out of ideas. Could soeone please assist me on what i need to add to the CSS. Below is the current code.
#topnav{
display:block;
float:left;
//width:660px;
margin:0;
padding:0;
list-style:none;
font-size:10px;//was 13
font-weight:normal;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#000000;
}
#topnav ul, #topnav li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
display:block;
margin:0;
padding:15px 20px;
color:#FFFFFF;
background-color:#000000;
}
#topnav ul ul li a:link, #topnav ul ul li a:visited{
border:none;
}
#topnav li.last a{
margin-right:0;
}
#topnav li a:hover, #topnav ul li.active a{
color:#FFFFFF;
background-color:#059BD8;
}
#topnav li li a:link, #topnav li li a:visited{
//width:150px;
float:none;
margin:0;
padding:7px 10px;
font-size:12px;
font-weight:normal;
color:#FFFFFF;
background-color:#000000;
}
#topnav li li a:hover{
color:#FFFFFF;
background-color:#059BD8;
}
#topnav li ul{
background:#FFFFFF;
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
border-left:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
}
#topnav li ul a{width:140px;}
#topnav li ul ul{margin:-32px 0 0 0;}
#topnav li:hover ul ul{left:-999em;}
#topnav li:hover ul, #topnav li li:hover ul{left:auto;}
#topnav li:hover{position:static;}
#topnav li.last a{margin-right:0;}
Here is the HTML
<div id="topnav">
<ul>
<li <?php if($menu== 0) { echo "class='active'"; } ?>>
Home
</li>
<li class="last">
Set Up
<li class="last">
EMR
<ul>
<li class="last" >
Out-Patient
</li>
<ul>
<li>
Registration
</li>
<li>
File Edition
</li>
</ul>
<li>In-Patient</li>
</ul>
</div>
The two sub-menus under out-patient (Registration & File Edition) are not showing.
Thanks.
You need to close a few elements correctly and also the CSS for your solution is:
#topnav li li:hover ul {left: 160px; margin-top: -3em;}
Closed and corrected HTML:
<div id="topnav">
<ul>
<li>Home</li>
<li class="last">Set Up</li>
<li class="last">EMR
<ul>
<li class="last" >Out-Patient
<ul>
<li>Registration</li>
<li>File Edition</li>
</ul>
</li>
<li>In-Patient</li>
</ul>
</li>
</ul>
</div>
Working Snippet
#topnav{
display:block;
float:left;
margin:0;
padding:0;
list-style:none;
font-size:10px;//was 13
font-weight:normal;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#000000;
}
#topnav ul, #topnav li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
display:block;
margin:0;
padding:15px 20px;
color:#FFFFFF;
background-color:#000000;
}
#topnav ul ul li a:link, #topnav ul ul li a:visited{
border:none;
}
#topnav li.last a{
margin-right:0;
}
#topnav li a:hover, #topnav ul li.active a{
color:#FFFFFF;
background-color:#059BD8;
}
#topnav li li a:link, #topnav li li a:visited{
//width:150px;
float:none;
margin:0;
padding:7px 10px;
font-size:12px;
font-weight:normal;
color:#FFFFFF;
background-color:#000000;
}
#topnav li li a:hover{
color:#FFFFFF;
background-color:#059BD8;
}
#topnav li ul{
background:#FFFFFF;
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
border-left:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
}
#topnav li ul a{width:140px;}
#topnav li ul ul {margin:-32px 0 0 0;}
#topnav li:hover ul ul{left:-999em;}
#topnav li:hover ul, #topnav li li:hover ul{left:auto;}
#topnav li:hover{position:static;}
#topnav li.last a{margin-right:0;}
#topnav li li:hover ul {left: 160px; margin-top: -3em;}
<div id="topnav">
<ul>
<li>Home</li>
<li class="last">Set Up</li>
<li class="last">EMR
<ul>
<li class="last" >Out-Patient
<ul>
<li>Registration</li>
<li>File Edition</li>
</ul>
</li>
<li>In-Patient</li>
</ul>
</li>
</ul>
</div>
Please put your third level menu inside parent li, which makes hierarchical order or level of menu
<li class="last" >Out-Patient
<ul>
<li>Registration</li>
<li>File Edition
</li>
</ul>
<li>
How can I resize the header area in order to insert a bigger logo. The logo height is not adjusting properly. This is a specific theme. I will include the header code and the css code.
CSS:
/* =Navigation
----------------------------------------------- */
.site-content .site-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
.site-content .nav-previous {
float: left;
width: 50%;
}
.site-content .nav-next {
float: right;
text-align: right;
width: 50%;
}
/* =top
----------------------------------------------- */
.topbar {
height:40px;
background:#302b29;
}
.top {
background:url(images/top.png) repeat-x;
height:117px;
}
.head {
background:url(images/head.png) center no-repeat;
height:117px;
}
.logo {
padding:5px 0px;
}
h1.site-title {
font-size:20px;
font-family: Arial,serif;
font-weight:bold;
color:#fff;
margin:15px 0px 5px 0px
}
h1.site-title a:link,h1.site-title a:visited {
color:#fff;
}
h2.site-description {
font-size:14px;
color: #eee;
}
/* Searchform */
#searchform {
width:260px;
float:right;
margin-top:8px;
}
#s {
width:180px;
padding:3px 5px;
background:#4C4645;
border:1px solid #5E5B5B;
color:#fff;
}
#searchsubmit {
padding:3px 10px;
background:#800404;
border:1px solid #A00C0C;
margin-left:5px;
box-shadow:none;
color:#fff;
text-shadow:1px 1px 0px #540404;
}
/* TOP-MENU */
#botmenu {
font-size: 14px;
}
#submenu {
margin: 30px 0px;
padding:0px 0px;
height:50px;
}
#submenu ul {
width: auto;
float:left;
list-style: none;
margin: 0;
padding: 0 10px;
}
#submenu li {
float: left;
list-style: none;
margin: 0;
padding: 0;
color: #222;
font-weight:400;
}
#submenu li a {
color: #fff;
display: block;
margin: 0;
padding: 16px 10px 16px 10px;
text-decoration: none;
position: relative;
}
#submenu li a:hover, #submenu li a:active, #submenu .current_page_item a {
color: #fff;
}
#submenu li a.sf-with-ul {
padding-right: 10px;
}
#submenu li ul li a, #submenu li ul li a:link, #submenu li ul li a:visited,
#submenu li ul li ul li a, #submenu li ul li ul li a:link, #submenu li ul li ul li a:visited,
#submenu li ul li ul li ul li a, #submenu li ul li ul li ul li a:link, #submenu li ul li ul li ul li a:visited {
color: #eee;
width: 148px;
margin: 0;
padding: 10px 10px;
border-top:1px solid #403837;
position: relative;
font-weight:400;
}
#submenu ul li ul li:first-child a,#submenu ul li ul li ul li:first-child a,#submenu ul li ul li ul li ul li:first-child a {
border-top:none;
}
#submenu li ul li a:hover ,#submenu li ul li ul li a:hover ,#submenu li ul li ul li ul li a:hover {
color: #fff;
}
#submenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px 0px 0px 0px;
padding: 5px 5px;
background:#302B29;
border:1px solid #302B29;
}
#submenu li ul a {
width: 150px;
}
#submenu li ul a:hover, #submenu li ul a:active {
}
#submenu li ul ul {
margin: -49px 0 0 181px;
}
#submenu li:hover ul ul, #submenu li:hover ul ul ul, #submenu li.sfHover ul ul, #submenu li.sfHover ul ul ul {
left: -999em;
}
#submenu li:hover ul, #submenu li li:hover ul, #submenu li li li:hover ul, #submenu li.sfHover ul, #submenu li li.sfHover ul, #submenu li li li.sfHover ul {
left: auto;
}
#submenu li:hover, #submenu li.sfHover {
position: static;
}
/* Layout */
#primary, #secondary{
padding:50px 0px;
}
Header Code:
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div class="topbar">
<div class="container_6">
</div>
</div>
<div class="top cf ">
<div class="container_6">
<div class="head cf">
<div class="logo grid_2">
<h1><a href="<?php bloginfo('siteurl');?>/" title="<?php bloginfo('name');?>">
<img style="float: left;" src="linktomylogo/newlogo1.png" alt="" width="148" height="90" /> </a>
</h1>
<h2 class="site-description">
<?php bloginfo( 'description' ); ?>
</h2>
</div>
<div id="botmenu" class="grid_4">
<p><?php shailan_dropdown_menu( ); ?></p>
<?php wp_nav_menu( array( 'container_id' => 'submenu', 'theme_location' => 'primary','menu_id'=>'web2feel' ,'menu_class'=>'sfmenu','fallback_cb'=> 'fallbackmenu' ) ); ?>
</div>
</div>
</div>
</div>
</header><!-- #masthead .site-header -->
<div id="main" class="site-main cf">
I have changed a few things but it messes up the site. The height of the image should be around 200 and not 90px.
Thanks
the logo is placed inside the div with the class of top, and the other with a class of head. I've modified their CSS slightly below.
.top{
background:url(images/top.png) repeat-x;
height:200px; /* Change the height here */
}
.head{
background:url(images/head.png) center no-repeat;
height:200; /* and here */
}
I am making a dropdown menu on one of my menu item.
ie: | Home | About | Store | Contact |
I want to create a dropdown menu for say About page...but Whenever I try to add
<div id="snaznav"> Home
<ul>
<li>About
<ul>
<li><a href="#">Submenu1</li>
<li><a href="#">Submenu2</li>
<li><a href="#">Submenu3</li>
</ul>
</li>
</ul></div>
Every next menu item gets disturbed as:
Home | About
Store |
Contact |
I dont know..where the problem is?
My CSS code is:
#snaznav {
float:left;
height:42px;
top:151px;
width:670px;
}
#snaznav a {
float:left;
height:41px;
display:block;
}
#home {
background:url(http://www.abc.com/home.gif) no-repeat transparent;
background-position:0 -2px!important;
width:77px;
}
#about {
background:url(http://www.abc.com/about.gif) no-repeat transparent;
background-position:-78px -2px!important;
width:104px;
}
#store {
background:url(http://www.abc.com/storegif) no-repeat transparent;
background-position:-307px -2px!important;
width:82px;
}
#contactus {
background:url(http://www.abc.com/contact.gif) no-repeat transparent;
background-position:-388px -2px!important;
width:131px;
}
If you need anything to know, just say me !!
Can you rewrite your HTML Code this way:
HTML:
<div id="snaznav">
<ul>
<li>Home</li>
<li>
About
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
</ul>
</div>
So that the CSS you can apply this way:
CSS:
#snaznav ul {border-bottom: 1px solid #999;}
#snaznav ul li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
#snaznav ul > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
#snaznav ul li a:hover {background: #ccc; border: 1px solid #999;}
#snaznav ul > li {display: inline-block; position: relative; border: 1px solid #fff;}
#snaznav ul > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
#snaznav ul > li:hover ul {display: block;}
#snaznav ul > li ul li {display: block;} /* Vertical Menu */
#snaznav ul > li ul li {display: inline-block;} /* Horizontal Menu */
Fiddle: http://jsfiddle.net/VmHXb/1/ (Vertical) http://jsfiddle.net/VmHXb/3/ (Horizontal)
Before I ask my continue please keep in mind that I am only just getting back into web development and it has been almost 8 years since I have used HTML daily.
I am currently creating a website
I am using the CSS3 Drop Down Menu, I tweaked it a little bit to suit (colours, widths etc)
Here is the CSS code:
#cssmenu{ height:37px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px; }
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
#cssmenu ul li > ul{width:200px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }
#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); }
#cssmenu{border-color:#000;}
#cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#444;}
#cssmenu > ul > li > a:hover{background:#111;}
And here is the relevant header.php (I am using PHP includes) :
<div id='cssmenu'> <ul> <li class='active '><a href='index.php'><span>Home</span></a></li> <li><a href='about.php'><span>About</span></a></li> <li class='has-sub '><a href='#'><span>Services</span></a>
<ul>
<li><a href='resdemo.php'><span>Residential Demolition</span></a></li>
<li><a href='comdemo.php'><span>Commercial Demolition</span></a></li>
<li><a href='partdemo.php'><span>Partial Demolition</span></a></li>
<li><a href='excavate.php'><span>Excavation and Bobcat Jobs</span></a></li>
<li><a href='asbestos.php'><span>Asbestos Removal</span></a></li>
<li><a href='bins.php'><span>Bin Hire</span></a></li>
<li><a href='internal.php'><span>Internal Strip Outs</span></a></li>
<li><a href='concrete.php'><span>Concrete and Pavement Removal</span></a></li>
<li><a href='trees.php'><span>Vegetation and Tree Removal</span></a></li>
</ul> </li> <li><a href='/gallery/index.php' target='new'><span>Gallery</span></a></li> <li><a href='quote.php'><span>Free Quote</span></a></li> <li><a href='contact.php'><span>Contact</span></a></li> </ul> </div>
Any help will be greatly appreciated as this menu has been a common request lately. BTW I have tried using the online css validator tool but it didn't make a difference, just took away the menu gradients (visible in Chrome and Firefox only)
Thanks,
Angie.
Here is a cross browser compatible horizontal nav menu (w/ drop down subnav).
It doesn't have gradients though. For cross browser gradients, have a look at CSS3 PIE.
You can play w/ the gradients and then get the CSS and add it to your menu.