[RESOLVED] Embedding Absolute block in relative block

Hi everyone!

I have a bit of a problem when trying to display my menus in IE7 (and I believe and browser below IE7).

My CSS is as follows:

[CODE]
.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}
#menu {
width: 100px;
margin: 0px;
padding: 0px;
display: block;
}
#menu ul, #menu ul ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li, #menu ul ul li {
display: block;
float: left;
width: 160px;
margin: 0;
padding: 0;
background: transparent url(Menu/bg-bubplastic-button.gif) top left no-repeat;
}

#menu ul li a span.menu_ar, #menu ul ul li a span.submenu_ar {
display: block;
margin: 0;
width: 140px;
height: 22px;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;

font-family: “Helvetica Neue”,helvetica,”microsoft sans serif”,arial,sans-serif;
font-size: 70%;
text-transform: uppercase;
color: #FFFFFF;

background: transparent url(Menu/bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}

#menu ul {
position: relative;
}

#menu ul ul{
position: absolute;
top: 54px;
left: 160%;
width: 100%;
}

#menu ul ul{
display: none;
}

#menu ul li:hover ul {
display: block;
}

#menu ul li.highlight a span.menu_ar, #menu ul li.highlight a span.submenu_ar {
background: transparent url(Menu/bg-bubplastic-h-orange.gif) top right no-repeat;
}

#menu ul li.normal a span.menu_ar, #menu ul ul li.normal a span.submenu_ar{
background: transparent url(Menu/bg-bubplastic.gif) top left no-repeat;
}

/* First section to blue Sets all highlights */
#menu ul li.normal:hover a span.menu_ar, #menu ul ul li.normal:hover a span.submenu_ar{
background: transparent url(Menu/bg-bubplastic-h-blue.gif) top left no-repeat;
}

[/CODE]

The menu is an unordered list:
Link 1
Link 2
Link 3
|
– – – Link 4, etc.

It’s only a two-level menu.

A preview can be seen on my test site:
[url]http://brainteasers.awardspace.com/testsite/MalwareRemoval/MalwareRemoval.htm[/url]

(Currently, it a temporary site)

My CSS has been validated, and is near to perfect, except that the submenu doesn’t appear in the correct spot on the page when the link is hovered on.

So a few questions:
1.How do I fix this without using an IE7 hack, and still make the CSS validated?
2.(Aside here) Notice how the links on the page are all have the style applied to the a href tag:
style=’text-decoration: none;’

How can I incorporate that into the CSS (because apparently, adding it to the #menu ul li a span.menu_ar, #menu ul ul li a span.submenu_ar section doesn’t work.

3.This problem that I’ve having with the submenu not appearing in the right spot – what browsers are also affected? And will the fix solve the problem?

Thanks everyone!

Also in #CSS _↴