Thread: CSS Menu help!

    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2010
    Posts
    35
    Rep Power
    9

    CSS Menu help!


    Hey guys! I'm new here (hello!) and I was hoping someone might be able to give me a few tips on how to solve my little issue. I'm currently trying to create a CSS dropdown menu. I have the CSS links in a floating list and when you hover over a link, a background image appears and the list appears. That's all fine and dandy. However, when someone tries to go into the list, the background image on the link disappears. I need the bg-image to stay on the link so the bg-image overlaps the list below. Anyone got any tips on how to keep that bg-image remaining until the user hovers off the list completely and not just on the link? Here's the code for that little section.

    CSS:

    Code:
    /* top nav links */
    .top_nav{color:#999999;
    				 font-size:12px;
    }
    .top_nav a{font-weight:bold;
    					 font-size:12px;
    					 color:#666666;
    					 vertical-align:bottom;
    					 display:block;
    					 height:25px;
    					 padding-top:5px;
    }
    .top_nav a:hover{color:#1E4A92;text-decoration:none;}
    .top_nav div{position:relative;left:150px;top:-5px;height:25px;}
    .top-menu{margin:0px;padding:0px;}
    a.tn-men{width:111px;position:relative;top:5px;}
    .top-menu a.tn-men:hover{background:url('images/head-tab_men.gif') top left no-repeat;z-index:5000;}
    .top-menu li:hover > ul{display:block;}
    .top-menu li{float:left;padding-right:3px;position:relative;z-index:500;text-align:center;z-index:500;}
    .menu-item{display:none;width:210px;position:absolute;top:23px;margin:5px 0px;padding:20px 5px 20px;;border:1px solid #999999;background-color:#ffffff;z-index:0;}
    .menu-item li{float:left;width:45%;}
    .menu-item li a{background:none;font-size:10px;font-weight:normal;text-decoration:underline;display:block;padding:5px 15px 0px 15px;height:auto;}
    HTML:
    Code:
    <div class="top_nav">
    <div>
    <ul class="top-menu">
    	 <li>
    		 <a href="temp.htm" class="tn-men">Men's Clothing</a>
    		 <ul class="menu-item">
    		 		 <li>
    				 		 <a href="">Jackets</a>
    						 <a href="">Shirts</a>
    						 <a href="">Shorts</a>
    						 <a href="">Pants</a>
    						 <a href="">Gloves</a>
    				 </li>
    				 <li>
    				 		 <a href="">Base Layer (Underwear)</a>
    						 <a href="">Accessories</a>
    						 <a href="">Hats</a>
    				 </li>
    		 </ul>
     </li>
     <li>
     		 <a href="temp.htm">Women's Clothing |</a>
     </li>
     <li>
     		 <a href="temp.htm">Footwear |</a>
     </li>
     <li>
     		 <a href="temp.htm">Gear |</a>
     </li>
     <li>
     		 <a href="temp.htm">Sale</a>
     </li>
    </ul>
    </div>	
    </div>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2007
    Posts
    2
    Rep Power
    0
    I can see that you are setting background:none for the "menu-item" li a

    Try giving image instead of setting it to none.

    Hope this helps you.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2010
    Posts
    35
    Rep Power
    9
    Originally Posted by technica
    I can see that you are setting background:none for the "menu-item" li a

    Try giving image instead of setting it to none.

    Hope this helps you.
    Hey! Thanks for replying! It still disappears. The reason why I had bg-image set to none was because I tried having the li above the link set with the bg-image. The reason why the the bg-image disappears is that I hover off the link to the list below. I'm still baffled how to get this thing working.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, CBloss.

    Try this:
    Code:
    .top-menu a.tn-men:hover, .top-menu li:hover a.tn-men
    {background:url('images/head-tab_men.gif') top left no-repeat;z-index:5000;}
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2010
    Posts
    35
    Rep Power
    9
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, CBloss.

    Try this:
    Code:
    .top-menu a.tn-men:hover, .top-menu li:hover a.tn-men
    {background:url('images/head-tab_men.gif') top left no-repeat;z-index:5000;}
    Thanks Kravvitz!

    Oh my gosh. Are you kidding me? That's all it took? I thought that bit of code would just declare the two, but wouldn't connect them. Wow. Now don't I feel silly. I solved in a different way this morning. What I did was created the div that had the tab and used CSS positioning to put the tab image behind the link and set it to display none and made it visible on hover.

    I just feel a bit silly that you solved it so easily. My way didn't have a bunch more code, but yours is cleaner. Thank you for helping me out Kravvtiz!!
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You're welcome

    I'm an expert and have dealt with this many times, so don't feel bad.

    My way didn't have a bunch more code, but yours is cleaner.
    Eh? Do you mean that my suggestion uses more code than the workaround you had found?

    P.S. Why did you close this thread?
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2010
    Posts
    35
    Rep Power
    9
    Originally Posted by Kravvitz
    Eh? Do you mean that my suggestion uses more code than the workaround you had found?
    No, no. Other way around. Your version was cleaner.

    Originally Posted by Kravvitz
    P.S. Why did you close this thread?
    Cuz it was solved? Was I not supposed to?
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Other way around. Your version was cleaner.
    Ah. Ok.

    Cuz it was solved? Was I not supposed to?
    You can close it if you really want to (though it might not let you since I reopened it so you could reply to my reply). It's just not very common to do that here.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2010
    Posts
    35
    Rep Power
    9
    Originally Posted by Kravvitz
    You can close it if you really want to (though it might not let you since I reopened it so you could reply to my reply). It's just not very common to do that here.
    Oh. Some forms are extremely picky about it. Anywho, thanks again for your help and sharing your knowledge!!

IMN logo majestic logo threadwatch logo seochat tools logo