SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    submenu inheriting main menu's sprite image?

    Here is a quick snippet of my CSS for the Main Menu:

    #main li a{
    background-image:url(site_images/nav_sprite.jpg);
    background-repeat: no-repeat;
    height:39px;
    display: block;}

    #main li a.home{background-position: 0px 0px; width:48px;}



    problem I'm having is, the submenu to one of the links is showing background-image:url(site_images/nav_sprite.jpg);
    Is this because my #main li a also affects #sub's li? This is how my html is structured.
    <ul id="main">
    <li><a></a>
    <ul id="sub">
    <li><a></a></li>
    </li>

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Yes, #main li affects all <li>s within <...id="main">

    If you only want the background to affect <li>s that are direct children of <...id="main">, you need
    #main > li {...}

    Note that this is not supported by IE6.

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or try to target the ul li's in li in main to remove background.

    #main li ul li a{
    background-image:none;}

    or

    #main #sub li a{
    background-image:none;}

  4. #4
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Yes, #main li affects all <li>s within <...id="main">you need
    #main > li {...}
    Dont quite follow you..

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Bades View Post
    Dont quite follow you..
    Stevie was saying use the child selector (>) so that you only target the immediate children of the ul but he forgot to add the next bit to target only the immediate child of the list element also (#main > li > a {}).

    e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
    #main > li > a  {
        background:red
    }
    </style>
    </head>
    <body>
    <ul id="main">
        <li> <a href="#">red</a>
            <ul id="sub">
                <li><a href="#">not red</a></li>
            </ul>
        </li>
    </ul>
    </body>
    </html>
    However IE6 doesn't understand the child selector so if you want to support IE6 then use noonope's version above which cancels out the background on deeper nested lists.


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
  •