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 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    IE Drop Down Problem

    Hello all,

    I am having a problem with a drop down menu I am trying to create. I have a menu container div that has a border on it. When the drop down menu pulls down I have padding-top: 2px on the ul ul to allow the border to show through. In Chrome and firefox this works fine and the padding is treated as part of ul ul and when moving the mouse down over the border the menu stays open. But in IE the padding over the border isn't being seen and when the mouse moves over the border the menu closes. Below is the current code I am using. Please let me know if that doesn't make sense.

    Thank you in advance!

    Code:
    #menu {
    	position: relative;
    	margin: 0 auto;
    	z-index: 500;
    	height: 47px;
    	width: 1001px;
    	border: 2px solid #000e94;
    	}
    
    #menu ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	}
    
    #menu ul ul {
    	position: absolute; 
    	left: -9999px;
    	padding-top: 2px;
    	}
    
    #menu ul li {
    	background: #fff;
    	float: left;
    	}
    
    #menu ul li a {
    	display: block; 
    	float: left; 
    	width: 141px;
    	height: 35px;
    	padding-top: 12px;
    	border-left: 1px solid #52C6F2;
    	border-right: 1px solid #52C6F2;
    	font: normal .9em verdana, sans-serif;
    	font-weight: bold;
    	color: #ffffff;
    	text-decoration: none; 
    	background: #00aeef;
    	}
    	
    #menu ul li a.twoline {
    	height: 42px;
    	padding-top: 5px;
    	}
    
    #menu ul ul li {
    	margin: 0;
    	width: 200px;
    	}
    
    #menu ul ul li a {
    	width: 200px;
    	}
    	
    #menu ul ul li a:hover {
    	width: 198px;
    	}
    
    #menu ul li:hover {
    	position: relative;
    	}
    
    #menu ul li a:hover {
    	background: #52C6F2;
    	width: 139px;
    	border-left: 2px solid #000e94;
    	border-right: 2px solid #000e94;
    	color: #fff;
    	position: relative;
    	}
    
    #menu ul :hover ul {
    	left: 0px;
    	width: 143px;
    	top: 47px;
    	}
    Code:
    <div id="menu">
    	<ul>
    		<li><a href="./top1.html">Top1</a></li>
    		<li><a href="./top2.html">Top2</a></li>
    		<li><a href="./top3.html">Top3</a>
    			<ul>
    				<li><a href="./top3sub1.html">Top3 Sub1</a></li>
    				<li><a href="./top3sub2.html">Top3 Sub2</a></li>
    				<li><a href="./top3sub3.html" class="twoline">Top3 Sub3</a></li>
    				<li><a href="./top3sub4.html">Top3 Sub4</a></li>
    			</ul>
    		</li>
    		<li><a href="./top4.html">Top4</a>
    			<ul>	
    				<li><a href="./top4sub1.html" class="twoline">Top4 Sub1</a></li>
    				<li><a href="./top4sub2.html" class="twoline">Top4 Sub2</a></li>
    				<li><a href="./top4sub3.html">Top4 Sub3</a></li>
    				<li><a href="./top4sub4.html">Top4 Sub4</a></li>
    				<li><a href="./top4sub5.html" class="twoline">Top4 Sub5</a></li>
    			</ul>
    		</li>
    		<li><a href="./top5.html">Top5</a></li>
    		<li><a href="./top6.html">Top6</a></li>
    		<li><a href="./top7.html">Top7</a></li>
    	</ul>
    
    </div>

  • #2
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I wouldn't worry about it. IE doesn't do a lot of things, and you should tell IE users to switch.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Change you CSS as given below
    Code:
    *{
    margin:0;
    padding:0;
    }
    #menu {
    	position: relative;
    	margin: 0 auto;
    	z-index: 500;
    	height: 47px;
    	width: 1001px;
    	border: 2px solid #000e94;
    	}
    
    #menu ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	}
    
    #menu ul ul {
    	position: absolute; 
    	left: -9999px;
    	top: 2.9em;
    	width: 200px;
    	}
    
    #menu ul li {
    	background: #fff;
    	float: left;
    	}
    
    #menu ul li a {
    	display: block; 
    	float: left; 
    	width: 141px;
    	height: 35px;
    	padding-top: 12px;
    	border-left: 1px solid #52C6F2;
    	border-right: 1px solid #52C6F2;
    	font: normal .9em verdana, sans-serif;
    	font-weight: bold;
    	color: #ffffff;
    	text-decoration: none; 
    	background: #00aeef;
    	}
    	
    #menu ul li a.twoline {
    	height: 42px;
    	padding-top: 5px;
    	}
    
    #menu ul ul li,#menu ul ul li a {
    	width: 200px;
    	float:none;
    	}
    /*
    #menu ul ul li a {
    	width: 200px;
    	}
    */	
    #menu ul ul li a:hover {
    	width: 198px;
    	}
    
    #menu ul li:hover {
    	position: relative;
    	}
    
    #menu ul li a:hover {
    	background: #52C6F2;
    	width: 139px;
    	border-left: 2px solid #000e94;
    	border-right: 2px solid #000e94;
    	color: #fff;
    	position: relative;
    	}
    
    #menu ul li:hover ul {
    	left: 0px;
    	}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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