...

View Full Version : Drop Down Menu Problem in IE



worldwidewander
10-28-2008, 09:24 PM
I have a problem getting the nested links to work and not vanish in a drop down menu in Internet Explorer when hovered over. The nested links display just fine but when I try to hover over them they disappear in IE. I set a z-index and tried having the nested links overlap in their parent links by a pixel but no luck.

The html code is:

<div id="left_nav" class="menu">
<ul>
<li><span><a href="about/about2.html">About</a></span>
<ul>
<li><a href="about/mission.html">Mission Statement</a></li>
<li><a href="about/about2.html">About AGV Sport</a></li>
<li><a href="about/history.html">History</a></li>
<li><a href="about/gallery.html">Historical Gallery</a></li>
<li><a href="about/racers.html">Pro Racers</a></li>
<li><a href="about/faq.html">FAQ</a></li>
</ul></li>

<li><span><a href="products/products.html">Product Information</a></span></li>
<li><a href="products/products.html">Products</a>
<ul>
<li><a href="products/suits2.html">Suits</a></li>
<li><a href="products/jackets2.html">Jackets</a></li>
<li><a href="products/pants2.html">Pants</a></li>
<li><a href="products/gloves2.html">Gloves</a></li>
<li><a href="products/boots2.html">Boots</a></li>
</ul></li>
<li><a href="products/custom/why_agv.html">Custom Suits</a>
<ul>
<li><a href="products/custom/why_agv.html">Why AGV</a></li>
<li><a href="products/custom/features.html">Features</a></li>
<li><a href="products/custom/examples.html">Examples</a></li>
<li><a href="products/custom/level1.html">Level 1</a></li>
<li><a href="products/custom/level2.html">Level 2</a></li>
<li><a href="products/custom/level3.html">Level 3</a></li>
<li><a href="products/custom/sizing.html">Sizing</a></li>
<li><a href="products/custom/ordering.html">Ordering</a></li>
<li><a href="products/custom/pricing.html">Pricing</a></li>
</ul></li>

<li><a href="products/sizing.html">Sizing Charts</a></li>
<li><a href="products/associates.html">Associates</a></li>

<li><span><a href="service/customer_service.html">Customer Service</a></span>
<ul>
<li><a href="service/customer_service.html">Customer Service</a></li>
<li><a href="service/repairs.html">Repairs</a></li>
<li><a href="service/warranty.html">Warranty</a></li>
<li><a href="service/racer_faq.html">Racer Support</a></li>
<li><a href="service/contact.html">Contact</a></li>
</ul></li>

<li>
<span><a href="internships/internships.html">Opportunities</a></span>
<ul>
<li><a href="internships/internships.html">Internships (EN)</a>
<ul>
<li><a href="internships/sales.html">Sales/Marketing</a></li>
<li><a href="internships/management.html">Management</a></li>
<li><a href="internships/fasion.html">Fasion Design</a></li>
<li><a href="internships/graphic_arts.html">Graphic Arts</a></li>
<li><a href="internships/web_development.html">Web Development</a></li>
<li><a href="internships/race_rep.html">Regional Race Rep.</a></li>
<li><a href="internships/international.html">International Interns</a></li>
</ul>
</li>

<li><a href="internships/it_internships.html">Internships (IT)</a>

<ul>
<li><a href="internships/it_sales.html">Marketing</a></li>
<li><a href="internships/it_management.html">Management</a></li>
<li><a href="internships/it_fasion.html">Fasion</a></li>
<li><a href="internships/it_graphic_arts.html">Graphics</a></li>
<li><a href="internships/it_web_development.html">Web Dev</a></li>
<li><a href="internships/it_race_rep.html">Race Rep</a></li>
<li><a href="internships/it_international.html">International Internships</a></li>
</ul>
</li>

</li>

</ul>
</div>


and the css is:


@charset "utf-8";
/* CSS Document */

/* common styling */
.menu {
width:202px;
height:150px;
position:relative;
margin:1;
margin-top: 0px;
margin-right: 0;
margin-bottom: 50px;
margin-left: 1px;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#CCCCCC;
width:193px;
height:20px;
text-align:left;
line-height:19px;
font-size:14px;
background-color: #000000;
z-index: 5; /*border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 0;
border-left-width: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;*/
padding-left: 10px;
border-right-width: 1px;
border-right-style: solid;
border-top-width: 1px;
border-left-width: 1px;
border-top-style: solid;
/*border-bottom-style: solid;
border-bottom-width: 1px;*/
border-left-style: solid;
}
.menu ul {
padding:0;
list-style-type: none;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 1px;
}
.menu ul li {
float:left;
margin-right:0px;
position:relative;
padding: 0px;
}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {
color:#000000;
background-color: #CCCCCC;
z-index: 8;
font-weight: bold;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:0;
left:202px;
width:187px;
z-index: 10;
}


.menu ul li:hover ul li a.hide {
color:#000;
background-color: #CCCCCC;
}
.menu ul li:hover ul li:hover a.hide {
width:150px;
}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {
display:block;
color:#CCCCCC;
width:141px;
background-color: #444444;
/*border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;*/
}
.menu ul li:last-child {
border-bottom-width: 1px;
border-bottom-style: solid;
text-decoration: none;
margin: 0px;
padding: 0px;
}
.menu ul li:hover ul li:last-child {
border-bottom-width: 1px;
border-bottom-style: solid;
text-decoration: none;
margin: 0px;
padding: 0px;
}
.menu ul li:hover ul li:hover ul li:last-child {
border-bottom-width: 1px;
border-bottom-style: solid;
text-decoration: none;
margin: 0px;
padding: 0px;
border-bottom-color: #CCCCCC;
}
.menu ul li:hover ul li a:hover {
color:#000;
background-color: #CCCCCC;
}


.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:150px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {
display:block;
width:200px;
color:#FFFFFF;
background-color: #666;
}
.menu ul li:hover ul li:hover ul li a:hover {
color:#000000;
background-color: #CCCCCC;
}


and suggestions would be appreciated?

Thanks
Eric

abduraooft
10-29-2008, 09:54 AM
Could you post a link to your page?

5quibo
07-09-2009, 01:08 PM
:):):)

brightyoursite
01-11-2010, 12:58 PM
you put many codes there just make it simple with few sub menus.
i have same menu tested in firefox ie chrome http://www.brightyoursite.com/blog/2010/01/10/ul-li-css-seo-friendly-sub-menu/
clean code

abduraooft
01-11-2010, 01:05 PM
Have a try by adding the following code.
menu ul ul{
background:transparent;
} If that doesn't fix, please post a link to your page.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum