tags:

views:

1081

answers:

2
+1  Q: 

Question about mouse over and use <ul> <li>

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; 
<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.seoconsultants.com/css/menus/vertical/"  align=left>Submenu1 Page1</a></li>
      <li class="sub"><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" >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.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Submenu1 Page4</a></li>
      <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" 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.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Submenu1 Page2</a></li>
      <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" 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 href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Submenu1 Page5</a></li>
      <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" 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 href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Submenu1 Page3</a></li>
      <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" 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 href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Submenu1 Page6</a></li>
      <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" 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">
<style type="text/css">
<!--
#ContactElement {
  width: 30em;
  height: 4em;
  padding: 0em;
  border: 0px solid #cc0000;
  color: #FFFFFF;
}
-->
</style>
<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>
A: 

In the future, limit your code to only the immediately relevant portions. Your button, and the conflicting element would have sufficed.

That being said, you should use z-index on the elements to determine which one is "higher" than the other. That's about as helpful as I can be, until you show more specifically what you are addressing.

Jonathan Sampson  2009-02-04 18:36:57
+3  A: 

Your problem is that IE does not recognize the sudoclass :hover on anything but anchor tags. The solution to making "suckerfish dropdowns" work in IE is to add a little javascript that adds a new class to the LI elements on their hover event. The page at http://www.alistapart.com/articles/dropdowns details everything you will need.

Another option would be to add the following in your page header:

<!--[if lt IE 8]>
   <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

This js library is supposed to fix a lot of the bugs found in IE. You can find more info about it at http://code.google.com/p/ie7-js/.

Another tip, just for brevity, if you give each div element the same class you could just refer to all of them at once in your css (div.class) rather than individually like you are doing above. I noticed you have a lot of duplication in your CSS.

Ross Pace  2009-02-04 18:57:53

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?