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;
}
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.
: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
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.
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 :)).
