PDA

View Full Version : drop menu works in FF not IE7?



Xero7
Mar 29th, 2007, 08:58 AM
Hey there everyone I just finished this site for someone and I hear from an IE7 user that my drop down menu doesn't work. I knew it didnt work in IE6 but why not IE7? I use firefox which displays it perfectly.

any way to make it cross browser?

Heres the HTML:

http://mupepe.com/

<!-- MENU START -->

<ul>
<li><h2>Biographies</h2>
<ul>
<li><a href="http://mupepe.com/biographies.html" title="Main">Main</a>

<li><a href="http://mupepe.com/Dulce/index.html" title="gallery">Dulce Maria</a>
<li><a href="http://mupepe.com/christie/index.html" title="gallery">Christie Elaine </a>
<li><a href="http://www.mupepe.com/keyra/index.html" title="gallery">Keyra Augustina</a>
<li><a href="http://mupepe.com/portia/index.html" title="gallery">Portia de Rossi</a>
<li><a href="http://mupepe.com/scarlett/index.html" title="gallery">Scarlett Johansson </a>
<li><a href="http://mupepe.com/jessica/index.html" title="gallery">Jessica Alba </a>
</li></li></li></li></li></li></li>

</ul>
</li>
</ul>

<ul>
<li><h2>Galleries</h2>
<ul>
<li><a href="http://mupepe.com/galleries.html" title="Main">Main</a>
<li><a href="http://mupepe.com/Dulce/gallery.html" title="Dulce Maria">Dulce Maria</a>

<li><a href="http://mupepe.com/christie/gallery.html" title="Christie Elaine ">Christie Elaine</a>
<li><a href="http://mupepe.com/portia/gallery.html" title="Portia de Rossi">Portia de Rossi</a>
<li><a href="http://www.mupepe.com/keyra/gallery.html" title="Keyra Augustina">Keyra Augustina</a>
<li><a href="http://mupepe.com/scarlett/gallery.html" title="Scarlett Johansson">Scarlett Johansson</a>
<li><a href="http://mupepe.com/jessica/gallery.html" title="Jessica Alba">Jessica Alba</a>
<li><a href="http://mupepe.com/whiteacid/index.html" title="WhiteAcid ">WhiteAcid </a>
</li></li></li></li></li></li></li>

</ul>
</li>
</ul>

<ul>
<li><h2>Main / Forum / Etc</h2>
<ul>
<li><a href="http://www.mupepe.com" title="Index">Main</a></li>
<li><a href="/forum">Mupepe Forum</a><!-- fully working sample -->
<ul>

<li><a href="http://www.evilbore.com" title="submenu testing">evilbore.com</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

<!-- MENU END-->

and the CSS:
http://mupepe.com/styles.css



/* MENU CODE */

#header-bottom ul {
list-style: none;
margin: 0;
padding: 0;
width: 120px;
float: right;
}

#header-bottom a, #header-bottom h2 {
font: bold 10px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #b9d2e3;
margin: 0;
padding: 2px 2px;
text-align: center;
}

#header-bottom h2 {
color: #050869;
background: #ffffff;
text-transform: uppercase;
}

#header-bottom a {
color: #000000;
background: #ebebeb;
text-decoration: none;
}

#header-bottom a:hover {
color: #000000;
background: #ffffff;
}

#header-bottom li {position: relative;}

#header-bottom ul ul {
position: absolute;
z-index: 500;
}

#header-bottom ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#header-bottom ul ul,
div#header-bottom ul li:hover ul ul,
div#header-bottom ul ul li:hover ul ul
{display: none;}

div#header-bottom ul li:hover ul,
div#header-bottom ul ul li:hover ul,
div#header-bottom ul ul ul li:hover ul
{display: block;}

/* MENU CODE END */