Hover Not Working

[jelly46]

Hello to all

Please can you help me with this css as my hover links {text-decoration: underline;} are not working.

Its used within a CMS and for the life of me the hover buttons are not working .

Here is the URL http://www.thepcrepairers.com/left_nav/

It works differently in IE if you click on link it will undrline after use.

Here is the CSS:

Thanks guys


#wrapper{width: 180px;}

.oNavigationList { margin: 0; padding:0;}
/*.oNavigationItemParent, .oNavigationItemCurrent, .oNavigationItemSibling { list-style-type: none; }*/


map#oSideNavigationMap { width: 100%; overflow: hidden; display: block; background: #fff; }

/*.oNavigationList { margin: 0; padding: 0; }
.oNavigationItemParent, .oNavigationItemCurrent, .oNavigationItemSibling, ul.oNavigationList li { list-style-type: none; }


ul.oNavigationList li span span
{padding:8px 8px 8px 10px; background: url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/menu_bg_left_nav.gif") repeat-y scroll right top #fff; border-right: 6px solid #D1D1D1; border-top: 1px solid #D1D1D1;
display: block; width:92%; }

ul.oNavigationList li { display: block; width: 100%; overflow: hidden; }*/



/*-------------------------------*/

ul.oNavigationList ul { padding:0; margin:0; } /* this is the list control for the .snv-child */


ul.oNavigationList li { list-style-type: none; padding:0; margin:0; color:#00aeef; text-decoration: none;}

/*this is to control the main .snv-toplevel-outer and .snv-child list */

ul.oNavigationList li span { display:block; }

ul.oNavigationList :link, ul.oNavigationList:visited , ul.oNavigationList:hover, ul.oNavigationList :active {text-decoration: none;}



/*-------------------------------*/


.snv-toplevel-outer { padding:8px 8px 8px 8px; background: url(bg_left_nav.gif) repeat-y right #fff; color:#00aeef; border-right: 6px solid #e9e0d7; border-top: 1px solid #e9e0d7;
display: block; margin-left:0;}
.snv-toplevel-inner {}



/*---------------Current Link ---------------- */
li.oNavigationItemCurrent {}
.snv-current-icon { }
.snv-current-outer {padding:8px 0 8px 20px; display: block; background: url(left_nav_blue_line.gif) no-repeat 5% 13px!important; }
.snv-current-inner { background: url(blue_left_nav_arrow.gif) no-repeat 150px!important; color:#999999; }

a.NavigationCurrentLink:link {text-decoration: none ;}
a.NavigationCurrentLink:visited {text-decoration: none ;}
a.NavigationCurrentLink:active {text-decoration: underline;}
a.NavigationCurrentLink:hover {text-decoration: none ;}


/*---------------Current Link Children----------------*/
li.oNavigationItemChild { }
.snv-child-icon {}
.snv-child-outer {background: url(bg_left_nav.gif) repeat-y scroll right !important; margin-left:0;}
.snv-child-inner { padding:8px 8px 8px 20px !important;
background: url(left_nav_blue_line.gif) no-repeat 5% 13px!important; border-right: 6px solid #e9e0d7; border-top: 1px solid #e9e0d7; color:#00aeef;}



.snv-path-sibling-outer {}
.snv-path-sibling-inner {}


a.NavigationChildLink:link, a.NavigationChildLink:visited { text-decoration: none !important; }
a.NavigationChildLink:hover, a.NavigationChildLink:active { background: none; text-decoration: underline !important; }

li.oNavigationItemSibling { }
.snv-sibling-icon { }
.snv-sibling-outer {}
.snv-sibling-inner { padding:8px 8px 8px 8px; background: url(bg_left_nav.gif) repeat-y right #fff; border-right: 6px solid #e9e0d7; border-top: 1px solid #e9e0d7;
display: block; margin-left:0; color:#00aeef;}
a.NavigationSiblingLink:link, a.NavigationSiblingLink:visited { text-decoration: none; }
a.NavigationSiblingLink:hover, a.NavigationSiblingLink:active { text-decoration: underline; }



/*li.oNavigationItemParent { list-style-type: none; }
.snv-parent-icon { font-size: 1.1em; font-weight: bold; line-height: 1em; padding-right: 3px; }
.snv-parent-outer { display: block; }
.snv-parent-inner { display: block; padding: 2px 5px 2px 5px; }
a.NavigationParentLink:link, a.NavigationParentLink:visited { display: block; text-decoration: none; }
a.NavigationParentLink:hover, a.NavigationParentLink:active { text-decoration: none; }*/

.oNavigationItemParentPremium { background: Blue; color: Red; }
.oNavigationItemCurrentPremium { background: Green; color: Red; }
.oNavigationItemSiblingPremium { background: Lime; color: Red; font-weight: bold; }
.oNavigationItemChildPremium { background: Yellow; color: Red; font-weight: bold; }

[JShor]

You need the element that is to display an underline to be the one accessed by CSS that defines an underline when that element is hovered over. In this case, since you have parent elements that are not the anchor tag, the underline will not be displayed.

This should work:


.snv-sibling-inner:hover { text-decoration: underline; }


Just add that to your CSS code and it should display the links with underlines when it is hovered over.

[jelly46]

Thanks man it works but not in IE :confused:

[JShor]

You have a lot of children generations within the link container, and it's causing problems for browsers to generate. Is it possible you can revise your code so it's not as bulky?

[jelly46]

Thanks Jshor

I have reworked this bloated code again i works in firefox but not in chrome or IE

thanks for your help



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
#wrapper{width: 180px;}

.oNavigationList { margin: 0; padding:0;}



map#oSideNavigationMap { width: 100%; overflow: hidden; display: block; background: #fff; }

/*-------------------------------*/

ul.oNavigationList ul { padding:0; margin:0; } /* this is the list control for the .snv-child */


ul.oNavigationList li { list-style-type: none; padding:0; margin:0; color:#00aeef;}

/*this is to control the main .snv-toplevel-outer and .snv-child list */

ul.oNavigationList li span { display:block; }

ul.oNavigationList :link, ul.oNavigationList:visited , ul.oNavigationList:hover, ul.oNavigationList :active {}



/*-------------------------------*/


.snv-toplevel-outer { padding:8px 8px 8px 8px; background: url(bg_left_nav.gif) repeat-y right #fff; color:#00aeef; border-right: 6px solid #e9e0d7; border-top: 1px solid #e9e0d7;
display: block; margin-left:0;}
.snv-toplevel-inner {}

.snv-toplevel-inner:link { text-decoration: none; }
.snv-toplevel-inner:visited { text-decoration: none; }
.snv-toplevel-inner:hover { text-decoration: underline; }
.snv-toplevel-inner:active { text-decoration: none; }


/*---------------Current Link ---------------- */
li.oNavigationItemCurrent {}
.snv-current-icon { }
.snv-current-outer {padding:8px 0 8px 20px; display: block; background: url(left_nav_blue_line.gif) no-repeat 5% 13px!important; }
.snv-current-inner { background: url(blue_left_nav_arrow.gif) no-repeat 150px!important; color:#999999; }

.snv-current-inner:link { text-decoration: none; }
.snv-current-inner:visited { text-decoration: none; }
.snv-current-inner:hover { text-decoration: underline; }
.snv-current-inner:active { text-decoration: none; }



/*---------------Current Link Children----------------*/
li.oNavigationItemChild { }
.snv-child-icon {}
.snv-child-outer {background: url(bg_left_nav.gif) repeat-y scroll right !important; margin-left:0;}
.snv-child-inner { padding:8px 8px 8px 20px !important;
background: url(left_nav_blue_line.gif) no-repeat 5% 13px!important; border-right: 6px solid #e9e0d7; border-top: 1px solid #e9e0d7; color:#00aeef;}

.snv-child-inner:link { text-decoration: none; }
.snv-child-inner:visited { text-decoration: none; }
.snv-child-inner:hover { text-decoration: underline; }
.snv-child-inner:active { text-decoration: none; }


.snv-path-sibling-outer {}
.snv-path-sibling-inner {}



li.oNavigationItemSibling { }
.snv-sibling-icon { }
.snv-sibling-outer {}
.snv-sibling-inner { padding:8px 8px 8px 8px; background: url(bg_left_nav.gif) repeat-y right #fff; border-right: 6px solid #e9e0d7; border-top: 1px solid #e9e0d7;
display: block; margin-left:0; color:#00aeef;}

.snv-sibling-inner:link { text-decoration: none; }
.snv-sibling-inner:visited { text-decoration: none; }
.snv-sibling-inner:hover { text-decoration: underline; }
.snv-sibling-inner:active { text-decoration: none; }




/* explorer navigation */

</style>






</head>

<body>
<div id="wrapper">
<div id="left-outer">
<div id="left-inner">
<div class="snv-outer">
<div class="snv-inner">
<div class="snv-body">

<map id="oSideNavigationMap"><ul class="oNavigationList"><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/latest-news/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 1</span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/media/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 2</span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/celebrity-support/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 3</span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/e-news-sign-up/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 4</span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/christou-test-page/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 5</span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/parents-and-visitors/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 6 </span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/medical-conditions/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 7 </span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/directions-map-and-parking/" class="NavigationPathLink"><span class="snv-current-outer"><span class="snv-current-inner">Current Link</span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/renal-failure-stories/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 8</span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/search/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 9</span></span></a></li></ul></map>



</div>
</div>
</div>

</div>
</div>
</div>
</body>
</html>

[JShor]

Here's a suggestion: what if you try setting every single parent node in those links to have text-decoration: none in their hover state?

That might fix the problem.