homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

a:hover not working on navbar

5+ Year Member

Msg#: 4408411 posted 1:22 am on Jan 19, 2012 (gmt 0)

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 {
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 {
font-weight: bold;
a:visited {
} /* visited link */
a:hover {
} /* mouse over link */
a:active {
} /* selected link */
a img {border: none; }

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


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

#navigation ul.Nav7 {

#navigation ul li {

#navigation ul li a {

#navigation ul li a:hover {
background-position:0 -30px;

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

#navigation ul li ul {

float: left;
width: 980px;
background-color: #fff;

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;
width: 180px;

.arrowlistmenu h3{
font-size: 16px;
color: #B4CC95;
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;
font-weight: bold;
list-style-image: url(images/arrow.gif);

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;

clear: both;
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;

<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>

<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>
<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>




WebmasterWorld Senior Member 5+ Year Member

Msg#: 4408411 posted 5:40 pm on Jan 23, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved