Drop down menu alignment & z-index

Discussion in 'CSS' started by tbwd, Feb 21, 2011.

0
  1. #1
    Ok, I got two problems as of now with my drop down. I am not the best with them so I need some help. First problem is, on the home page the sub menu appears behind the slider, but shows properly on all other pages. See here http://sydneyfirstchurchofgod.com (active links in my post not yet available:()

    Second problem is, on menu hover I need the sub menu items to display in a list but it appears they are floating left. Below is the css for the menu.
    	#navigation { height: 30px; position: absolute; top: 45px; right: 60px; }
		#navigation ul { display: block; text-align: center; position: relative; margin: 0; padding: 0; }
		#navigation ul li { float: left; padding: 5px 10px; list-style: none; }
		#navigation ul li a { display: block; font-size: 18px; color: #006666; text-decoration: none; margin: 0 20px; }
		#navigation ul li a:hover { color: #fff; }
		
		/* hover effects */
		#navigation ul li ul.sub-menu { display: none; width: 300px; background: #0ed8f6; z-index: 2; border: 1px solid #009db4; }
		#navigation ul li:hover ul.sub-menu { display: block; position: absolute; margin: 0; padding: 0; }
		#navigation ul li:hover li.sub-menu { float: none; position: relative; }
		#navigation ul li:hover li.sub-menu a { background: #69f; width: 15em; border-bottom: 1px solid #fff; color: #000; }
    Code (markup):
    Any help is appreciated.

    Thanks
     
    tbwd, Feb 21, 2011 IP
  2. buzenko

    buzenko Peon

    Messages:
    93
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The first problem change (red)

    #navigation ul li ul.sub-menu { display: none; width: 300px; background: #0ed8f6; z-index: 3; border: 1px solid #009db4; }


    and add to #slider (red)

    #slider { background: url(../images/slider-bg.png) no-repeat; width: 915px; height: 263px; margin: 0 auto; position:relative; z-index:2; }
     
    buzenko, Feb 21, 2011 IP
  3. buzenko

    buzenko Peon

    Messages:
    93
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Second problem add new rule

    #navigation ul.sub-menu li {clear:both; }


    /* hover effects */
    #navigation ul li ul.sub-menu { display: none; width: 300px; background: #0ed8f6; z-index: 3; border: 10px solid #009db4; }
    #navigation ul li:hover ul.sub-menu { display: block; position: absolute; margin: 0; padding: 0; }
    #navigation ul li:hover li.sub-menu { float: none; position: relative; }
    #navigation ul li:hover li.sub-menu a { background: #69f; width: 15em; border-bottom: 1px solid #fff; color: #000; }
    #navigation ul.sub-menu li {clear:both; }


    I also recommended change width sub menu to 250px
    #navigation ul li ul.sub-menu { display: none; width: 250px; background: #0ed8f6; z-index: 3; border: 10px solid #009db4; }
     
    buzenko, Feb 21, 2011 IP
  4. tbwd

    tbwd Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks you so much for your help, I've been scratching my head for awhile now on this. All is better in my world for the day.
     
    tbwd, Feb 21, 2011 IP