Hello.

I'm struggling with the IE6 & 7 demon
trying to get a drop-down menu centered.

What can be the problem?
Do I need to code some JavaScript to solve it?

If anyone can help me with this I'll be eternally
grateful. Deadlines are getting closer.

This is the complete XHTML/CSS code.

Thanks in advance.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Drop-Up Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Stylesheets -->
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen" />

</head>
<body>
<div id="wrapper"><!-- Main Container Wrapper -->

<div id="footer"><!-- Footer with Main Navigation -->
<ul><!-- Beginning of Main Navigation -->
<li><a href="#">INICIO</a>
<ul>
<li>
<a href="#">Sub Link</a>
</li>
</ul>
</li><li class="pipe">|</li>
<li>
<a href="#">LOREM IPSUM</a>
<ul>
<li>
<a href="#">Sub Link</a>
</li>
</ul>
</li><li class="pipe">|</li>
<li>
<a href="#">PORTFOLIO</a>
<ul>
<li>
<a href="#">Sub Link Sub Link</a>
<a href="#">Sub Link Sub Link Sub Link</a>
</li>
</ul>
</li><li class="pipe">|</li>
<li>
<a href="#">LOREM IPSUM</a>
</li><li class="pipe">|</li>
<li>
<a href="#">BLOG</a>
<ul>
<li>
<a href="#">Sub Link Sub Link</a>
</li>
</ul>
</li><li class="pipe">|</li>
<li>
<a href="#">SERVICIOS</a>
</li><li class="pipe">|</li>
<li>
<a href="#">PRENSA</a>
</li><li class="pipe">|</li>
<li>
<a href="#">MULTIMEDIA</a>
</li><li class="pipe">|</li>
<li>
<a href="#">CONTACTO</a>
</li>
</ul><!-- End of Main Navigation -->
</div><!-- End of footer -->
</div><!-- End of Wrapper -->
</body>
</html>


@font-face {
font-family: 'FuturaLtBTLight';
src: url('../fonts/futuralightbt-webfont.eot');
src: local('☺'), url('../fonts/futuralightbt-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

html, body {
background:#86C9EF;
color: #FFF;
font-family: 'FuturaLtBTLight', Arial, sans-serif;
height:100%;
overflow:hidden;
}

/*-- FOOTER --*/

#footer {
background:#000;
border-top:1px solid #FFF;
font-size:14px;
-moz-opacity: 0.7; /* Moz proprietary opacity property */
filter: progidXImageTransform.Microsoft.Alpha(opacity=70); /* Microsoft proprietary filter property */
opacity: 0.7; /* CSS 3 opacity property */
position:absolute;
bottom:5px;
left:0;
right:0;
padding-bottom:10px;
}

/* Footer Main Navigation */
/* Top menu items */
#footer ul {
float:right;
position:relative;
right:50%;
-moz-opacity: 0.9; /* Moz proprietary opacity property */
filter: progidXImageTransform.Microsoft.Alpha(opacity=90); /* Microsoft proprietary filter property */
opacity: 0.9; /* CSS 3 opacity property */
}

#footer ul li {
float: left;
padding: 10px 0;
position:relative;
left:50%;
}

#footer ul li a {
display:block;
color: #FFF;
padding: 10px 10px;
text-decoration: none;
}

#footer ul li a:hover{
background-color: #333;
color: #FFF;
}

#footer ul li:hover a,
#footer ul li.hover a { /* This line is required for IE 6 and below */
background:#333; /* Top menu items background colour */
color:#FFF;
}

/* Submenu items */
#footer ul ul {
background:#000;
display:none; /* Sub menus are hiden by default */
padding:5px;
position:absolute;
bottom:50px;
left:0;
right:auto; /*resets the right:50% on the parent ul */
width:200px; /* width of the drop-down menus */
}

#footer ul ul li {
left:auto; /*resets the left:50% on the parent li */
margin:-10px 0; /* Reset the 1px margin from the top menu */
clear:left;
width:100%;
}

#footer ul ul li a,
#footer ul li.active li a,
#footer ul li:hover ul li a,
#footer ul li.hover ul li a { /* This line is required for IE 6 and below */
background:#000;
color:#FFF;
}
#footer ul ul li a:hover,
#footer ul li.active ul li a:hover,
#footer ul li:hover ul li a:hover,
#footer ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background:#333; /* Sub menu items background colour */
color:#FFF;
}

/* Make the sub menus appear on hover */
#footer ul li:hover ul,
#footer ul li.hover ul { /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
}

/* Align the vertical pipe */
#footer li.pipe {
color:#FFF;
position:relative;
top:10px;
}


Thanks in advance.