CSS horizontal menu drop-down menu

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style type = "text/CSS">
*{
Font: 12px/1.5 Helvetica;
Padding: 0;
Margin: 0 auto;
}
# Menu {
Width: 500px;
Height: 28px;
Margin: 0 auto;
Border-bottom: 2px solid red;
}
# Menu ul {
List-style: none;
}

# Menu ul Li {
Float: left;
Width: 87px;
Height: 27px;
Margin: 0 2px;
}
# Menu ul Li ul {
Display: none;
Position: absolute;
}
# Menu ul Li {
Float: none;
}
# Menu ul Li: hover ul {
Display: block;
}
</Style>
</Head>
<Body>
<Div id = "menu">
<Ul>
<Li> <a id = "current" href = "#"> homepage </a> </LI>
<Li> <a href = "#"> webpage layout </a>
<Ul>
<Li> <a href = "#"> adaptive width </a> </LI>
<Li> <a href = "#"> fixed width </a> </LI>
</Ul>
</LI>
<Li> <a href = "#"> Web tutorial </a>
<Ul>
<Li> <a href = "#"> getting started </a> </LI>
<Li> <a href = "#"> video tutorial </a> </LI>
<Li> <a href = "#"> FAQs </a> </LI>
</Ul>
</LI>
<Li> <a href = "#"> Web instance </a> </LI>
<Li> <a href = "#"> Common Code </a> </LI>
</Ul>
</Div>
</Body>
</Html>
<! -- Margin can be used only when the width and height are specified, and the adjacent margin values between the two objects are calculated only when the distance between the outer border and the outer border is equal to the maximum margin value between the two -->