cross browser menu hover is underlining in IE8 but not in the rest of the browsers
I need to turn off the hover underline in IE8 -
here is my dev site: http://www.solutionunion.com/website/
on the main menu dropdown when you mouseover in ie8 it underlines the link but not in ff or any of the other browsers. is there a special hack I can add to the css file to make the underline on the hover turn off?
<style>
ul#photobucket ul{display:none}
ul#photobucket li:hover>*{text-decoration: none;display:block}
ul#photobucket li:hover{position:relative;}
ul#photobucket ul{
position: absolute;left:-1px;top:98%;}
ul#photobucket ul ul{
position: absolute;left:98%;top:-2px;}
ul#photobucket,ul#photobucket ul{
margin:0px;list-style:none;padding:0px;background-color:#ffffff;border-width:0px;border-style:none;border-color:#999999;}
ul#photobucket {
display:block;开发者_运维百科font-size:0;zoom:1;float: left;}
ul#photobucket ul{
width:366px;padding:0;}
ul#photobucket li{
display:block;zoom:1;margin:0;font-size:0;float:left;}
ul#photobucket a:active, ul#photobucket a:focus {outline-style:none;text-decoration:none;}
ul#photobucket a, ul#photobucket li.dis a:hover,ul#photobucket li.sep a:hover{
display:block;vertical-align:middle;background-color:#ffffff;border:0px none #6655FF;text-align:center;padding:8px 5px 8px 8px;font:normal 13px Arial,Verdana,sans-serif;color: #333333;text-decoration:none;cursor:default;}
ul#photobucket span{overflow:hidden;}
ul#photobucket ul li {float:none;}
ul#photobucket ul a, ul#photobucket ul li.dis a:hover{
text-align:left;white-space:nowrap;text-decoration:none;}
ul#photobucket li.sep{
text-align:left;padding:0px;line-height:0;height:100%;}
ul#photobucket li.sep span{
float:none;padding-right:0;width:1px;height:38px;display:inline-block;background-color:#ffffff;background-image:none;}
ul#photobucket ul li.sep span{
width:100%;height:3px;}
ul#photobucket li:hover>a {
background-color:#C2C2C2;border-color:#665500;border-style:none;font:normal 13px Arial,Verdana,sans-serif;color: #333333;text-decoration:none;}
ul#photobucket li.dis a {text-decoration:none;color: #AAAAAA !important;}
ul#photobucket img{
border: none;vertical-align: middle;margin-right:16px;width:24px;height:24px;}
ul#photobucket ul img{
width:24px;height:24px;}
ul#photobucket img.over{display:none}
ul#photobucket li.dis a:hover img.over{display:none !important}
ul#photobucket li.dis a:hover img.def {display:inline !important}
ul#photobucket li:hover > a img.def {display:none}
ul#photobucket li:hover > a img.over {display:inline}
ul#photobucket span{
display:block;background-image:url(arrv_white.gif);background-position:right center;background-repeat: no-repeat;padding-right:23px;text-decoration: none;}
ul#photobucket li.istylei0>a{
height:22px;background-color:#ffffff;font:bold 13px Arial,Verdana,sans-serif;color:#FFFFFF;text-decoration:none;}
ul#photobucket li.istylei0:hover>a{
background-color:#ffffff;font:bold 13px Arial,Verdana,sans-serif;color:#FFFFFF;text-decoration:none;}
ul.istylem0 {
background-color:#ffffff;border-width:0px;border-style:none;padding:0px 0 0 0px;}
ul.istylem0>li>a {
padding:6px 25px 6px 10px;}
ul.istylem0>li {
margin:0 0px 0px 0;}
</style>
you have this in the containing TD
(the id of the td I looked at was 'dm0m3i0tdT')
background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; width: 100%; padding-top: 8px; padding-right: 5px; padding-bottom: 8px; padding-left: 8px; text-align: left; color: rgb(51, 51, 51); font: normal normal normal 13px/normal Arial, Verdana, sans-serif; text-decoration: underline; background-position: initial initial;
精彩评论