css3 menu and z-index

Hi guys i need help. I have this menu and i added the box-shadow to it. and now when i have hover states or active states of anchor tags it doesn’t go to the end of the whole menu, it leaves the 2px shadow at the bootom and it looks weird. i know it has to be fixed with z-index so i can set a bigger height to the anchor tag andproblem solved. but how.

PICTURE OF WHAT I HAVE AND WHAT I NEED:

http://i54.tinypic.com/o902mb.jpg

CSS:

#menu ul {
    list-style-type: none;
    list-style-position: outside;
    margin: 0px;
    padding: 0px;
	overflow:hidden;
	height:40px;
	width:960px;
	background: #FF3333; /* old browsers */
	background: -moz-linear-gradient(top, #FF3333 0%, #990000 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF3333), color-stop(100%,#990000)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF3333', endColorstr='#990000',GradientType=0 ); /* ie */
	-webkit-box-shadow: 0px 1px 2px #2b2b2b;
	-moz-box-shadow: 0px 1px 2px #2b2b2b;
	box-shadow: 0px 1px 2px #2b2b2b; 
}

#menu ul li {
    display: block;
    overflow: hidden;
    padding: 0px;
    cursor: pointer;
    float: left;
    margin: 0px;
    margin-left:20px;
}

#menu ul li:first-child {
	margin-left:10px !important;
}

#menu ul li.lang-hr {
	margin-left:45px !important;
}
#menu ul li.lang-en {
	margin-left:1px !important;
}

#menu ul li a {
    color: #fff;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    display: block;
    height: 28px;
	padding:12px 5px 0px 5px;
	
}

#menu ul li a:hover, #menu ul li a.active  {
    color: #990000;
	background-color:#fff;

}

HTML


	<div id="menu">
		<ul>
			<li><a class="active" href="#">sample1</a></li>
			<li><a href="#">sample sample</a></li>
			<li><a href="#">sample3</a></li>
			<li><a href="#">sample3 samp</a></li>
			<li><a href="#">isample3423</a></li>
			<li><a href="#">sample45</a></li>
			<li><a href="#">sample5</a></li>
			<li><a href="#">sample6</a></li>
			<li class="lang-hr"><a class="active" href="#"><img src="images/icons/flags/hr.png" /></a></li>
			<li class="lang-en"><a href="#"><img src="images/icons/flags/gb.png" /></a></li>
		</ul>
	</div><!-- end #menu -->

thank you.

Hi,

I’m seeing a shadow all the way along in Firefox chrome and Safari with the above code.

Was there something extra I was supposed to do to see the missing shadow?

yes hi maybe i was not clear enoug…

take a look at this picture:

http://i54.tinypic.com/o902mb.jpg

the first menu set is what i have right now. everything is ok. the box shadow works and so on.

BUT
the second menu set has a NOTICE arrow pointing to the hover element. YOU SEE HOW the hover goes over the box shadow. That is what i need. i need the hover element with white background to go over the box shadow.

i hope i was clear enough this time, just take a look at the pic.

Hi,

Ok I assumed that you wanted the shadow underneath :slight_smile:

To remove the shadow on hover your only option is to increase the height of the anchor so that it rubs out when hovered (using the background color).

You will need to remove the overflow:hidden though on the ul otherwise it won’t show.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#menu ul {
    list-style-type: none;
    list-style-position: outside;
    margin: 0px;
    padding: 0px;
    height:40px;
    width:960px;
    background: #FF3333; /* old browsers */
    background: -moz-linear-gradient(top, #FF3333 0%, #990000 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF3333), color-stop(100%, #990000)); /* webkit */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF3333', endColorstr='#990000', GradientType=0 ); /* ie */
    -webkit-box-shadow: 0px 1px 2px #2b2b2b;
    -moz-box-shadow: 0px 1px 2px #2b2b2b;
    box-shadow: 0px 1px 2px #2b2b2b;
}
#menu ul li {
    display: block;
    overflow: hidden;
    padding: 0px;
    cursor: pointer;
    float: left;
    margin: 0px;
    margin-left:20px;
}
#menu ul li:first-child {
    margin-left:10px !important;
}
#menu ul li.lang-hr {
    margin-left:45px !important;
}
#menu ul li.lang-en {
    margin-left:1px !important;
}
#menu ul li a {
    color: #fff;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    display: block;
    height: 28px;
    padding:12px 5px 0px 5px;
}
#menu ul li a:hover, #menu ul li a.active {
    color: #990000;
    background-color:#fff;
    padding:12px 5px 5px 5px;
}
</style>
</head>
<body>
<div id="menu">
    <ul>
        <li><a class="active" href="#">sample1</a></li>
        <li><a href="#">sample sample</a></li>
        <li><a href="#">sample3</a></li>
        <li><a href="#">sample3 samp</a></li>
        <li><a href="#">isample3423</a></li>
        <li><a href="#">sample45</a></li>
        <li><a href="#">sample5</a></li>
        <li><a href="#">sample6</a></li>
        <li class="lang-hr"><a class="active" href="#"><img src="images/icons/flags/hr.png" /></a></li>
        <li class="lang-en"><a href="#"><img src="images/icons/flags/gb.png" /></a></li>
    </ul>
</div>
</body>
</html>


Won’t work in IE6 of course.:slight_smile:

:hover does work on anchor elements in IE 6. It’s the only psuedo element that does work in IE 6, and then only for that element. He has a filter property in place for IE 6 so it might work.

For what it’s worth. I stopped bending over backwards to make things work on IE 6 years ago, but I still remember what will and won’t work in that beast.

Yes I know that hover works on anchors in IE6 but that wasn’t the issue I was talking about :slight_smile:

I was referring to the fact that I increased the anchors height on hover by 5px to overlay the shadow. Due to Ie6’s expanding box problem it will simply increase the parents height from 40px to 45px to accommodate the larger child element and hence break the design.

I could have fixed IE6 with a bit more code but seeing as it didn’t look like IE6 was being supported because the display was all over the place then I didn’t think it mattered not offering a fix.:slight_smile:

The other main problem with IE6 was that haslayout on the child element (the anchor) causes each floated widthless list item to be 100% of the ul and not the parent list element. The result is that Ie6 runs to about 10 long lines down the page.

Here is a version fixed for IE6. The IE gradient filter will work but there is no drop shadow (unless you want to hunt through the filters collection and find one :)).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul#menu {
    list-style-type: none;
    list-style-position: outside;
    margin: 0;
    padding:0;
    height:40px;
    width:960px;
    background: #FF3333; /* old browsers */
    background: -moz-linear-gradient(top, #FF3333 0%, #990000 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF3333), color-stop(100%, #990000)); /* webkit */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF3333', endColorstr='#990000', GradientType=0 ); /* ie */
    -webkit-box-shadow: 0px 1px 2px #2b2b2b;
    -moz-box-shadow: 0px 1px 2px #2b2b2b;
    box-shadow: 0px 1px 2px #2b2b2b;
}
ul#menu li {
    display: inline;
    overflow: hidden;
    cursor: pointer;
    float: left;
    margin: 0;
    margin-left:20px;
}
ul#menu li:first-child, ul#menu li.first {
    margin-left:10px !important;
}
ul#menu li.lang-hr {
    margin-left:45px !important;
}
ul#menu li.lang-en {
    margin-left:1px !important;
}
ul#menu li a {
    color: #fff;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    float:left;
    height: 28px;
    padding:12px 5px 0px 5px;
}
ul#menu li a:hover, ul#menu li a.active {
    color: #990000;
    background-color:#fff;
    padding:12px 5px 5px 5px;
}
* html ul#menu li a:hover, * html ul#menu li a.active {
    margin-bottom:-5px
}
</style>
</head>
<body>
<ul id="menu">
    <li class="first"><a class="active" href="#">sample1</a></li>
    <li><a href="#">sample sample</a></li>
    <li><a href="#">sample3</a></li>
    <li><a href="#">sample3 samp</a></li>
    <li><a href="#">isample3423</a></li>
    <li><a href="#">sample45</a></li>
    <li><a href="#">sample5</a></li>
    <li><a href="#">sample6</a></li>
    <li class="lang-hr"><a class="active" href="#">f</a></li>
    <li class="lang-en"><a href="#">g</a></li>
</ul>
</body>
</html>


wow thank you i tought it would have to include the z-index property or something, and the overflow was a nice catch. thx so much ; )