The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


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