| HTML code <style type = "text/CSS"> # Menu {list-style-type: none; margin: 0 auto 100px auto; padding: 0; width: 608px ;}
# Menu Li {float: Left; padding: 0; margin: 0 1px 0 0; position: relative; width: 150px; Height: 3em; Z-index: 100 ;}
# Menu Li DL {position: absolute; top: 0; left: 0; padding-bottom: 0 ;}
# Menu Li a, # menu Li A: visited {text-Decoration: none ;}
# Menu Li dd {display: none ;}
# Menu Li A: hover {border: 0 ;}
# Menu Li: hover DD, # menu Li A: hover dd {display: block ;}
# Menu Li: hover DL, # menu Li A: hover DL {padding-bottom: 10px ;}
# Menu table {border-collapse: collapse; padding: 0; margin:-1px; font-size: 1em ;}
# Menu DL {width: 150px; margin: 0; padding: 0; Background: transparent ;}
# Menu dt {margin: 0; padding: 0 ;} # Menu dd {margin: 0; padding: 0; color: # FFF; font-size: 1em; text-align: Left ;} # Menu dt a, # menu dt a: visited {display: block; font-size: 0.9em; color: #038; text-align: center; Border: 1px solid # 08c; border-width: 0 1px 1px; Background: # d4d4d4; padding: 0.25em 0 0.75em 0 ;} # Menu Li: hover dt a, # menu A: hover dt a {color: #006; Background: # DDD; Border: 1px solid # 08c; border-width: 0 1px 1px 1px ;} # Menu dd A, # menu dd A: visited {Background: # 08c; color: # FFF; padding: 0.5em 0; text-Decoration: none; display: block; text-align: center; border-left: 1px solid # 08c; border-Right: 1px solid # 08c ;} # Menu dd A: hover {Background: # DDD; color: #000; border-left: 1px solid # 08c; border-Right: 1px solid # 08c ;} # Menu B {display: block; overflow: hidden; Height: 1px ;} # Menu B. P1 {Background: # 08c; margin: 0 5px ;}
# Menu B. P2 {Background: # d4d4d4; Border: 2px solid # 08c; border-width: 0 2px; margin: 0 3px ;}
# Menu B. P3 {Background: # d4d4d4; margin: 0 2px; Border: 1px solid # 08c; border-width: 0 1px ;}
# Menu B. P4 {Height: 2px; Background: # d4d4d4; margin: 0 1px; Border: 1px solid # 08c; border-width: 0 1px ;}
# Menu B. P5 {Background: # 08c; margin: 0 5px ;}
# Menu B. p6 {Background: # 08c; margin: 0 3px ;}
# Menu B. P7 {Background: # 08c; margin: 0 2px ;}
# Menu B. P8 {Height: 2px; Background: # 08c; margin: 0 1px ;} # Menu Li: hover B. P2, # menu A: hover B. P2 {Background: # FFF ;}
# Menu Li: hover B. P3, # menu A: hover B. P3 {Background: # f0f0f0 ;}
# Menu Li: hover B. P4, # menu A: hover B. P4 {Background: # e8e8e8 ;} </Style>
<Ul id = "menu">
<Li>
<! -- [If lte ie 6]> <a href = "# Nogo"> <Table> <tr> <TD> <! [Endif] -->
<DL>
<DT> <B class = "p1"> </B> <B class = "p2"> </B> <B class = "P3"> </B> <B Class = "P4"> </B> <a href = ".. /menu/index.html "> demos </a> </DT>
<DD> <a href = "../menu/zero_dollars.html" Title = "The Zero Dollar ads page"> zero dollars </a> </DD>
<DD> <a href = "../menu/embed.html" Title = "wrapping text around images"> wrapping text </a> </DD>
<DD> <a href = "../menu/form.html" Title = "styling forms"> styled form </a> </DD>
<DD> <a href = "../menu/nodots.html" Title = "removing active/focus borders"> active focus </a> </DD>
<DD> <a href = "../menu/shadow_boxing.html" Title = "multi-position Drop Shadow"> shadow boxing </a> </DD>
<DD> <a href = "../menu/old_master.html" Title = "image map for detailed information"> Image Map </a> </DD>
<DD> <a href = "../menu/bodies.html" Title = "Fun with background images"> fun with backgrounds </a> </DD>
<DD> <a href = "../menu/fade_scroll.html" Title = "fade-out scrolling"> fade scrolling </a> </DD>
<DD> <a href = ".. /menu/em_images.html "Title =" em size images compared "> em sized images </a> <B class =" P8 "> </B> <B class =" P7"> </B> <B class = "P6"> </B> <B class = "P5"> </B> </DD>
</Dl>
<! -- [If lte ie 6]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li>
<! -- [If lte ie 6]> <a href = "# Nogo"> <Table> <tr> <TD> <! [Endif] -->
<DL>
<DT> <B class = "p1"> </B> <B class = "p2"> </B> <B class = "P3"> </B> <B Class = "P4"> </B> <a href = "index.html"> menus </a> </DT>
<DD> <a href = "spies.html" Title = "a coded list of spies"> spies menu </a> </DD>
<DD> <a href = "vertical.html" Title = "a horizontal vertical menu"> vertical menu </a> </DD>
<DD> <a href = "expand.html" Title = "an enlarging unordered list"> enlarging list </a> </DD>
<DD> <a href = "enlarge.html" Title = "an unordered list with link images"> link images </a> </DD>
<DD> <a href = "cross.html" Title = "non-rectangular links"> non-rectangular Links </a> </DD>
<DD> <a href = "jigsaw.html" Title = "Jigsaw links"> jigsaw Links </a> </DD>
<DD> <a href = "circles.html" Title = "circular links"> circular Links </a> <B class = "P8"> </B> <B class =" p7 "> </B> <B class =" P6 "> </B> <B class =" P5 "> </B> </DD>
</Dl>
<! -- [If lte ie 6]> </TD> </tr> </table> </a> <! [Endif] --> </LI>
<Li>
<! -- [If lte ie 6]> <a href = "# Nogo"> <Table> <tr> <TD> <! [Endif] -->
<DL>
<DT> <B class = "p1"> </B> <B class = "p2"> </B> <B class = "P3"> </B> <B Class = "P4"> </B> <a href = ".. /layouts/index.html "> layouts </a> </DT>
<DD> <a href = "../layouts/bodyfix.html" Title = "cross browser fixed layout"> fixed 1 </a> </DD>
<DD> <a href = "../layouts/body2.html" Title = "cross browser fixed layout"> fixed 2 </a> </DD>
<DD> <a href = "../layouts/body4.html" Title = "cross browser fixed layout"> fixed 3 </a> </DD>
<DD> <a href = "../layouts/body5.html" Title = "cross browser fixed layout"> fixed 4 </a> </DD>
<DD> <a href = ".. /layouts/minimum.html "Title =" A simple minimum width layout "> minimum width for Internet Explorer </a> <B class =" P8 "> </B> <B class = "P7"> </B> <B class = "P6"> </B> <B class = "P5"> </B> </DD>
</Dl>
<! -- [If lte ie 6]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li>
<! -- [If lte ie 6]> <a href = "# Nogo"> <Table> <tr> <TD> <! [Endif] -->
<DL>
<DT> <B class = "p1"> </B> <B class = "p2"> </B> <B class = "P3"> </B> <B Class = "P4"> </B> <a href = ".. /Mozilla/index.html "> Mozilla </a> </DT>
<DD> <a href = "../Mozilla/dropdown.html" Title = "A drop down menu"> drop down menu </a> </DD>
<DD> <a href = "../Mozilla/cascade.html" Title = "a cascading menu"> cascading menu </a> </DD>
<DD> <a href = "../Mozilla/content.html" Title = "using content:"> content: </a> </DD>
<DD> <a href = "../Mozilla/moxbox.html" Title = ": hover applied to a div"> Mozzie box </a> </DD>
<DD> <a href = "../Mozilla/rainbow.html" Title = "I can build a rainbow"> rainbow box </a> </DD>
<DD> <a href = "../Mozilla/snooker.html" Title = "Snooker cue"> snooker cue made using border art </a> </DD>
<DD> <a href = ".. /Mozilla/target.html "Title =" target practise "> target practice </a> <B class =" P8 "> </B> <B class =" P7 "> </ b> <B class = "P6"> </B> <B class = "P5"> </B> </DD>
</Dl>
<! -- [If lte ie 6]> </TD> </tr> </table> </a> <! [Endif] --> </LI>
</Ul> |
