Removing background image from drop-down menu

HTML & CSS
1

I just cannot remove the background image from my drop-down list.

I’ve tried:
background: #000; /* my body background color */

background: none;

background-image: none;

Here is my navbar CSS:



#navbar{
   /* For absolutely-positioned navbar */
   position: relative;
   float:left;
   margin-top: .5em;
   margin-left: 1.99%;
 }
 
 /* Remove bullets from ul in the navbar */
#navbar ul{
  list-style-type:none;
}

/* List items in the navbar */
#navbar li{
  position:relative;
  display:inline;
  padding-left: .5em;
 }

*html #navbar li{
  margin-left: 1em;
}
  
/* Applies to navbar links, unvisited and visited */
#navbar a,
#navbar a:link,
#navbar a:visited{
  text-decoration:none;
  font-size:70%;
  font-family: "Copperplate Light", "Copperplate Gothic Light", sans-serif;
  color:#CCCCCC;
  letter-spacing:.1em;
  padding-top:.3em;
  padding-left:2.3em;
  padding-right:3em;
  padding-bottom:.3em;
  outline-style:none;
  zoom:1;
}

/* Navbar hover, active, and current page links */
#navbar a:hover,
#navbar a:active,
#navbar li.selected a:link,
#navbar li.selected a:visited{
   background-image: url(bullet.gif);
   background-repeat: no-repeat;
   background-position: 0 50%;
}

#navbar li ul{
  position:absolute;
  z-index:100;
  visibility:hidden;
} 

/* Make drop-down visible on navbar hover */
#navbar li:hover ul,
#navbar li a:hover ul{ /* IE6 hack */
  visibility:visible;
  top:1em;
  left:.5em;
}

/* Applies to links on the drop-down menu */
#navbar li:hover ul li a,
#navbar li a:hover ul li a{ /* IE6 hack */
  background-image:none; /* Removes background image */
  color: #ccc;
  text-align:left;
  display:block;
  width:10em;
  padding:0 0 0 2.4em;
  height:auto;
}

/* Hover on drop-down menu links */
#navbar li:hover ul li a:hover,
#navbar li a:hover ul li a:hover{ /* IE6 hack */
  background: url(bullet.gif) no-repeat 0 50%;
  color:#CCC;
}

/* IE6 hack applies to its table drop-down */
#navbar table {
  margin:-1px;
  border-collapse:collapse;
  position:absolute;
  top:0.5em;
  left:0;
  z-index:100;
}

Here is my navbar XHTML

<div id=“navbar”>
<ul>
<li><a href=“index.htm”>HOME</a></li>
<li><a href=“music.htm” title=“Go to Tim Bojanowski’s music page”>MUSIC</a></li>
<li class=“selected”><a href=“teaching.htm” title=“Go to Tim Bojanowski’s teaching page”>TEACHING</a>
<ul>
<li><a href=“teaching_philosophy” title=“Go to Tim Bojanowski’s teaching philosophy page”>TEACHING PHILOSOPHY</a>
</li>
</ul>
</li>
<li><a href=“inspiration.htm” title=“Go to Tim Bojanowski’s inspiration page”>INSPIRATION</a></li>
<li><a href=“know_exp.htm” title=“Go to Tim Bojanowski’s knowledge and experience page”>KNOWLEDGE & EXPERIENCE</a></li>
<li><a href=“contact.htm” title=“Go to Tim Bojanowski’s contact information page”>CONTACT</a></li>
</ul>
</div>

2

Hi, the background is on the anchor, set background:none on the acnhor :slight_smile:

Edit:

Old tab…

3

I tried. Unfortunately, nothing changed :frowning:

4

Ahh yes, I know what you are saying now.
It will require deeper targetting with li:hover

Untested but I think this might do it

#navbar li:hover ul li:hover a {
    background-image:none; /* Removes background image */
}

#navbar li:hover ul li a:hover {
    background-image:reset; /* Reset background image */
}

Well, looking at your css again that selected class is keeping all the a:links on too.


/* Navbar hover, active, and current page links */
#navbar a:hover,
#navbar a:active,
#navbar [B]li.selected a:link[/B],
#navbar li.selected a:visited{
background: red;
background-repeat: no-repeat;
background-position: 0 50%;
}

That selected li class has the sub ul in it.

I think you are making this harder than it has to be, what is the purpose of that class.

5

Hi,
Your trying to remove a background-image from the “a” but there is not one set according to your code. The only images set on the “a” are on your pseudo states.

No BG image here -

/* Applies to navbar links, unvisited and visited */
[COLOR=Red][COLOR=Black]#navbar[/COLOR][B] a[/B][/COLOR],
#navbar a:link,
#navbar a:visited{
text-decoration:none;
font-size:70%;
font-family: "Copperplate Light", "Copperplate Gothic Light", sans-serif;
color:#CCCCCC;
letter-spacing:.1em;
padding-top:.3em;
padding-left:2.3em;
padding-right:3em;
padding-bottom:.3em;
outline-style:none;
zoom:1;
}


/* Applies to links on the drop-down menu */
#navbar li:hover ul li [SIZE=2][COLOR=Red][B]a[/B][/COLOR][/SIZE],
#navbar li a:hover ul li a{ /* IE6 hack */
[COLOR=Red]background-image:none;[/COLOR] /* Removes background image */
color: #ccc;
text-align:left;
display:block;
width:10em;
padding:0 0 0 2.4em;
height:auto;
}
6

I understand what you are saying Rayzur. In the drop-down list, the background image appears constantly before the list item. I want the background image to only appear when hovering over the drop-down list item (teaching philosophy).

Here’s the link to the site:
http://www.inspiredtodesign.com/timcss/teaching.htm
Hover over “teaching” to see “teaching philosophy”

Sorry I forgot the closing of my CSS and XHTML. I’m new to these forums.

7

Working with the basic code you posted I styled the parent UL directly and got rid of that wrapping div. I also got rid of the IE6 table hacks and got it prepared for the sfhover script.

Since I don’t have your image I used this old image >

Using that image just for testing with I think I have it like you are wanting it.
I moved the “selected” LI class to another LI for now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>dropdown test</title>

<style type="text/css">

#nav, #nav ul {
    margin:0;
    padding:0;
    list-style:none;
    background:green;
    width:100%;/*IE haslayout > float containment*/
}
#nav:after {/*contain floated LI without overflow property*/
    clear:both;
    content:"";
    display:block;
    height:0;
    font-size:0;
}
#nav li {
    position:relative;
    float:left;
    padding-left:.5em;
    background:#000;
}
#nav a {
    float:left;
    padding:.3em 3em .3em 2.3em;
    font-size:70%;
    font-family: "Copperplate Light", "Copperplate Gothic Light", sans-serif;
    color:#CCC;
    letter-spacing:.1em;
    outline-style:none;
    text-decoration:none;
}
#nav a:link,
#nav a:visited {color:#CCC;}

#nav a:hover,
#nav a:active,
#nav li.select a {
    background:red url(bullet-1.png) no-repeat 0 50%;
}

#nav ul {
    position:absolute;
    z-index:10;
    top:100%;
    left:.5em;
    width:10.4em;
    padding:0 0 .5em .5em;
    margin-left:-999em;
}

/* Make drop-down visible on navbar hover */
#nav li:hover ul,
#nav li.sfhover ul { /* IE6 */
    visibility:visible;
    margin-left:0;
}
#nav ul li {
    float:none;
    display:block;
    width:10.4em;/*IE needs this*/
    padding-left:0;
}
#nav ul li a {
    float:none;
    display:block;
    width:12.4em;/*12.4em total (same as sub LI) */
    padding:0 0 0 2.4em;
}
/* Applies to links on the drop-down menu */
#nav li:hover li a,
#nav li.sfhover li a { /* IE6 */
    background-image:none; /* Removes background image */
}
/* Hover on drop-down menu links */
#nav li:hover li a:hover,
#nav li.sfhover li a:hover{ /* IE6 hack */
    background:red url(bullet-1.png) no-repeat 0 50%;
}

</style>
</head>
<body>

<ul id="nav">
    <li><a href="index.htm">HOME</a></li>
    <li><a href="music.htm" title="Go to Tim Bojanowski's music page">MUSIC</a></li>
    <li><a href="teaching.htm" title="Go to Tim Bojanowski's teaching page">TEACHING</a>
        <ul>
            <li><a href="teaching_philosophy" title="Go to Tim Bojanowski's teaching philosophy page">TEACHING PHILOSOPHY</a></li>
        </ul>
    </li>
    <li><a href="inspiration.htm" title="Go to Tim Bojanowski's inspiration page">INSPIRATION</a></li>
    <li class="select"><a href="know_exp.htm" title="Go to Tim Bojanowski's knowledge and experience page">KNOWLEDGE&nbsp;&amp;&nbsp;EXPERIENCE</a></li>
    <li><a href="contact.htm" title="Go to Tim Bojanowski's contact information page">CONTACT</a></li>
</ul>

</body>
</html>
8

What background image are you seeing? Can you post a page showing the problem?



If you want the highlighty thing and the codey thing to work, you'll need to have the [/ highlight] and [/ code] at the end of the relevant bits.
9

Thank you, Rayzur, for your help! I greatly appreciate it! I learned that since my nav li was “selected”, the drop-down li was inheriting that class.