Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Descendent Selectors

    The markup looks like this:

    Code:
    <section id="menubarParent">
    
      <menu id="menubar">
      
        <li>
          <a href="#">text1</a>
          // drop menu
          <menu>
            <li><a href="link11.html">text11</a></li>
            <li>
              // parent of sub-menu
              <a class="daddy" href="#">text12</a>
              // sub-menu
              <menu>
                <li class="here">text121</li>
                <li>
                  // parent of sub-sub-menu
                  <a class="daddy" href="#">text122</a>
                  // sub-sub-menu
                  <menu>
                    <li class="here">text1221</li>
                    <li>
                      // parent of sub-sub-sub-menu
                      <a class="daddy" href="#">text1222</a>
                      <menu>
                        <li class="here">text12221</li>
                      </menu>
                    </li>  // daddy text1222
                  </menu>
                </li>  // daddy text122
              </menu>
            </li>  //  // daddy text12
          </menu>
        </li>  // main drop menu item text1
            
      </menu>  // menubar
      
    </section>  // menubarParent
    My ignorance centers on wanting four different selectors that do different things and, therefore, do not bump into one another.

    1) where ever I am currently, I want to have a dark background, hovering or not

    2) darken main menu or any sub-menu item with hovering, no matter how deep the sub-menu

    3) when I am hovering over only a sub-menu item (that's somewhere different than where I currently am - not "here") then I want the vertical bar to show at the left edge of the item

    4) when I am hovering over only a sub-menu item (that's where I currently am = "here") then I want the vertical bar to show at the left edge of the item while maintaining the dark background from #1

    Code:
    /* (1) */
    #menubar li.here {
    	background: #cc9966;
    }
    
    /* (2) */
    #menubar li:hover {
    	background: #cc9966;
    }
    
    /* (3) */
    #menubar menu li:hover {
    	background: url(../images/item_select.gif) left top no-repeat;
    }
    
    /* (4) */
    #menubar menu li.here:hover, #menubar menu li.here.sfhover {
    	background: #cc9966 url(../images/item_select.gif) left top no-repeat;
    }
    THE problem is that rule #4 never gets seen .. so even if I am "here" when I hover, rule #3 takes over and never allows rule #4 to be seen. It's as if li:hover is considered identical to li.here:hover.

    My ignorance is definitely not blissful.

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by john love View Post
    The markup looks like this:

    Code:
    <section id="menubarParent">
    
      <menu id="menubar">
      
        <li>
          <a href="#">text1</a>
          // drop menu
          <menu>
            <li><a href="link11.html">text11</a></li>
            <li>
              // parent of sub-menu
              <a class="daddy" href="#">text12</a>
              // sub-menu
              <menu>
                <li class="here">text121</li>
                <li>
                  // parent of sub-sub-menu
                  <a class="daddy" href="#">text122</a>
                  // sub-sub-menu
                  <menu>
                    <li class="here">text1221</li>
                    <li>
                      // parent of sub-sub-sub-menu
                      <a class="daddy" href="#">text1222</a>
                      <menu>
                        <li class="here">text12221</li>
                      </menu>
                    </li>  // daddy text1222
                  </menu>
                </li>  // daddy text122
              </menu>
            </li>  //  // daddy text12
          </menu>
        </li>  // main drop menu item text1
            
      </menu>  // menubar
      
    </section>  // menubarParent
    My ignorance centers on wanting four different selectors that do different things and, therefore, do not bump into one another.

    1) where ever I am currently, I want to have a dark background, hovering or not

    2) darken main menu or any sub-menu item with hovering, no matter how deep the sub-menu

    3) when I am hovering over only a sub-menu item (that's somewhere different than where I currently am - not "here") then I want the vertical bar to show at the left edge of the item

    4) when I am hovering over only a sub-menu item (that's where I currently am = "here") then I want the vertical bar to show at the left edge of the item while maintaining the dark background from #1

    Code:
    /* (1) */
    #menubar li.here {
    	background: #cc9966;
    }
    
    /* (2) */
    #menubar li:hover {
    	background: #cc9966;
    }
    
    /* (3) */
    #menubar menu li:hover {
    	background: url(../images/item_select.gif) left top no-repeat;
    }
    
    /* (4) */
    #menubar menu li.here:hover, #menubar menu li.here.sfhover {
    	background: #cc9966 url(../images/item_select.gif) left top no-repeat;
    }
    THE problem is that rule #4 never gets seen .. so even if I am "here" when I hover, rule #3 takes over and never allows rule #4 to be seen. It's as if li:hover is considered identical to li.here:hover.

    My ignorance is definitely not blissful.
    Try important!.

    What browser are we looking at here?


  •  

    Tags for this Thread

    Posting Permissions

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