Hello everybody, Im trying to create a menu on a page. Instead of using lengthy descriptions, I’ll just include a screenshot of what I have.
and the code is as follows:
[php]
[/php]
and the CSS
[php]
#tier2{height:26%; width:85%; border:1px solid black; margin:auto;
/* fallback (Opera) /
background: #000000;
/ Mozilla: /
background: -moz-linear-gradient(top, #000000, #252525);
/ Chrome, Safari:/
background: -webkit-gradient(linear,
left top, left bottom, from(#000000), to(#252525));
/ MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr=’#000000’, EndColorStr=’#252525’, GradientType=0);
}
.menu{position:relative;top:30px;left:2px; color:#ffffff; font-family:“Lucida Console”; font-size:20px; font-weight:bold;}
.menu_decor{ width:100px; height:80px; border-bottom-left-radius:15px; -moz-border-radius-bottomleft-:15px; border-bottom-right-radius:15px; -moz-border-radius-bottomright-:15px;
/* fallback (Opera) /
background: #023a67;
/ Mozilla: /
background: -moz-linear-gradient(top, #023a67, #008983);
/ Chrome, Safari:/
background: -webkit-gradient(linear,
left top, left bottom, from(#023a67), to(#008983));
/ MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr=’#023a67’, EndColorStr=’#008983’, GradientType=0);
[/php]
So basically, tier 2 is the black background which contains the menu items. Now the problem is this. For Safari and Chrome, the entire div (tier 2) behaves as a link when the mouse is rolled over it. Well at least most parts of it. Clearly, the anchors have been defined only for the menu items but for safari and chrome, they extend over to the black area. How can one fix that?
