...

View Full Version : IE Drop Down Problem



TrendyGuy
04-27-2011, 04:19 AM
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!


#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;
}



<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>

njaohnt
04-28-2011, 02:57 AM
I wouldn't worry about it. IE doesn't do a lot of things, and you should tell IE users to switch.

abduraooft
04-28-2011, 11:07 AM
Change you CSS as given below

*{
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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum