Centered Drop-down Menu doesn't appear in IE6 & 7

HTML & CSS
1

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

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

</body>
</html>

@font-face {
font-family: ‘FuturaLtBTLight’;
src: url(‘…/fonts/futuralightbt-webfont.eot’);
src: local(‘:smiling_face:’), 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: progid:DXImageTransform.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: progid:DXImageTransform.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.