我的下拉菜单有两个问题，一个涉及链接，另一个涉及IE7问题。代码紧随问题之后，在两种情况下，我都在尝试避免使用javascript（项目的关键部分）
当我将鼠标悬停时，我成功地突出显示了链接的文本，包括上方，下方，左侧和右侧的一些像素。但是，突出显示中唯一可单击的部分（即可以在其中访问超链接的地方）是文本所在的位置，并且我希望能够使整个突出显示，填充和文本都可单击。我之前已经做过，但是我对如何修复它的当前代码感到困惑。有人可以帮我吗？
使用相同的下拉列表，一切正常，除了IE7。一些IE7用户抱怨说，一旦突出显示菜单项并出现下拉菜单，他们只会在下拉菜单消失之前下降到第二项左右，并且每次下拉菜单都会这样做。我知道这是IE7的问题，但我需要解决此问题。有什么帮助吗？
我的CSS代码：
ul { list-style: none; }
p { margin: 8px 0; }
ul.dropdown { list-style-type:none;height:24px; top:2px; padding:0px 0px 0px 0px;;margin:0px 0px 0 1px;vertical-align:bottom; color:#000000; position: relative; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
ul.dropdown li { float: left; position:relative; vertical-align:middle; background-position:0 -40px; padding: 2px 4px 5px 2px; margin-right:6px;}
ul.dropdown li a { display: block; padding: 0px 0px; color: #222; text-decoration:none; vertical-align:middle; width:100%;}
ul.dropdown li:last-child a { border-right: none; }
ul.dropdown li.hover,
ul.dropdown li:hover { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a { color: black; }
ul.dropdown ul { width: 152px; visibility: hidden; position: absolute; top: 100%; left: -40px; z-index:60;}
ul.dropdown ul li { font-weight: normal; background: #ECEAD8; color: #000; width:100%;/*border-bottom: 1px solid #ccc;*/ float: none; }
ul.dropdown ul li.nohover { color: black; background: #ECEAD8; position:relative; }
ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; min-height:1.4em;}
ul.dropdown ul ul { left:72.7%;top: 0px; width:158px; z-index:50; display:inline-block;}
ul.dropdown li:hover > ul { visibility: visible; display:block; }
#arrowRight { float:right; margin-top:-11px;}
a.moreItems {background: url(/images/menu/arrow_r.gif) no-repeat right;}
这是HTML代码：
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link rel=stylesheet type="text/css" href="menustylesheet.css">
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25" class="topmenu" bgcolor="##ECEAD8" nowrap>
<ul class="dropdown">
<li><a href=""><b>Item 1</b> <img src="/images/menu/arrow_d.gif" border="0" height="7" width="7"></a>
<ul>
<li><a class="moreItems" href="">Item 1-1</a>
<ul>
<li><a href="">Item 1-1-1</a></li>
</ul>
</li>
<li><a class="moreItems" href="">Item 1-2</a>
<ul>
<li><a href="">Item 1-2-1</a></li>
</ul>
</li>
<li>Item 1-3 <div style="vertical-align:middle;"><img src="/images/menu/arrow_r.gif" id="arrowRight" border="0"></div>
<ul>
<li><a href="">Item 1-3-1</a></li>
<li><a href="">Item 1-3-2</a></li>
</ul>
</li>
<li><a href="">Item 1-4</a></li>
<li><a href="">Item 1-5</a></li>
</ul>
</li>
</ul>
</td>
</tr>
<tr><td bgcolor="##c0c0c0" style="height:1px;"></td></tr>
</table>
</body>
</html>
对于以前已回答的问题，我深表歉意，但我希望有人可以指出我在代码中需要更改或修改的地方，以使其正常工作。
最佳答案
我对你的第一个问题有一个答案。做这种菜单时。我尽可能地远离填充。我发现仅使用边距会更容易，但是对于初学者来说，请看一下我为您创建的页面：
http://www.albatrossfonts.com/stack/ulbuttons.html
我将在下面解释此代码。
这是我的HTML：
<div id="wrapper">
<ul class="dropdown">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 1</a></li>
</ul>
</div>
和CSS：
.dropdown
{
width: 200px;
display:block;
margin: 200px auto 0 auto;
list-style-type: none;
padding: 0;
}
.dropdown li
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 1px 0 0 0;
list-style-type: none;
padding: 0;
}
.dropdown li a:link, .dropdown li a:visited
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 0;
color: #ffffff;
background-color: #666666;
text-decoration: none;
text-indent: 12px;
line-height: 44px;
}
.dropdown li a:hover
{
background-color: #333333;
}
请注意，我声明了一个：link，而不只是一个。我还声明了a：visited，因为我希望访问的状态与原始状态相同。
在.dropdown条目中，我仅定义了列表（ul）的宽度并使其正确显示。
在.dropdown li条目中，我设置每个列表项的宽度和高度，删除项目符号，并设置显示和浮动以使其显示为框。没有填充。只是一个盒子。
在.dropdown li a：link和.dropdown li a：visited条目中，我们实际上所做的是用链接“填充”列表项框，并且碰巧我们也可以将链接定义为框。因此，我将链接的尺寸设置为与li的尺寸完全相同（这是使整个框可单击的原因）。然后设置显示和浮动，以及背景颜色，文本颜色或简称为“颜色”。
为了使文本居中，请勿使用垂直对齐。使用line-height，并将其设置为与li元素相同的高度。这将使文本在框中垂直居中。
要控制文本水平显示的位置，请设置text-indent属性，然后使用text-align。在此示例中，我使用了text-indent。
最后，我们定义a：hover状态。重要的是要记住，您真正需要在此处定义的唯一东西是任何实际更改的属性。在这种情况下为背景色。
如果您想为鼠标按下事件设置状态，则可以执行以下操作：
.dropdown li a:active
{
background-color: #000000;
text-indent: 20px;
}
//////////////////////////
这是将单个css样式用于多个菜单或子菜单的方法。
2个单独的ul的html：
<ul class="dropdown">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 1</a></li>
</ul>
<ul class="dropdown">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 1</a></li>
</ul>
CSS ：（保持不变，因为您将它们都分配给了“下拉列表”类。
.dropdown
{
width: 200px;
display:block;
margin: 200px auto 0 auto;
list-style-type: none;
padding: 0;
}
.dropdown li
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 1px 0 0 0;
list-style-type: none;
padding: 0;
}
.dropdown li a:link, .dropdown li a:visited
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 0;
color: #ffffff;
background-color: #666666;
text-decoration: none;
text-indent: 12px;
line-height: 44px;
}
.dropdown li a:hover
{
background-color: #333333;
}
如果要为孩子ul应用样式，则如下所示：
<ul class="dropdown">
<li><a href="#">Button 1</a>
<ul>
<li><a href="#">subButton 1</li>
<li><a href="#">subButton 2</li>
<li><a href="#">subButton 3</li>
</ul>
</li>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 1</a></li>
</ul>
您只需添加样式即可包括子级ul和子级ui li，如下所示；其中.dropdown实际上代表您的第一个ul。所以.dropdown（ul）-> li（“下拉列表”无序列表中的列表项）-> ul（下拉列表li内的ul）-> li（下拉列表ul li ul内的li）
抱歉，这听起来令人困惑，但是换句话说，如果您根本没有为父ul分配一个类，那么访问子列表中的列表项将是所有的。
.dropdown, dropdown li ul
{
width: 200px;
display:block;
margin: 200px auto 0 auto;
list-style-type: none;
padding: 0;
}
.dropdown li, .dropdown li ul li
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 1px 0 0 0;
list-style-type: none;
padding: 0;
}
.dropdown li a:link, .dropdown li a:visited, .dropdown li ul li a:link, .dropdown li ul li a:visited
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 0;
color: #ffffff;
background-color: #666666;
text-decoration: none;
text-indent: 12px;
line-height: 44px;
}