Pure CSS Menus

<STYLE id="default" title="default" type="text/css" name="default">
/* the Default theme */
*::-moz-any-link br,*:-moz-any-link br { 
/*a workarround for mozilla*/
display:none;
}
div#menu * {
border-collapse: collapse; /*removes the cell-borders*/
cursor: pointer; /*because IE displays the text cursor if the link is inactive*/
}
.disabled {
   color: red !important;
   background: none !important;
}
div#menu {
   background: #F5F5DC;
   font: 10px Verdana, sans-serif;
   height: 15px;
   white-space: nowrap;
   width: 100%;
}
div#menu .a {
   background: #F5F5DC;
   border: 1px solid #F5F5DC;
   color: #000000;
   text-decoration: none;
}
div#menu .a table {
   display: block;
   font: 10px Verdana, sans-serif;
   white-space: nowrap;
}
div#menu table, div#menu table a {
   display: none;
}
div#menu .a:hover {
   background: #7DA6EE;
   border: 1px solid #000080;
   color: #0000FF;
   margin-right:-1px; /*resolves a problem with Opera not displaying the right border*/
}
div#menu .a:hover table, div#menu div.menuitem:hover table{
   background: #FFFFFF;
   border: 1px solid #708090;
   display: block;
   position: absolute;
   white-space: nowrap;
}
div#menu .a:hover table a, div#menu div.menuitem:hover table a {
   border-left: 10px solid #708090;
   border-right: 1px solid white; /*resolves a jump problem*/
   color: #000000;
   display: block;
   padding: 1px 12px;
   text-decoration: none;
   white-space: nowrap;
   z-index: 1000;
}
div#menu .a:hover table a:hover, div#menu div.menuitem:hover table a:hover {
   background: #7DA6EE;
   border: 1px solid #000000;
   border-left: 10px solid #000000;
   color: #000000;
   display: block;
   padding: 0px 12px;
   text-decoration: none;
   z-index: 1000;
}
td {
   border-width: 0px;
   padding: 0px 0px 0px 0px;
}
.menuitem {
   float: left;
   margin: 1px 1px 1px 1px;
   padding: 1px 1px 1px 1px;
}
.menuitem * {
   padding: 0px 0px 0px 0px;
}
#other {
   height: auto;visibility: visible;
}
#moz{
 height: 1px;visibility: hidden;
}
#moz::-moz-cell-content{
height: auto; visibility: visible;
}
#other::-moz-cell-content{
 height: 1px; visibility: hidden;
}
#holder {
   width: 100%;
}
</STYLE>
<STYLE id="alternate" title="Blue" disabled type="text/css" name="alternate">
/* the blue theme */
*::-moz-any-link br,*:-moz-any-link br { 
/*a workarround for mozilla*/
display:none;
}
div#menu * {
border-collapse: collapse; /*removes the cell-borders*/
cursor: pointer; /*because IE displays the text cursor if the link is inactive*/
}
.disabled {
   color: red !important;
   background: none !important;
}
div#menu {
   background: #F5F5DC;
   font: 10px Verdana, sans-serif;
   height: 15px;
   white-space: nowrap;
   width: 100%;
}
div#menu .a {
   background: #F5F5DC;
   border: 1px solid #F5F5DC;
   color: #000000;
   text-decoration: none;
}
div#menu .a table {
   display: block;
   font: 10px Verdana, sans-serif;
   white-space: nowrap;
}
div#menu table, div#menu table a {
   display: none;
}
div#menu .a:hover, div#menu div.menuitem:hover {
   background: #7DA6EE;
   border: 1px solid #000080;
   color: #0000FF;
   margin-right:-1px; /*resolves a problem with Opera not displaying the right border*/
}
div#menu .a:hover table, div#menu div.menuitem:hover table{
   background: #7DA6EE;
   border: 1px solid #000080;
   display: block;
   position: absolute;
   white-space: nowrap;
}
div#menu .a:hover table a, div#menu div.menuitem:hover table a {
   border-right: 1px solid #7DA6EE; /*resolves a jump problem*/
   color: #000000;
   display: block;
   padding: 1px 12px 1px 12px;
   text-decoration: none;
   white-space: nowrap;
   z-index: 1000;
}
div#menu .a:hover table a:hover, div#menu div.menuitem:hover table a:hover {
   background: #F5F5DC;
   border: 1px solid #000080;
   color: #000000;
   display: block;
   padding: 0px 12px 0px 11px;
   text-decoration: none;
   z-index: 1000;
}
td {
   border-width: 0px;
   padding: 0px 0px 0px 0px;
}
.menuitem {
   float: left;
   margin: 1px 1px 1px 1px;
   padding: 1px 1px 1px 1px;
}
.menuitem * {
   padding: 0px 0px 0px 0px;
}
#other {
   height: auto;visibility: visible;
}
#moz{
 height: 1px;visibility: hidden;
}
#moz::-moz-cell-content{
height: auto; visibility: visible;
}
#other::-moz-cell-content{
 height: 1px; visibility: hidden;
}
#holder {
   width: 100%;
}
</STYLE>
<TABLE id="holder">
    <TBODY>
    <TR>
        <TD id="other">
            <DIV id="menu">
                <DIV class="menuitem">
                    <A class="a" href="#">File<BR>
                    <TABLE>
                        <TBODY>
                        <TR>
                            <TD><A href="#2">Open ili op dulgo</A></TD>
                        </TR>
                        <TR>
                            <TD><A href="#3">Save</A></TD>
                        </TR>
                        <TR>
                            <TD><A href="#4">Close</A></TD>
                        </TR>
    </TBODY>
                    </TABLE>
                    </A>
                </DIV>
                <DIV class="menuitem">
                    <A class="a" href="#11">Help<BR>
                    <TABLE>
                        <TBODY>
                        <TR>
                            <TD><A class="disabled">..</A></TD>
                        </TR>
                        <TR>
                            <TD><A href="#13">Index</A></TD>
                        </TR>
                        <TR>
                            <TD><A href="#14">About</A></TD>
                        </TR>
                        </TBODY>
                    </TABLE>
                    </A>
                </DIV>
            </DIV>
        </TD>
    </TR>
    <TR>
        <TD id="moz">
            <DIV id="menu">
                Mozilla specific menu
                <DIV class="menuitem">
                    <A class="a" href="#">Filezilla</A>
                    <TABLE>
                        <TBODY>
                        <TR>
                            <TD><A href="#2">Open</A></TD>
                        </TR>
                        <TR>
                            <TD><A href="#3">Save</A></TD>
                        </TR>
                        <TR>
                            <TD><A href="#4">Close</A></TD>
                        </TR>
                        </TBODY>
                    </TABLE>
                </DIV>
                <DIV class="menuitem">
                    <A class="a" href="#11">Helpzilla</A>
                    <TABLE>
                        <TBODY>
                        <TR>
                            <TD><A class="disabled">..</A></TD>
                        </TR>
                        <TR>
                            <TD><A href="#13">Index</A></TD>
                        </TR>
                        <TR>
                            <TD><A
                                href="#14">About</A></TD>
                        </TR>
                        </TBODY>
                    </TABLE>
                </DIV>
            </DIV>
        </TD>
    </TR>
    </TBODY>
</TABLE>
<BR>