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 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts

    navigation bar submenu needs to appear under main menu

    I'm having a bit of trouble with a navigation bar. I made a version of this site where this worked, but had to start redesigning it because it showed up vertical in ie7.

    My goal is to have my submenu ul appear UNDER my main menu.. it probably sounds weird but that's just the way the design/ aesthetics are suppose to work.

    The website is at hrnewseastanglia.com

    This is my code so far. I'm trying to do it using z-index as you can see... but it's not working:
    Code:
    #nav{float:left;}
    ul.menu,
    ul.menu li,
    ul.menu ul{list-style:none; margin:0; padding:0;}
    
    ul.menu li
    {
    float:left;
    position:relative;
    z-index:599;
    vertical-align:middle;
    margin:0;
    padding:0;
    zoom:1;
    }
    
    ul.menu li.hover,
    ul.menu li:hover{cursor:default;}
    
    ul.menu ul
    {
    visibility:hidden;
    position:absolute;
    top:0;
    left:0;
    z-index:558;
    width:80px;
    }
    
    ul.menu ul li{float:none;}
    ul.menu ul ul{top:1px; left:99%;}
    ul.menu li:hover > ul{visibility:visible;}
    
    ul.menu li,
    ul.menu li a
    {
    width:80px;
    font-size:13px;
    line-height:25px;
    text-align:center;
    text-decoration:none;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;}
    ul.menu li{margin-right:15px;
    }
    
    html>body ul.menu li:hover > a{background-color:#9acc99; color:#495049;}
    
    ul.menu li.hover,
    ul.menu li:hover {background-color:#9acc99; color:#495049;}
    ul.menu li:hover
    {
    -moz-box-shadow: 0 0 15px 12px #000;
    -webkit-box-shadow: 0 0 15px 12px#000;
    box-shadow: 0 0 15px 12px #000;
    }
    
    ul.menu li ul
    {
    background-color:#999;
    padding-bottom:15px;
    padding-left:1px;
    padding-right:1px;
    padding-top:25px;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    }
    
    ul.menu li ul li a,
    ul.menu li ul li{
    font-size:10px;
    line-height:12px;
    margin-top:15px;
    background-color:#999;
    }
    
    html>body ul.menu li ul li:hover > a,
    ul.menu li ul li.hover,
    ul.menu li ul li:hover
    {
    -moz-box-shadow: 0 0 0 0 #000;
    -webkit-box-shadow: 0 0 0 0 #000;
    box-shadow: 0 0 0 0 #000;
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    }
    
    html>body ul.menu li ul li:hover > a{background-color:#666; color:#fff;}
    ul.menu li ul li.hover,
    ul.menu li ul li:hover{background-color:#666; color:#fff;}
    Can anyone help?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello dlthomas,
    Your link is down right now.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ah sorry.. I left maintanence mode on. Should be ok now

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Yup, it's up now.

    You are placing the child ul on top of the parent ul which covers the parent. I didn't mess around with it much but a hover background color on the parent and margin the child down so it's under might work better than using padding. Look at this -
    Code:
    ul.menu li ul{
    background-color:#999;
    padding-bottom:15px; 
    padding-left:1px; 
    padding-right:1px; 
    /*padding-top:25px; */
    margin-top: 25px;
    border-radius:6px; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    dlthomas (12-12-2010)

  • #5
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Yes I think your right, putting it underneath isn't going to work. One thing I need to do in that case is somehow affect the parent li. A bit like 'ul.menu ul li:hover > a' except the other way around. I'm guessing this is only possible with jquery or js.

    In all honesty I haven't really coded jQuery a lot before. This is what I'm trying (make the child's top corners and parent li's bottom corners square) to make them appear to join but it isn't working.

    Code:
    $(document).ready(function(){
    	
    	if(  $("ul.menu ul").is(":visible") == "true" ){
    	  $('ul.menu li, ul.menu li a').css({ border-bottom-right-radius:0px, -moz-border-radius-bottomright:0px, -webkit-border-bottom-right-radius:0px, border-bottom-left-radius:0px, -moz-border-radius-bottomleft:0px, -webkit-border-bottom-left-radius:0px });
    	}
    	else{
    	  $('ul.menu li, ul.menu li a').css({ border-radius:6px, -moz-border-radius:6px, -webkit-border-radius:6px });
    	}
    	
    	
    });
    If it makes more sense, this is the visual I'm working to:

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Aha! Of course... I made a mistake by making the children have a position. If you just leave them be, they will stretch the parent li and you can style them that way.

    If anyone needs this sort of thing, I hope this helps:
    Code:
    #nav{float:left; position:absolute; left:160px; z-index:597;}
    ul.menu,
    ul.menu li,
    ul.menu ul{list-style:none; margin:0; padding:0;}
    ul.menu li{float:left; position:relative; z-index:598; vertical-align:middle; margin:0; padding:0; zoom:1;}
    ul.menu li.hover,
    ul.menu li:hover{cursor:default;}
    ul.menu ul{visibility:hidden; width:78px;}
    ul.menu ul li{float:none;}
    ul.menu ul ul{top:1px; left:99%;}
    ul.menu li:hover > ul{visibility:visible;}
    ul.menu li,
    ul.menu li a{width:80px; font-size:13px; line-height:25px; text-align:center; text-decoration:none; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
    ul.menu li{margin-right:15px; border-width:2px\9; border-style:solid\9; border-color:transparent\9; _border-width:0px;}
    html>body ul.menu li:hover > a{background-color:#9acc99; color:#495049;}
    ul.menu li.hover,
    ul.menu li:hover {background-color:#9acc99; color:#495049; border-color:#000\9;}
    ul.menu li:hover{-moz-box-shadow: 0 0 15px 12px #000; -webkit-box-shadow: 0 0 15px 12px#000; box-shadow: 0 0 15px 12px #000;}
    ul.menu li ul{background-color:#999; padding-bottom:15px; padding-top:5px; margin-top:5px; padding-left:1px; padding-right:1px; border-bottom-left-radius:6px; border-bottom-right-radius:6px; -moz-border-radius-bottomleft:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px;}
    ul.menu li ul li a,
    ul.menu li ul li{width:78px; font-size:10px; line-height:12px; margin-top:15px; background-color:#999; border-width:0px\9;}
    html>body ul.menu li ul li:hover > a,
    ul.menu li ul li.hover,
    ul.menu li ul li:hover{-moz-box-shadow: 0 0 0 0 #000; -webkit-box-shadow: 0 0 0 0 #000; box-shadow: 0 0 0 0 #000; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;}
    html>body ul.menu li ul li:hover > a{background-color:transparent; color:#fff;}
    ul.menu li ul li a:hover{_background-color:#666;}
    ul.menu li ul li.hover,
    ul.menu li ul li:hover{background-color:#666; color:#fff;}

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello dlthomas,
    That does look much better although the child menus are so small I can't read them.
    I have a couple menu examples that similar... but much simpler, just in case you were interested -
    one
    two
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    dlthomas (12-12-2010)

  • #8
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks Excavator that's really helpful. I've made the submenu text a little bigger, hopefully that should do it.

    Yes the code for these dropdowns are far less messy than mine. I'm going to take a look at these for next time I think


  •  

    Posting Permissions

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