Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

Results 1 to 4 of 4

Thread: CSS Double dropdown problem in IE

  1. #1

    CSS Double dropdown problem in IE

    OK, I have created a site with a double dropdown menu (mouseover "Security > Process" to see it). It works perfectly in every browser EXCEPT... you guessed it.... Win IE.

    In Win IE, when I mouseover the appropriate button, the second dropdown doesn't trigger and show up.

    What's wrong in my code?

  2. #2
    What is your code?

  3. #3
    in ie7 beta the submenu's show, although somewhat botched.

  4. #4
    Quote Originally Posted by bigmtnskier
    What is your code?
    Code:
    /* CSS Document */
    body{
    	margin: 0;
    	padding: 0;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 75%;
    	background: #022F44;
    }
    
    h3{
    	margin: 0;
    	padding: 0;
    	font-weight: normal;
    	text-transform: uppercase;
    }
    
    #wrapper{
    	margin: 0 auto;
    	padding: 0;
    	width: 786px;
    	height: 612px;
    	background-color: #022F44;
    	padding-bottom: 150px;
    }
    
    #main{
    	margin: 0;
    	padding: 0;
    	background-color: #FFF;
    }
    
    #header{
    	margin: 0;
    	padding: 0;
    	width: 100%;
    	background: url(images/matrix.gif) top right no-repeat;
    }
    
    #content{
    	margin: 0;
    	padding: 0;
    	width: 100%;
    	height: 288px;
    	border-top: 5px #000 solid;
    	border-bottom: 5px #000 solid;
    	
    }
    
    #content dl dt{
    	margin: 0;
    	padding: 0;
    	font-weight: bold;
    }
    
    #content dl dd{
    	margin: 0;
    	padding: 0;
    	margin-bottom: 10px;
    	text-indent: 0;
    }
    
    #content ul li{
    	margin-bottom: 10px;
    }
    
    #content .popup_button{
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    #content .popup_button li{
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    #content .popup_button li a{
    	margin: 5px 0;
    	padding: .5em 2em;
    	vertical-align: middle;
    	/* margin-bottom: 5px; */
    	display: block;
    	width: 270px;
    	height: auto;
    	background-color: #C9E8AD;
    	color: #000;
    	text-decoration: none;
    	border-left: 1px #BEBEBE solid;
    	border-bottom: 1px #BEBEBE solid;
    }
    #content .popup_button li a:hover, #content .popup_button li a:focus{
    	background-color: #A3D876;
    	border-left: 1px #8F8F8F solid;
    	border-bottom: 1px #8F8F8F solid;
    }
    
    
    /* Individual page styles */
    
    #home #content{
    	background: url(images/bg_home.jpg) top right no-repeat;
    }
    #home #content{
    	margin: 0;
    	padding: 0;
    	width: 100%;
    	height: 288px;
    	border-top: 5px #000 solid;
    	border-bottom: 5px #000 solid;
    }
    #home #content p{
    	margin: 30px 0 10px 28px;
    	padding: 0;
    	width: 250px;
    }
    #home #content ul li{
    	margin-bottom: 2px;
    }
    #home #content #text{
    	margin: 0px 0 10px 28px;
    	padding: 0 5px 0 0;
    	margin-left: 0px;
    	width: 292px;
    	height: auto;
    	overflow: invisible;
    }
    
    
    #about #content{
    	background: url(images/bg_about.jpg) top right no-repeat;
    	height: auto;
    }
    #about #content #text{
    	margin: 30px 0 10px 28px;
    	padding: 0 5px 0 0;
    	margin-left: 144px;
    	width: 340px;
    	height: auto;
    }
    
    #about_management #content{
    	background: url(images/bg_about.jpg) top right no-repeat;
    	height: auto;
    }
    #about_management #content #text{
    	margin: 30px 0 10px 28px;
    	padding: 0 5px 0 0;
    	margin-left: 144px;
    	width: 340px;
    	height: auto;
    }
    
    #about_history #content{
    	background: url(images/bg_about.jpg) top right no-repeat;
    	height: auto;
    }
    #about_history #content #text{
    	margin: 30px 0 10px 28px;
    	padding: 0 5px 0 0;
    	margin-left: 144px;
    	width: 340px;
    	height: auto;
    }
    #about_history #content #text table td{
    	margin: 0;
    	padding: 3px;
    	vertical-align: text-top;
    }
    #about_history #content #text table td p{
    	margin: 0;
    	padding: 0;
    	margin-bottom: 5px;
    }
    
    #security_process #content{
    	background: url(images/bg_security_process.jpg) top right no-repeat;
    	height: auto;
    }
    #consulting_planning #content{
    	background: url(images/bg_consulting_planning.jpg) top right no-repeat;
    	height: auto;
    }
    #engineering_design #content{
    	background: url(images/bg_engineering_design.jpg) top right no-repeat;
    	height: auto;
    }
    #systems_training #content{
    	background: url(images/bg_systems_training.jpg) top right no-repeat;
    	height: auto;
    }
    #maintenance_support #content{
    	background: url(images/bg_maintenance_support.jpg) top right no-repeat;
    	height: auto;
    }
    #system_installation #content{
    	background: url(images/bg_system_installation.jpg) top right no-repeat;
    	height: auto;
    }
    
    #security_process #content #text, #consulting_planning #content #text, #engineering_design #content #text, #systems_training #content #text, #maintenance_support #content #text, #system_installation #content #text{
    	margin: 30px 0 10px 28px;
    	padding: 0 5px 0 0;
    	margin-left: 144px;
    	width: 340px;
    	height: auto;
    }
    
    #security_access #content{
    	background: url(images/bg_security_access2.jpg) top right no-repeat;
    	height: auto;
    }
    #security_access #content #text{
    	margin: 30px 0 10px 28px;
    	padding: 0 5px 0 0;
    	margin-left: 144px;
    	width: 340px;
    	height: auto;
    }
    #security_access #content #text ul li{
    	margin-bottom: 2px;
    }
    
    #security_cctv #content{
    	background: url(images/bg_security_cctv.jpg) top right no-repeat;
    	height: auto;
    }
    #security_cctv #content #text{
    	margin: 30px 0 10px 28px;
    	padding: 0 5px 0 0;
    	margin-left: 144px;
    	width: 340px;
    	height: auto;
    }
    
    #security_manufacturers #content{
    	background: url(images/bg_security_manufacturers.jpg) top right no-repeat;
    	height: auto;
    }
    #security_manufacturers #content #text{
    	margin: 30px 0 10px 28px;
    	padding: 0 5px 0 0;
    	margin-left: 144px;
    	width: 340px;
    	height: auto;
    }
    
    #dssi #content{
    	background: url(images/bg_dssi_home.jpg) top right no-repeat; 
    	height: auto;
    	margin: 0;
    	padding: 0;
    }
    #dssi #content #text{
    	margin: 30px 0 10px 28px;
    	padding: 0 5px 0 0;
    	margin-left: 144px;
    	width: 340px;
    	height: auto;
    }
    
    #airorlite #content{
    	background: url(images/bg_airorlite.jpg) top right no-repeat;
    	height: auto;
    }
    #airorlite #content #text{
    	margin: 30px 0 10px 28px;
    	padding: 0 5px 0 0;
    	/* margin-left: 20px;
    	width: 464px; */
    	margin-left: 144px;
    	width: 340px;
    	height: auto;
    }
    
    
    #background{
    	margin: 0;
    	padding: 0;
    	background: url(images/background.gif) top left repeat-y;
    }
    
    /* Navigation styles */
    
    #navigation{
    	margin: 0;
    	padding: 0;
    	margin-top: 16px;
    	/* margin-left: 16px; */
    	width: 100%;
    	height: 91px;
    	background: url(images/nav_rule.gif) top left no-repeat;
    }
    
    #navigation ul{
    	margin: 0;
    	padding: 0;
    	margin-top: 5px;
    	list-style: none;
    	display: inline;
    	float: right;
    	width: auto;
    }
    
    #navigation li{
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	display: inline;
    	position: relative;
    	float: left;
    }
    
    #navigation li a{
    	margin: 0;
    	padding: 0;
    	height: 40px;
    	float: left;
    	text-indent: -5000px;
    	text-decoration: none;
    	display: block;
    }
    
    /* Nav buttons */
    
    #bHome a{
    	width: 98px;
    	background: url(images/bHome.gif) no-repeat; 
    	display: block;
    }
    #bHome a:hover, #bAbout a:focus{
    	background-position: 0 -45px;
    } 
    
    #bAbout a{
    	width: 92px;
    	background: url(images/bAbout.gif) no-repeat; 
    	display: block;
    }
    #bAbout a:hover, #bAbout a:focus{
    	background-position: 0 -45px;
    } 
    
    #bSecurity a{
    	width: 92px;
    	background: url(images/bSecurity.gif) no-repeat; 
    	display: block;
    }
    #bSecurity a:hover, #bSecurity a:focus{
    	background-position: 0 -45px;
    }
    
    #bDssi a{
    	width: 93px;
    	background: url(images/bDssi.gif) no-repeat; 
    	display: block;
    }
    #bDssi a:hover, #bDssi a:focus{
    	background-position: 0 -45px;
    }
    
    #bViscom a{
    	width: 90px;
    	background: url(images/bViscom.gif) no-repeat; 
    	display: block;
    }
    #bViscom a:hover, #bViscom a:focus{
    	background-position: 0 -45px;
    }
    
    #bAirorlite a{
    	width: 92px;
    	background: url(images/bAirorlite.gif) no-repeat; 
    	display: block;
    }
    #bAirorlite a:hover, #bAirorlite a:focus{
    	background-position: 0 -45px;
    }
    
    #bInvestor a{
    	width: 94px;
    	background: url(images/bInvestor.gif) no-repeat; 
    	display: block;
    }
    #bInvestor a:hover, #bInvestor a:focus{
    	background-position: 0 -45px;
    }
    
    #bContact a{
    	width: 120px;
    	background: url(images/bContact.gif) no-repeat; 
    	display: block;
    }
    #bContact a:hover, #bContact a:focus{
    	background-position: 0 -45px;
    }
    
    /* Dropdown functions */
    
    #nav li ul { /* second-level lists */
    	position: absolute;
    	width: 100px;
    	height: auto;
    	background: #5CB809;
    	top: 35px;
    	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    	padding: 5px;
    	z-index: 1;
    }
    
    #nav li ul li{
    	display: block;
    }
    
    #nav li ul li a{
    	margin: 0;
    	padding: 5px .5px !important; 
    	padding: /**/ .5em .5em; /* for IE5Win only */
    	background-image: none;
    	text-indent: 0;
    	text-decoration: none;
    	color: #022F44;
    	width: 100px;
    	height: auto;
    	display: block;
    	text-align: center;
    }
    
    #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    	left: -10px !important;
    	left: /**/ -15; /* for IE5Win only */
    }
    
    
    
    #nav li ul li a:hover, #nav li ul li a:focus{
    	background: #95D15F;
    	display: block;
    	width: 100px;
    	text-align: center;
    }
    
    /* Third Level Nav */
    
    #nav li ul ul { /* third-and-above-level lists */
    	position: absolute;
    	margin: -2.7em 0 0 95px;
    	display: none;
    }
    
    #nav li:hover ul ul, #nav li.sfhover ul ul {
    	left: -999em;
    	background: #95D15F;
    }
    
    #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
    	left: auto;
    	left: /**/ 0; /* for IE5Win only */
    }
    
    /* #nav li li:hover ul { 
    	display: block; 
    } */
    
    #nav li li:hover ul, #nav li li.sfhover ul {
    	display: block;
    }
    
    #nav li ul ul li a:hover, #nav li ul ul li a:focus{
    	background: #5CB809;
    	display: block;
    	width: 100px;
    	text-align: center;
    }
    
    
    /* Footer */
    
    #footer_bottom{
    	margin: 0;
    	padding: 0;
    	margin-left: 25px;
    }
    
    
    /* Popup Styles */
    
    #popupBody{
    	margin: 0;
    	padding: 0px;
    	border-left: 1px #72BE37 solid;
    	background: #FFF url(images/bg_popup.gif) top left repeat-y;  
    	height: auto;
    }
    
    #pWrapper{
    	margin: 0;
    	padding: 0;
    	height: 100%;
    	width: 100%;
    }
    
    #pContent{
    	margin: 0;
    	padding: 0;
    	margin-left: 34px;
    	height: auto;
    	width: 350px;
    }
    
    #popupBody dt{
    	margin: 0;
    	padding: 0;
    	text-indent: 0;
    	font-weight: bold;
    }
    
    #popupBody dd{
    	margin: 0;
    	padding: 0;
    	text-indent: 0;
    }
    
    #popupBody #close a{
    	margin: 0;
    	padding: 0 1.5em;
    	font-size: 80%;
    	color: #0E4970;
    	height: auto;
    	width: 100px;
    	text-decoration: none;
    	display: block;
    	background: url(images/close.gif) top left no-repeat;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012