CSS + XHTML cool navigation menu

<Style type = "text/CSS">
Body {
Background: # FFF;
Font-family: "lucida Grande", Helvetica, Arial, sans-serif;
Font-size: 12px;
}
. Menu {
Font-family: tahoma, Geneva, "lucida sans Unicode", "lucida Grande", verdana, sans-serif;
Width: 500px;
Height: 355px;
Background: # fff URL (/jscss/demoimg/200906/meeting.jpg) 0 20px no-Repeat;
Position: relative;
Margin: 2em 125px 0 125px;
Font-family: tahoma, Geneva, "lucida sans Unicode", "lucida Grande", verdana, sans-serif;
}
. Menu ul {
Padding: 0;
Margin: 0;
List-style-type: none;
}

. Menu ul Li {
Float: left;
Position: relative;
}
/* Set up www.codefans.net */
. Menu ul Li a,. Menu ul Li A: visited {
Display: block;
Text-Decoration: none;
Color: #000;
Width: 88px;
Height: 1.5em;
Font-weight: bold;
Color: #888;
Border-bottom: 8px solid #888;
Background: # FFF;
Padding-left: 10px;
Line-Height: 1.5em;
Margin-Right: 2px;
}
/* Hack for ie5.5 to correct the faulty Box Model */
* Html. Menu ul Li a,. Menu ul Li A: visited {
Width: 98px;
W \ idth: 88px;
}
/* Hide the drop down menu */
. Menu ul Li ul {
Display: none;
}
/* Www.codefans.net remove all table style so that it does not interfere with the menu */
. Menu table {
Margin:-1px;
Border-collapse: collapse;
Font-size: 1em;
}

. Menu ul Li: hover,
. Menu ul Li A: hover {
Color: #000;
Border-bottom: 8px solid #606;
}
/* Make the drop down menu show www.codefans.net */
. Menu ul Li: hover ul,
. Menu ul Li A: hover ul {
Display: block;
Position: absolute;
Top: 1.2em;
Margin-top: 11px;
Left: 0;
Width: 96px;
Border: 1px solid #888;
Border-top: 0;
Background: transparent;
}
/* Style the drop down links with no hover www.codefans.net */
. Menu ul Li: hover ul Li,
. Menu ul Li A: hover ul Li {
Display: block;
Color: #000;
Border: 0;
Margin: 0;
Color: #333;
Font-weight: normal;
Font-size: 0.9em;
Height: auto;
Line-Height: 1em;
Padding: 5px;
Width: 86px
}
. Menu ul Li: hover ul Li A: hover,
. Menu ul Li A: hover {
Background: #888;
Color: # FFF;
}

. Menu ul Li A: hover ul {
Background: transparent filter: alpha (opacity = 80 );
Filter: progid: DXImageTransform. Microsoft. Alpha (opacity = 80 );
Opacity: 0.8;
Margin-top: 10px;
Marg \ In-top: 11px;
}
. Menu ul Li A: hover ul Li {
Background: # DDD;
Width: 96px;
W \ idth: 86px;
}

P. Strike {text-Decoration: Line-through ;}
</Style>

---------------------------------------------------------

<Div class = "menu">

<Ul>
<Li> <a class = "Drop" href = "/"> source code lovers <! -- [If IE 7]> <! --> </A> <! -- <! [Endif] -->
<Table> <tr> <TD>
<Ul>
<Li> <a href = "/" Title = "wrapping text around images"> codefans. Net </a> </LI>
<Li> <a href = "http://codefans.net" Title = "styling forms"> codefans. Net </a> </LI>
<Li> <a href = "/" Title = "removing active/focus borders"> active </a> </LI>
</Ul>
</TD> </tr> </table>
<! -- [If lte ie 6]> </a> <! [Endif] -->
</LI>

<Li> <a href = "/"> box <! -- [If IE 7]> <! --> </A> <! -- <! [Endif] -->
<Table> <tr> <TD>
<Ul>
<Li> <a href = "/" Title = "a coded list of spies"> box </a> </LI>
<Li> <a href = "http://codefans.net" Title = "a horizontal vertical menu"> level menu </a> </LI>
</Ul>
</TD> </tr> </table>
<! -- [If lte ie 6]> </a> <! [Endif] -->
</LI>

<Li> <a href = "/"> firefox <! -- [If IE 7]> <! --> </A> <! -- <! [Endif] -->
<Table> <tr> <TD>
<Ul>
<Li> <a href = "http://codefans.net" Title = "A drop down menu"> it </a> </LI>
<Li> <a href = "/" Title = "a cascading menu"> Soho </a> </LI>
<Li> <a href = "http://codefans.net" Title = "Snooker cue"> unlimited moonlight </a> </LI>
</Ul>
</TD> </tr> </table>
<! -- [If lte ie 6]> </a> <! [Endif] -->
</LI>

<Li> <a href = "/"> explorer <! -- [If IE 7]> <! --> </A> <! -- <! [Endif] -->
<Table> <tr> <TD>
<Ul>
<Li> <a href = "http://codefans.net" Title = "weft fonts"> CSS technology </a> </LI>
<Li> <a href = "/" Title = "vertical align"> firewall </a> </LI>
</Ul>
</TD> </tr> </table> <! -- [If lte ie 6]> </a> <! [Endif] -->
</LI>

<Li> <a href = "../opacity/index.html"> demo <! -- [If IE 7]> <! --> </A> <! -- <! [Endif] -->
<Table> <tr> <TD>
<Ul>
<Li> <a href = "/" Title = "color wheel"> menu example </a> </LI>
<Li> <a href = "http://codefans.net" Title = "A Menu Using opacity"> Ajax technology </a> </LI>
<Li> <a href = "/" Title = "partial opacity"> website menu </a> </LI>
</Ul>
</TD> </tr> </table>
<! -- [If lte ie 6]> </a> <! [Endif] -->
</LI>
</Ul>
</Div>