html - 关于鼠标悬停和使用的问题

Question

我想创建一个带有子菜单的下拉菜单，但有一个问题，我的按钮出现在主菜单的文本下。我怎样才能提出来？查看源代码：

<!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.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>

score 3 · Accepted Answer

您的问题是 IE 无法识别 sudoclass :hover 除了锚标记之外的任何内容。使“suckerfish 下拉菜单”在 IE 中工作的解决方案是添加一个小 javascript，在其悬停事件中向 LI 元素添加一个新类。http://www.alistapart.com/articles/dropdowns上的页面详细说明了您需要的一切。

另一种选择是在页眉中添加以下内容：

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

这个 js 库应该修复很多在 IE 中发现的错误。您可以在http://code.google.com/p/ie7-js/找到有关它的更多信息。

另一个提示，为简洁起见，如果您为每个 div 元素提供相同的类，您可以在您的 css (div.class) 中一次引用所有元素，而不是像上面那样单独引用它们。我注意到您的 CSS 中有很多重复项。

score 0 · Accepted Answer

将来，将您的代码限制为仅直接相关的部分。您的按钮和冲突元素就足够了。

话虽如此，您应该在元素上使用 z-index 来确定哪个比另一个“更高”。在您更具体地展示您要解决的问题之前，这将尽我所能提供帮助。

html - 关于鼠标悬停和使用的问题

2 回答 2

Related

Reference