SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS: Drop-Down Not Displaying Properly

    Hello there!

    Currently, I am utilizing a vertical drop-down menu webpage, and am having a bit of trouble with IE; when I hover over the main menu, the drop-down suddenly disappears.

    Any help is appreciated!

    CSS is as follows:
    Code:
    body {
    background-color: #9999EE;
    }
    
    #container {
    		width: 48em;
    		margin: auto;
    	}
    
    pre {
    font-family: arial;
    font-size: 12px;
    color: #FFFFFF;
    }
    	
    	#header {
    		height: 150px;
    		background-color: #6666FF;
    		padding: 0px;
    		margin: 0px;
    	}
    	
    		.menuContainer {
    			background: #eee;
    			float: left;
    			padding: 0;
    			margin: 0;
    		}
    
    		.menuContainer ul {
    			list-style: none;
    			margin: 0;
    			padding: 0;
    			width: 12em;
    			height: 100%;
    			float: left;
    		}
    		
    		.menuContainer a {
    			font: bold 11px/16px arial, helvetica, sans-serif;
    			display: block;
    			border-width: 2px;
    			border-style: solid;
    			border-color: #DDDDDD;
    			margin: 0;
    			padding: 1px;
    		}
    		
    		.menuContainer h2 {
    			display: block;
    			margin: 0;
    			padding: 0;
    		}
    		
    		.menuContainer h2 a {
    			color: #fff;
    			background: #553377;
    			text-transform: uppercase;
    			text-decoration: none;
    		}
    		
    		.menuContainer h2 a:hover {
    			color: #fff;
    			background: #774499;
    			text-transformation: uppercase;
    			text-decoration: none;
    		}
    		
    		.menuContainer a {
    			color: #fff;
    			background: #005588;
    			text-decoration: none;
    		}
    		
    		.menuContainer a:hover {
    			color: #fff;
    			background: #0088BB;
    		}
    		
    		.menuContainer li {
    			position: relative;
    		}
    		
    		.menuContainer ul ul ul {
    			position: absolute;
    			top: 0;
    			left: 100%;
    		}
    		
    		.menuContainer ul ul {
    			position: absolute;
    			z-index: 500;
    		}
    		
    		#content {
    			min-height: 185px;
    			font-family: arial;
    			font-size: 12px;
    			color: #FFFFFF;
    			background-color: #AAAAFF;
    		}
    		
    		#content div {
    			margin-bottom: -0px;
    			padding-bottom: 0px;
    		}
    		
    		.format {
    			padding-top: 30px;
    			padding-left: 50px;
    			padding-bottom: 0px;
    		}
    		
    		#footer {
    			background-color: #445544;
    			font-family: arial;
    			font-size: 12px;
    			color: #FFFFFF;
    			height: 50px;
    			padding-top: 1px;
    		}
    		
    .menuContainer ul ul,
    .menuContainer ul li ul ul,
    .menuContainer ul ul li ul ul
    {display: none;}
    
    .menuContainer ul:hover li ul,
    .menuContainer ul ul:hover
    {display: block;}
    HTML Code is as follows:
    Code:
    <div id="container">
    	<div id="header"></div>
    	<div id="content">
    		<div id="menuContainer">
    			<ul id="verticalmenu" class="menu">
    				<li><a href="javascript:changePage('home')">Home</a></li>
    				<li><a href="javascript:changePage()" >About</a>
        				<ul id="submenu1">
    						<li><a href="javascript:changePage('history')">History</a></li>
        					<li><a href="javascript:changePage('employees')">Employees</a></li>
        					<li><a href="javascript:changePage('employment')">Employment Opportunities</a></li>
        				</ul>
    				</li>
    				<li><a href="javascript:changePage('products')">Products</a></li>
    				<li><a href="javascript:changePage('links')">Links</a></li>
    			</ul>
    		</div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Sounds like the menu is disappearing behind the content below it. This is usually a z-index issue. Try this:

    Code:
    .menuContainer {
      z-index: 20;
    }

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Again, (if this is the case) you forgot the position:relative; on it Ralph.

    Also, you have the logic wrong OP, normally on hover of an <li> you show the submenu ul..not ul:hover
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Again, (if this is the case) you forgot the position:relative; on it Ralph.

    Also, you have the logic wrong OP, normally on hover of an <li> you show the submenu ul..not ul:hover
    I tried Position:Relative, but when i do, it creates a big white box. I'll go more indeph later.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    If you put it online it will make it much easier for us to debug since we have firebug (and not to brag, but I debug everything on that)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    If you put it online it will make it much easier for us to debug since we have firebug (and not to brag, but I debug everything on that)
    Sure.

    Here's the address:

    kelleykreativesonline.com/examples/dropdownmenu/

    Also, I'm doing the testing in IE7.


Bookmarks

Posting Permissions

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