SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Removing background image from drop-down menu

    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:

    [HIGHLIGHT="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
    [CODE]
    <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&nbsp;&amp;&nbsp;EXPERIENCE</a></li>
    <li><a href="contact.htm" title="Go to Tim Bojanowski's contact information page">CONTACT</a></li>
    </ul>
    </div>

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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 -
    Code:
    /* 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;
    }
    Code:
    /* 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;
    }

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the background is on the anchor, set background:none on the acnhor

    Edit:

    Old tab..
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,839
    Mentioned
    114 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by designer_kris View Post
    I just cannot remove the background image from my drop-down list.
    What background image are you seeing? Can you post a page showing the problem?

    [HIGHLIGHT="CSS"]
    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.

  5. #5
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    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.
    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.
    Last edited by designer_kris; Jun 2, 2010 at 16:55. Reason: a more throughout description

  6. #6
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, the background is on the anchor, set background:none on the acnhor
    I tried. Unfortunately, nothing changed

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    #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.
    Code:
    /* Navbar hover, active, and current page links */
    #navbar a:hover,
    #navbar a:active,
    #navbar li.selected a:link,
    #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.

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code HTML4Strict:
    <!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>

  9. #9
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •