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

    Join Date
    Jan 2011
    Posts
    3
    Rep Power
    0

    Unhappy Drop Down Menu Woes


    I can't get a drop down menu to display and don't know what I'm doing wrong. My guess is that other styles for this menu are interfering, but I've tried experimenting and it never works. Can anyone kindly assist?

    Here's the CSS for the part of my navigation menu I'm working on (I know this is not the most streamlined):
    Code:
    #nav2 {	
    	float: right;
    	background-image: url(../2010site/graphics/nav2back.jpg);
    	background-repeat: no-repeat;
    	height: 32px;
    	font-size: 14px;
    	color: #ffffff;
    	text-decoration: none;
    	text-align: center;
    	margin: auto;
    	padding: 0px 30px 0px 0px;
    }
    
    
    #nav2 ul li {
    	display: inline;
    	list-style: none;
    	background-image:url(../2010site/graphics/rednavdetail.jpg);
    	background-repeat: no-repeat;
    	margin: auto;
    	padding: 0px 20px 0px 20px;
    }
    
    #nav2 a {
    	color: #ffffff;
    	margin: auto;
    	padding: 0px 0px 0px 0px;
    
    }
    
    #nav2 a:hover {
    	text-decoration: underline;
    	margin: auto;
    	padding: 0px 0px 0px 0px;
    }
    Then I'm trying to add a drop down to a nested list item within that navigation using
    Code:
     li ul {display: none;} 
     li:hover > ul {display: block;}
    But whenever I add that at the end of the nav2 styles, I can only see my nested menu that is supposed to appear during the hover. The other menu items beyond the nested UL don't appear at all.

    Here's the html:
    Code:
    		<ul>   
        		  <li><a href="http://">Schedule</a>
                         <ul>
                        	<li><a href="http://">item one</a></li>
                    	<li><a href="http://">item two</a></li>
                    	<li><a href="http://">item three</a></li>
                         </ul>
                      </li>
        		  <li><a href="http://">Programs</a></li>
        		  <li><a href="http://">Events</a></li>
    	          <li><a href="http://">Donate</a></li>
      	       </ul>
    Last edited by Kravvitz; January 26th, 2011 at 09:59 PM. Reason: added [code] tags
  2. #2
  3. 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, webapprenticemp.

    Normally the sub-menus are absolutely positioned, so they don't affect the placement of items in their parent item's level.

    Here's one of the best articles on making basic menus like this:
    http://htmldog.com/articles/suckerfish/dropdowns/

    I know this is not the most streamlined
    By the way, those style rules could probably be shortened to the following. (I made a few assumptions, which might be incorrect.)
    Code:
    #nav2 {
    	float: right;
    	background: url(../2010site/graphics/nav2back.jpg) no-repeat;
    	height: 32px;
    	font-size: 14px;
    	color: #fff;
    	text-align: center;
    	margin: 0;
    	padding: 0 30px 0 0;
    }
    
    #nav2 ul li {
    	display: inline;
    	list-style: none;
    	background: url(../2010site/graphics/rednavdetail.jpg) no-repeat;
    	padding: 0 20px;
    }
    
    #nav2 a {
    	color: #fff;
    	padding: 0;
    }
    
    #nav2 a:hover {
    	text-decoration: underline;
    }
    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).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    3
    Rep Power
    0

    Red face background repeat


    I was able to streamline the code a little bit, but oddly when I put the "background no-repeat" on the same line as the "background-image" address, the image doesn't show up at all. This is only the case for the "ul li" image, not for the basic "nav2" div above it.

    However, this is beside the point. Still working on the drop down... Thanks for the Suckerfish page. I was looking at Eric Meyer's pages and this looks a little more clear, though I think I have so much going on in this page design that the basic explanations of how to do the drop down are not going to be sufficient. I'll keep trying though!
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    3
    Rep Power
    0

    Red face Got it to work in Firefox, now IE. Where do I put a behavior call?


    After lots of editing, I got the drop down to work and styled to fit my design.

    Now, of course, it won't work in IE, and the drop down is not just hidden, but is hiding the rest of the list items in my first unordered list. Ugh.

    I'm going to try calling in a "behavior" file that I have with my Eric Meyer book, but I don't know where to put the behavior declaration. My CSS is an attached file that is modifying an include file, so there's no head in the include file. I don't want to put the behavior call in the head of every single page of my website (they're all using the include file). Is it possible to put a behavior call into a CSS document? Where/what do I put it with?
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    oddly when I put the "background no-repeat" on the same line as the "background-image" address, the image doesn't show up at all.
    Did you change the property name? The image wouldn't show up if you added a value for the "background-repeat" property as a value of the "background-image" property. The "background" property is a shortcut property.

    Is it possible to put a behavior call into a CSS document? Where/what do I put it with?
    If I understand what you're asking correctly, then yes. Hopefully this will provide the details you need: whatever:hover

    Now, of course, it won't work in IE, and the drop down is not just hidden, but is hiding the rest of the list items in my first unordered list.
    I hope you mean IE6. IE7+ support "li:hover" (when they've been instructed to use "standards mode"). If you would like us to take a look at that, then we would probably need to see more of your HTML and CSS.

    My CSS is an attached file that is modifying an include file, so there's no head in the include file.
    It sounds like you might have invalid markup. Stylesheets should only be included inside the <head> element.
    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).

IMN logo majestic logo threadwatch logo seochat tools logo