我创建了带有子菜单的菜单，当我放置或悬停鼠标时，子菜单位于 教程 下，它没有显示我的子菜单。我尝试了很多东西，但没有用。
请给出详细的解决方案。
#header {
margin-top:0px;
height:120px;
width:auto;
background-image:url('http://localhost:5172/Images/sd.jpg');
border:dashed;
border-top-color:green;
}
#header ul{
list-style:none;
height:37px;
margin-left:900px;
width: 611px;
margin-top:83px;
display:block;
}
#header ul li{
background-color:red;
border:1px solid white;
width:120px;
height:35px;
line-height:35px;
text-align:center;
float:left;
position:relative;
}
#header ul li a{
text-decoration:none;
color:white;
display:block;
}
#header ul li a:hover
{
background-color:gold;
}
#header ul ul{
position:absolute;
display:none;
}
#header ul li:hover > ul
{
display:block;
}
#body {
height:750px;
width:auto;
}
#tableBody {
width: 100%;
height: 750px;
background-color: #CC6600;
} <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="CSS/StyleSheet.css" rel="stylesheet" />
</head>
<body>
<div id="header">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">SALES AND DISTRIBUTION</a></li>
<li><a href="#">C-SHARP</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">WCF</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">ADO.NET</a></li>
<li><a href="#">LINQ</a></li>
<li><a href="#">ENTITY FRAMEWORK</a></li>
<li><a href="#">ASP.NET MVC</a></li>
<li><a href="#">WPF</a></li>
<li><a href="#">ABAP</a></li>
<li><a href="#">ETL</a></li>
<li><a href="#">SSIS</a></li>
<li><a href="#">SSAS</a></li>
<li><a href="#">SSRS</a></li>
</ul>
</li>
<li><a href="#">IntervieQuestions</a></li>
<li><a href="#">ContactUs</a></li>
</ul>
</div>
<div id="body">
<table id="tableBody">
<tr>
<td style="height:48px;width:286px">
<asp:ImageButton ID="ImageButton1" runat="server" Height="39px" ImageUrl="~/Images/UserGroup_32x32.png" Width="283px" />
</td>
<td style="height:48px;width:1241px"></td>
<td style="height:48px;"></td>
</tr>
<tr>
<td style="width:286px;margin-bottom:100px">
<asp:Panel ID="pnlVerticalMenus" runat="server" style="z-index: 1; left: 13px; top: 194px; position:absolute; height: 404px; width: 286px; font-weight: 700; color: #336600;">
<ul style="list-style:none">
<li><a href="#">HOME</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">SALES AND DISTRIBUTION</a></li>
<li><a href="#">C-SHARP</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">WCF</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">ADO.NET</a></li>
<li><a href="#">LINQ</a></li>
<li><a href="#">ENTITY FRAMEWORK</a></li>
<li><a href="#">ASP.NET MVC</a></li>
<li><a href="#">WPF</a></li>
<li><a href="#">ABAP</a></li>
<li><a href="#">ETL</a></li>
<li><a href="#">SSIS</a></li>
<li><a href="#">SSAS</a></li>
<li><a href="#">SSRS</a></li>
<li><a href="#">IntervieQuestions</a></li>
<li><a href="#">ContactUs</a></li>
</ul></asp:Panel>
</td>
<td style="width:1241px"> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>最佳答案
删除#header ul css 的左边距并添加右边的 float 。 CSS 已更新，请检查一次。
#header {
margin-top:0px;
height:120px;
width:auto;
background-image:url('http://localhost:5172/Images/sd.jpg');
border:dashed;
border-top-color:green;
}
#header ul{
list-style:none;
height:37px;
float:right;
width: 611px;
margin-top:83px;
display:block;
}
#header ul li{
background-color:red;
border:1px solid white;
width:120px;
height:35px;
line-height:35px;
text-align:center;
float:left;
position:relative;
}
#header ul li a{
text-decoration:none;
color:white;
display:block;
}
#header ul li a:hover
{
background-color:gold;
}
#header ul ul{
display:none
}
#header ul li:hover > ul
{
display:block;
margin-top: 0px;
}
#body {
height:750px;
width:auto;
}
#tableBody {
width: 100%;
height: 750px;
background-color: #CC6600;
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="CSS/StyleSheet.css" rel="stylesheet" />
</head>
<body>
<div id="header">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">SALES AND DISTRIBUTION</a></li>
<li><a href="#">C-SHARP</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">WCF</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">ADO.NET</a></li>
<li><a href="#">LINQ</a></li>
<li><a href="#">ENTITY FRAMEWORK</a></li>
<li><a href="#">ASP.NET MVC</a></li>
<li><a href="#">WPF</a></li>
<li><a href="#">ABAP</a></li>
<li><a href="#">ETL</a></li>
<li><a href="#">SSIS</a></li>
<li><a href="#">SSAS</a></li>
<li><a href="#">SSRS</a></li>
</ul>
</li>
<li><a href="#">IntervieQuestions</a></li>
<li><a href="#">ContactUs</a></li>
</ul>
</div>
<div id="body">
<table id="tableBody">
<tr>
<td style="height:48px;width:286px">
<asp:ImageButton ID="ImageButton1" runat="server" Height="39px" ImageUrl="~/Images/UserGroup_32x32.png" Width="283px" />
</td>
<td style="height:48px;width:1241px"></td>
<td style="height:48px;"></td>
</tr>
<tr>
<td style="width:286px;margin-bottom:100px">
<asp:Panel ID="pnlVerticalMenus" runat="server" style="z-index: 1; left: 13px; top: 194px; position:absolute; height: 404px; width: 286px; font-weight: 700; color: #336600;">
<ul style="list-style:none">
<li><a href="#">HOME</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">SALES AND DISTRIBUTION</a></li>
<li><a href="#">C-SHARP</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">WCF</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">ADO.NET</a></li>
<li><a href="#">LINQ</a></li>
<li><a href="#">ENTITY FRAMEWORK</a></li>
<li><a href="#">ASP.NET MVC</a></li>
<li><a href="#">WPF</a></li>
<li><a href="#">ABAP</a></li>
<li><a href="#">ETL</a></li>
<li><a href="#">SSIS</a></li>
<li><a href="#">SSAS</a></li>
<li><a href="#">SSRS</a></li>
<li><a href="#">IntervieQuestions</a></li>
<li><a href="#">ContactUs</a></li>
</ul></asp:Panel>
</td>
<td style="width:1241px"> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>关于html - 悬停时不显示子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39096466/