Post
Ask Question
flash pop

flash pop

  • NA
  • 1
  • 0

Question about drop down menu and use ul li tag

Feb 4 2009 1:07 PM
I want to create a drop down menu with submenu, but have problem for one thing, my button appear under the text of main menu. How can I bring it up?
see the source:

<!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=ISO-8859-1">
<style type="text/css" media="screen">
/**************** menu coding *****************/
#menu {
width: 100%;

float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
text-transform: uppercase;
width: 18em;
}

#menu a {
color: #000;
background: url('MenuBackground.jpg');
border-width:1px; border-style:solid; zoom:1; overflow:hidden; background-image:url('MenuBackground.jpg'); background-color:transparent

}

#menu a:hover {
color: #a00;
border-width: 1px;
border-style: solid;
background: url('MenuBackground.jpg');

}

#menu li {position: relative; text-align:right;
}
#menu li.sub {    
text-align:left;
background-color: transparent;
background-image:url('MenuBackground.jpg');
overflow: hidden;
display: block
}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

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


#menu2 {
width: 100%;

float: left;
}

#menu2 ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu2 a, #menu2 h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;

}

#menu2 h2 {
color: #fff;
text-transform: uppercase;
width: 18em;

}

#menu2 a {
color: #000;
background: #efefef;
text-decoration: none;
border-width: 1px;
border-style: solid;

}

#menu2 a:hover {
color: #a00;
background: #fff;
border-width: 1px;
border-style: solid;

}

#menu2 li {position: relative;}

#menu2 ul ul {
position: absolute;
z-index: 500;
}

#menu2 ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu2 ul ul,
div#menu2 ul li:hover ul ul,
div#menu2 ul ul li:hover ul ul
{display: none;}

div#menu2 ul li:hover ul,
div#menu2 ul ul li:hover ul,
div#menu2 ul ul ul li:hover ul
{display: block;}

#menu3 {
width: 100%;

float: left;
}

#menu3 ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu3 a, #menu3 h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu3 h2 {
color: #fff;
text-transform: uppercase;
width: 18em;
}

#menu3 a {
color: #000;
background: #efefef;
text-decoration: none;
border-width: 1px;
border-style: solid;
}

#menu3 a:hover {
color: #a00;
background: #fff;
border-width: 1px;
border-style: solid;

}

#menu3 li {position: relative;}

#menu3 ul ul {
position: absolute;
z-index: 500;
}

#menu3 ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu3 ul ul,
div#menu3 ul li:hover ul ul,
div#menu3 ul ul li:hover ul ul
{display: none;}

div#menu3 ul li:hover ul,
div#menu3 ul ul li:hover ul,
div#menu3 ul ul ul li:hover ul
{display: block;}

#menu4 {
width: 100%;

float: left;
}

#menu4 ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu4 a, #menu4 h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu4 h2 {
color: #fff;
text-transform: uppercase;
width: 18em;
}

#menu4 a {
color: #000;
background: #efefef;
text-decoration: none;
border-width: 1px;
border-style: solid;
}

#menu4 a:hover {
color: #a00;
background: #fff;
border-width: 1px;
border-style: solid;

}

#menu4 li {position: relative;}

#menu4 ul ul {
position: absolute;
z-index: 500;
}

#menu4 ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu4 ul ul,
div#menu4 ul li:hover ul ul,
div#menu4 ul ul li:hover ul ul
{display: none;}

div#menu4 ul li:hover ul,
div#menu4 ul ul li:hover ul,
div#menu4 ul ul ul li:hover ul
{display: block;}

#menu5 {
width: 100%;

float: left;
}

#menu5 ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu5 a, #menu5 h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu5 h2 {
color: #fff;
text-transform: uppercase;
width: 18em;
}

#menu5 a {
color: #000;
background: #efefef;
text-decoration: none;
border-width: 1px;
border-style: solid;
}

#menu5 a:hover {
color: #a00;
background: #fff;
border-width: 1px;
border-style: solid;

}

#menu5 li {position: relative;}

#menu5 ul ul {
position: absolute;
z-index: 500;
}

#menu5 ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu5 ul ul,
div#menu5 ul li:hover ul ul,
div#menu5 ul ul li:hover ul ul
{display: none;}

div#menu5 ul li:hover ul,
div#menu5 ul ul li:hover ul,
div#menu5 ul ul ul li:hover ul
{display: block;}

#menu6 {
width: 100%;

float: left;
}

#menu6 ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu6 a, #menu6 h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu6 h2 {
color: #fff;
text-transform: uppercase;
width: 18em;
}

#menu6 a {
color: #000;
background: #efefef;
text-decoration: none;
border-width: 1px;
border-style: solid;
}

#menu6 a:hover {
color: #a00;
background: #fff;
border-width: 1px;
border-style: solid;

}

#menu6 li {position: relative;}

#menu6 ul ul {
position: absolute;
z-index: 500;
}

#menu6 ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu6 ul ul,
div#menu6 ul li:hover ul ul,
div#menu6 ul ul li:hover ul ul
{display: none;}

div#menu6 ul li:hover ul,
div#menu6 ul ul li:hover ul,
div#menu6 ul ul ul li:hover ul
{display: block;}


div.clear {clear:both;}

</style>
<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
 #menu2 ul li {float: left; width: 100%;}
 #menu3 ul li {float: left; width: 100%;}
      #menu4 ul li {float: left; width: 100%;}
        #menu5 ul li {float: left; width: 100%;}
          #menu6 ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 1%;}
#menu2 ul li a {height: 1%;}
#menu3 ul li a {height: 1%;}
#menu4 ul li a {height: 1%;}
#menu5 ul li a {height: 1%;}
#menu6 ul li a {height: 1%;}
 
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
#menu2 a, #menu2 h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}

</style>
<![endif]-->
</head>

<div align="center">
    <table border="0" width="777" id="table1" cellspacing="0" cellpadding="0" height="436" bgcolor="#888888">
        <tr>
            <td valign="top">
            <table border="0" width="777" id="table3" cellspacing="0" cellpadding="0" height="9">
                <tr>
                    <td>
                    <img border="0" src="spacer.gif" width="1" height="1"></td>
                </tr>
            </table>
            <table border="0" width="777" id="table4" cellspacing="0" cellpadding="0" height="240">
                <tr>
                    <td>
            <table border="0" width="777" id="table49" cellspacing="0" cellpadding="0" height="240">
                <tr>
                    <td valign="top" width="144" height="240">
                    <p align="center">
                    &nbsp;</td>
                    <td valign="top" width="489" height="240">
                    <table border="0" width="489" id="table50" cellspacing="0" cellpadding="0" height="240">
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                    </td>
                    <td valign="top" width="144" height="240">
                    &nbsp;</td>
                </tr>
            </table>
                    </td>
                </tr>
            </table>
            <table border="0" width="777" id="table5" cellspacing="0" cellpadding="0">
                <tr>
                    <td>&nbsp;</td>
                </tr>
            </table>
            <table border="0" width="100%" id="table35" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="245" height="32">
                    <table border="0" width="245" id="table36" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="200" ><div id="menu" style="width: 192px; height: 19px" align=right>
<ul>
  <li><h2>Page 1</h2>
    <ul style="position: absolute; left: 188px; top: 18px; height: 0px; width:130px; background-image:url('MenuBackground.jpg');">
      <li class="sub"><a href="http://www.yahoo.com/"  align=left>Submenu1 Page1</a></li>
      <li class="sub"><a href="http://www.google.com" >Submenu2 Page1</a>
      </li>
    </ul>
  </li>
</ul>
</div><div class="clear"><!-- --></div>

</td>
                            <td width="45">&nbsp;</td>
                        </tr>
                    </table>
                    </td>
                    <td width="300" rowspan="3" valign="top">
                    <table border="0" width="100%" id="table42" cellspacing="0" cellpadding="0" height="100%">
                        <tr>
                            <td valign="top">
                            <table border="0" width="100%" id="table43" cellspacing="0" cellpadding="0" height="74">
                                <tr>
                                    <td width="10">&nbsp;</td>
                                    <td width="280">
                                    <p align="center">
                                    &nbsp;</td>
                                    <td width="10">&nbsp;</td>
                                </tr>
                            </table>
                            </td>
                        </tr>
                    </table>
                    </td>
                    <td width="232">
                    <table border="0" width="232" id="table37" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="45">&nbsp;</td>
                            <td width="187" align=left><div id="menu2" style="width: 192px; height: 19px; top: 50px;">
<ul>
  <li><h2>Page 4</h2>
    <ul style="position: absolute; left: 30px; top: 18px; height: 0px; width:130px">
      <li><a href="http://www.yahoo.com" title="Vertical Example">Submenu1 Page4</a></li>
      <li><a href="http://www.yahoo.com" title="Complete Example">Submenu2 Page4</a>
      </li>
    </ul>
  </li>
</ul>
</div></div><div class="clear"><!-- --></div>
</td>
                        </tr>
                    </table>
                    </td>
                </tr>
                <tr>
                    <td width="245" height="32">
                    <table border="0" width="245" id="table38" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="200" align="right"><div id="menu2" style="width: 192px; height: 19px; top: 50px;">
<ul>
  <li><h2>Page 2</h2>
    <ul style="position: absolute; left: 188px; top: 18px; height: 0px; width:130px">
      <li><a href="http://www.yahoo.com" title="Vertical Example">Submenu1 Page2</a></li>
      <li><a href="http://www.yahoo.com" title="Complete Example">Submenu2 Page2</a>
      </li>
    </ul>
  </li>
</ul>
</div></div><div class="clear"><!-- --></div>
</td>
                            <td width="45">&nbsp;</td>
                        </tr>
                    </table>
                    </td>
                    <td width="232">
                    <table border="0" width="232" id="table39" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="45">&nbsp;</td>
                            <td width="187" align=left><div id="menu2" style="width: 192px; height: 19px; top: 50px;">
<ul>
  <li><h2>Page 5</h2>
    <ul style="position: absolute; left: 30px; top: 18px; height: 0px; width:130px">
      <li><a title="Vertical Example">Submenu1 Page5</a></li>
      <li><a title="Complete Example">Submenu2 Page5</a>
      </li>
    </ul>
  </li>
</ul>
</div></div><div class="clear"><!-- --></div>
</td>
                        </tr>
                    </table>
                    </td>
                </tr>
                <tr>
                    <td width="245" height="32">
                    <table border="0" width="245" id="table40" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="200" align="right"><div id="menu2" style="width: 192px; height: 19px; top: 50px;">
<ul>
  <li><h2>Page 3</h2>
    <ul style="position: absolute; left: 188px; top: 18px; height: 0px; width:130px">
      <li><a  title="Vertical Example">Submenu1 Page3</a></li>
      <li><a  title="Complete Example">Submenu2 Page3</a>
      </li>
    </ul>
  </li>
</ul>
</div></div><div class="clear"><!-- --></div>
</td>
                            <td width="45">&nbsp;</td>
                        </tr>
                    </table>
                    </td>
                    <td width="232">
                    <table border="0" width="232" id="table41" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="45">&nbsp;</td>
                            <td width="187" align=left>
                            <div id="menu2" style="width: 192px; height: 19px; top: 50px;">
<ul>
  <li><h2>Page 6</h2>
    <ul style="position: absolute; left: 30px; top: 18px; height: 0px; width:130px">
      <li><a  title="Vertical Example">Submenu1 Page6</a></li>
      <li><a title="Complete Example">Submenu2 Page6</a>
      </li>
    </ul>
  </li>
</ul>
</div></div><div class="clear"><!-- --></div>
</td>
                        </tr>
                    </table>
                    </td>
                </tr>
            </table>
            <table border="0" width="777" id="table44" cellspacing="0" cellpadding="0" height="50">
                <tr>
                    <td valign="top" width="20">&nbsp;</td>
                    <td valign="top" width="368">
                    <table border="0" width="100%" id="table46" cellspacing="0" cellpadding="0">
                        <tr>
                            <td><b><font face="Tahoma" size="4" color="#FFFFFF">
                            sflkd lksdjf jdsjeritu ieritu </font></b></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                    </td>
                    <td width="388" valign="top">
                    <table border="0" width="388" id="table47" cellspacing="4" cellpadding="0">
                        <tr>
                            <td align="left">
<p>
<div style="overflow: hidden; font-family:tahoma; font-face:tahoma; font-size:0.8em" id="ContactElement">
&nbsp;</div>
</p>

                        </tr>
                    </table>
                    </td>
                </tr>
            </table>
            </td>
        </tr>
    </table>
</div>

</html>