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

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9

    Sublevel menu not displaying at all now.


    Hi I am creating a drop-down navigation menu and had it working perfectly but now it doesn't seem to be showing at all.

    I am using jQuery to target the sublevel menu and display it and it is definitely executing because when I view with Firebug it is changing the sub level menu's display to list-item and my console.log() statement is executing in the console.

    Here is my code:
    Code:
    <ul id="navigation">
    		<li><a href="?page=home">Home</a></li>
    		<li><a href="#">Resources<img src="images/arrow_down.png" alt="arrow" class="arrow_img" /></a>
    			<ul class="sub1">
    				<li><a href="?page=categories&amp;product=activities">Activities</a></li>
    				<li><a href="?page=categories&amp;product=cab">Citizens Advice Bureau<img src="images/arrow_right.png" alt="arrow" class="arrow_img" /></a>
    					<ul>
    						<li><a href="#">Find Us</a></li>
    						<li><a href="#">Information</a></li>
    						<li><a href="#">Guide</a></li>
    					</ul>
    				</li>
    				<li><a href="?page=categories&amp;product=legal">Legal Advice</a></li>
    			</ul>
    		</li>
    		<li><a href="?page=memories">Share Your Memories</a></li>
    		<li><a href="?page=blog" class="blog_link">Blog</a></li>
    		<li><a href="?page=forum">Forum</a></li>
    		<li><a href="?page=about">About</a></li>
    		<li><a href="?page=contact">Contact</a></li>
    	</ul>
    CSS:
    Code:
    #navigation
    {
    	list-style-type: none;
    	padding: 0px;
    	margin: 0px;
    	font-size: 14px;
    	border-bottom-right-radius: 10px;
    	-moz-border-radius-bottomright: 10px;
    	overflow: hidden;
    }
    
    #navigation li
    {
    	display: inline-block;
    	width: auto;
    	float: left;
    	position: relative;
    	border-bottom: 1px solid #000;
    	border-right: 1px solid #000;
    }
    
    #navigation li:last-child
    {
    	border-bottom-right-radius: 10px;
    	-moz-border-radius-bottomright: 10px;
    	overflow: hidden;
    }
    
    #navigation li a
    {
    	background-color: #E6F2FF;
        /* For WebKit (Safari, Chrome, etc) */
        background: #E6F2FF -webkit-gradient(linear, left top, left bottom, from(#418DD9), to(#E6F2FF)) no-repeat;
        /* Mozilla,Firefox/Gecko */
        background: #E6F2FF -moz-linear-gradient(top, #418DD9, #E6F2FF) no-repeat;
        /* IE 5.5 - 7 */
        filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#418DD9, endColorstr=#E6F2FF)" no-repeat;
        /* IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#418DD9, endColorstr=#418DD9)" no-repeat;
    	text-decoration: none;
    	display: inline-block;
    	padding: 15px 30px 15px 30px;
    	color: #000;
    }
    
    #navigation li:last-child > a
    {
    	border-bottom-right-radius: 10px;
    	-moz-border-radius-bottomright: 10px;
    }
    
    #navigation li a:hover
    {
    	margin: 0px;
    	text-decoration: underline;
    	background-color: #E6F2FF;
        /* For WebKit (Safari, Chrome, etc) */
        background: #E6F2FF -webkit-gradient(linear, left bottom, left top, from(#418DD9), to(#E6F2FF)) no-repeat;
        /* Mozilla,Firefox/Gecko */
        background: #E6F2FF -moz-linear-gradient(bottom, #418DD9, #E6F2FF) no-repeat;
        /* IE 5.5 - 7 */
        filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6F2FF, endColorstr=#418DD9)" no-repeat;
        /* IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#418DD9, endColorstr=#418DD9)" no-repeat;
    }
    
    #navigation li ul
    {
    	position: absolute;
    	display: none;
    	padding: 0px;
    	left: 0px;
    }
    
    #navigation li ul > li
    {
    	display: list-item;
    	float: none;
    }
    
    #navigation li ul li a
    {
    	width: 170px;
    	padding: 8px;
    }
    
    #navigation li ul li ul
    {
    	display: none;
    	position: absolute;
    	left: 187px;
    	top: 0px;
    	list-style-type: none;
    	padding: 0px;
    }
    
    #navigation li ul li ul li
    {
    	display: list-item;
    }
    jQuery:
    Code:
    $(function(){
    	$('ul#navigation li:nth-child(2)').hover(function(){
    		$('> ul', this).css('display','list-item');
    		console.log("we are alive!");
    	},function(){
    		$('> ul', this).css('display','none');
    	});
    	
    	$('#navigation li ul li').hover(function(){
    		$('> ul', this).css('display','list-item');
    	},function(){
    		$('ul', this).css('display','none');
    	});
    });
    Does anyone notice anything wrong because I've tried so many variations to get it display in terms of how I elect the elements and order of precedence etc.

    Thank you for any help.

    Kind regards,

    NM.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Just to mention both my HTML and CSS are valid (except for the rounded borders and the background tweaks for the menu).

    It's weird, one minute it was working and the next it just stopped.

    Kind regards,

    NM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    873
    Rep Power
    275
    wouldn't you need to set a height for #navigation or for its <li> elements?
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    I got to the bottom of it.

    I put an overflow: hidden on my ul#navigation which was causing my drop down not to display.

    I worked out why as well though, because the sub-level menu is within a child list-item of the main #navigation unordered list, to display the sub-level menu meant it had to 'overflow' the main #navigation - because of my hidden declaration it was literally being hidden.

    - this sh*ts took me HOURS

    Regards,

    NM.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    "background tweaks"? You mean the gradients, right? Have you actually tested those filters in IE7 or IE8? Something makes me think they won't work.

    By the way the "#navigation li ul li ul li" rule superfluous, it applies to a subset of the elements that "#navigation li ul > li" applies to.

    Originally Posted by DonR
    wouldn't you need to set a height for #navigation or for its <li> elements?
    Are you thinking that some of their heights will collapse to 0? If so, why would they?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Originally Posted by Kravvitz
    "background tweaks"? You mean the gradients, right? Have you actually tested those filters in IE7 or IE8? Something makes me think they won't work.
    They don't work in IE 10 or Opera I know that much I'm not too fussed about that at the minute as I'm sure I can find something out there at a later date to to allow me to apply that style. I want to get as far away fro that menu as possible!

    Originally Posted by Kravvitz
    By the way the "#navigation li ul li ul li" rule superfluous, it applies to a subset of the elements that "#navigation li ul > li" applies to.
    I see so do you mean that the 2nd sub-level menu will inherit the styles from the 1st sub-level menu so I don't need to be so specific or even apply any styles to it apart from the 'left' properties and whatnot?

    @DonR - I have decided the height by setting the padding on the anchor tags. I've been looking in the 5 main browsers on a 1680x 1050 monitor and my 1280x800 laptop screen and it's viewing really good.

    Thank for all the replies guys.

    Kind regards,

    NM.
    Last edited by Nanomech; April 7th, 2013 at 05:42 PM.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    873
    Rep Power
    275
    Originally Posted by Kravvitz
    Are you thinking that some of their heights will collapse to 0? If so, why would they?
    I was actually thinking about that overflow:hidden in #navigation, and my mind went to height property...also, I was a bit confused..thinking that the entire menu had disappeared, not just the sub-menu, and I think thats what led me to think more about height for some reason.

    @Nanomech: glad you got it worked out [even with my idiotic unhelpful approach ]
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    Congratulations on figuring it out yourself. (I didn't see your post until after I made my first reply.)

    As to the filters, the "-ms-filter" property is only useful if want to avoid errors showing up with the CSS Validator because of the "filter" property and you don't mind not supportting IE versions before 8, since IE8 and IE9 support both the "filter" and "-ms-filter" properties. Also while the "-ms-filter" property needs its value in quotes, the "filter" property needs its value to not be in quotes. And thirdly, "no-repeat" is a value for "background-repeat" and "background", not "filter" nor "-ms-filter".

    I recommend you use the Ultimate CSS Gradient Generator to create your gradients.

    Originally Posted by Nanomech
    I see so do you mean that the 2nd sub-level menu will inherit the styles from the 1st sub-level menu so I don't need to be so specific or even apply any styles to it apart from the 'left' properties and whatnot?
    Correct.

    Originally Posted by Nanomech
    I've been looking in the 5 main browsers on a 1680x 1050 monitor and my 1280x800 laptop screen and it's viewing really good.
    Unless they're running different operating systems, e.g. WinXP on one and Win7 on the other, there's not much point in testing on both (assuming neither is a touch-screen). On the desktop, you can just resize your browser to whatever sizes you want to test in.

    Originally Posted by DonR
    [...] I was a bit confused..thinking that the entire menu had disappeared, not just the sub-menu, and I think thats what led me to think more about height for some reason.
    Ah. Yeah, it's the small details that can get you sometimes.

    Comments on this post

    • Nanomech agrees : Great post!
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

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

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Absolutely fantastic post.

    I'll give that link a whirl when I get home from work today.

    Just to let you know that I am only running the one operating system (Win8) and just changing my graphics settings to use the external monitor along with my laptop screen.

    Could it possibly look different on a mac for instance then? Why do you need to have different OS's to check the screen resolution ?

    Screen resolution is screen resolution, I wouldn't have thought that an OS would affect how it displays in a browser.

    (I like picking your brains)

    @DonR - thank you for your input, it is always welcome. I ran out of ideas after about 5 hours of intense work on the menu and was starting to believe the possibility I was going mad, so I was glad to get your response!

    Kind regards both,

    NM.
    Last edited by Nanomech; April 9th, 2013 at 02:01 AM.

IMN logo majestic logo threadwatch logo seochat tools logo