Welcome to WebmasterWorld Guest from 54.226.27.104

Forum Moderators: not2easy

Message Too Old, No Replies

a:hover not working on navbar

     

brnm98105

1:22 am on Jan 19, 2012 (gmt 0)

5+ Year Member



Im having an issue with my side vertical list. I need to make the text not bold however I want it to hover bold and show the right arrow upon hover. Im sure one of my other css codes are over writing it. Here is my complete css and the code im working with. Any help please.

body {
padding:0;
background-attachment: scroll;
background-image: url(images/bg_CleanGreen_Illustration.jpg);
background-repeat: no-repeat;
background-position: top;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: 660066;
}
a:link {
color:#660066;
font-weight: bold;
}
a:visited {
color:#CCCCCC;
} /* visited link */
a:hover {
color:#990099;
} /* mouse over link */
a:active {
color:#660066;
} /* selected link */
a img {border: none; }

#container
{
width: 980px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#logo {
}

#header
{
}

#header h1 {
margin: 0;
padding-left: 22px;
padding-top: 10px;
}
#navigation {
background:none;
float: left;
text-align: center;
padding-top: 10px;
padding-left: 29px;
width: 980px;
}

#navigation ul.Nav7 {
text-align:center;
display:inline;
float:none;
padding-top:0;
clear:none;
}

#navigation ul li {
list-style:none;
display:inline;
font-size:12px;
}

#navigation ul li a {
width:115px;
height:23px;
display:block;
padding-top:7px;
float:left;
margin-left:2px;
background-image:url(images/mainNav_btn.png);
background-repeat:no-repeat;
color:#609;
text-decoration:none;
font-weight:400;
}

#navigation ul li a:hover {
background-position:0 -30px;
text-decoration:none;
}

#navigation ul li a:active {
background-position:0 -60px;
}

#navigation ul li ul {
display:none;
}

#content-container
{
float: left;
width: 980px;
background-color: #fff;
}

#side
{
clear: left;
float: left;
width: 240px;
display: inline;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 20px;
padding-top: 20px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
}
.arrowlistmenu{
width: 180px;
}

.arrowlistmenu h3{
font-size: 16px;
color: #B4CC95;
padding-bottom:5px;
background-image: url(images/side-nav-line.png);
background-repeat: no-repeat;
background-position: left bottom;
font-family: Arial;
font-size: 14px;
font-weight: bold;
}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px;
}

.arrowlistmenu ul li{
padding-bottom: 2px;
}

.arrowlistmenu ul li a{
color: #6D276A;
display: block;
padding: 2px 0;
padding-left: 10px;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999999;
}

.arrowlistmenu ul li a:hover{
background:url(images/arrow.png) no-repeat center left;
color:#6D276A;
font-weight: bold;
list-style-image: url(images/arrow.gif);
}


#main
{
float: right;
width: 700px;
display: inline;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}

#main h3 {
margin: 0;
}

#footer
{
clear: both;
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}
/*]]>*/
</style>




<div id="content-container">
<div id="side">
<div class="arrowlistmenu">

<h3>Holiday Collection</h3>
<ul><li><a href="/Buy/Collection/835">Premium Full-Size Warmers</a></li><li><a href="/Buy/Collection/836">Plug-In Warmers</a></li><li><a href="/Buy/Collection/841">Scentsy Buddy</a></li></ul>
<h3>Warmers</h3>

<ul><li><a href="/Buy/Category/819">Premium Full-Size Warmers</a></li><li><a href="/Buy/Category/537">Full-Size Warmers</a></li><li><a href="/Buy/Category/821">Premium Mid-Size Warmers</a></li><li><a href="/Buy/Category/514">Mid-Size Warmers</a></li><li><a href="/Buy/Category/521">Plug-In Warmers</a></li></ul>
<h3>DIY (Design It Yourself)</h3>
<ul><li><a href="/Buy/Collection/489">DIY Warmers</a></li><li><a href="/Buy/Collection/490">DIY Theme Packs</a></li></ul>
<h3>Scentsy Family</h3>

<ul><li><a href="/Buy/Collection/785">Scentsy Buddy</a></li></ul>
<h3>Fragrances</h3>
<ul><li><a href="/Buy/Category/827">Fine Fragrance</a></li><li><a href="/Buy/Category/369">Scentsy Bars</a></li><li><a href="/Buy/Category/377">Scentsy Bricks</a></li></ul>
<h3>Fragrance on the Go</h3>
<ul><li><a href="/Buy/Collection/684">Fragrance Foam</a></li><li><a href="/Buy/Collection/685">Scent Paks</a></li><li><a href="/Buy/Category/461">Scent Circles</a></li><li><a href="/Buy/Category/512">Room Sprays</a></li><li><a href="/Buy/Collection/536">Travel Tins</a></li></ul>

<h3>Featured Products</h3>
<ul><li><a href="/Buy/Collection/780">Featured Products</a></li></ul>
<h3>Combine and Save</h3>
<ul><li><a href="/Buy/Collection/464">Combine and Save</a></li></ul>
<h3>Scent &amp; Warmer of the Month</h3>
<ul><li><a href="/Buy/Collection/845">January</a></li><li><a href="/Buy/Collection/844">December</a></li><li><a href="/Buy/Collection/843">November</a></li><li><a href="/Buy/Collection/842">October</a></li><li><a href="/Buy/Collection/826">September</a></li></ul>

<h3>Warmer Components</h3>
<ul><li><a href="/Buy/Category/535">Replacement Parts</a></li><li><a href="/Buy/Collection/463">Individual Warmer Pieces</a></li></ul>
<h3>Close-Out Items</h3>
<ul><li><a href="/Buy/Collection/808">Close-Out Items</a></li></ul>
<h3>FYI</h3><ul class="Nav"><li><a href="/online_party_rewards"><span>Online Shopping Rewards</span></a></li><li><a href="/learn_DIY"><span>Learn More About DIY</span></a></li><li><a href="/shipping_information"><span>Shipping Information</span></a></li><li><a href="/how_do_the_products_work"><span>How Do the Products Work?</span></a></li><li><a href="/Browse"><span>View My Interactive Catalog</span></a></li><li><a href="/PerfectGiftIdeas"><span>Perfect Gift Ideas</span></a></li></ul>


</div>

alt131

5:40 pm on Jan 23, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi brnm98105, welcome to css - and terribly sorry a response is a bit delayed.

I've tested the provided code several times and it is working as desired. That suggests you are correct that something is over-riding the css.

Have you checked the page using an inspection tool such as firebug in firefox to see what styles are actually being applied? Also have you validated? There is an unclosed element in the provided code, but I thought that was probably caused by the cut/paste into the post - but it never hurts to validate to make sure.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month