我尝试为主页上的一个主选项卡创建下拉导航选项卡,我使用 CSS 来做到这一点。它在记事本上运行良好,但不适用于 Visual Studio 母版页文件。你能告诉我我哪里错了吗?样式表和代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#navMenu
{
margin: 0;
padding: 0;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height:40px;
}
#navMenu li
{
margin: 0;
padding :0;
list-style:none;
position: relative;
float: left;
background-color:gray;
color:#000;
border-radius:5px;
}
#navMenu ul li a
{
text-align:center;
font-family:tahoma;
font-size:9.5pt;
text-decoration:none;
height:40px;
display:block;
color:#000;
border-right:white thin solid;
}
#navMenu ul ul
{
position:absolute;
visibility:hidden;
top:40px;
}
#navmenu ul li:hover ul
{
visibility:visible;
}
#navMenu li:hover {
background-color:black;
color:#FFF;
}
#navMenu ul li:hover ul li a:hover
{
background:black;
color:white;
}
#navMenu a:hover{
color:#FFF
}
</style>
</head>
<body onresize="window.location=window.location;" style="text-align:justify">
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<div id="navMenu">
<ul>
<li>
<a href="~/" style="width:65px">Home</a>
</li>
<li>
<a href="~/" style="width:150px">tab1</a>
<ul >
<li><a href="~/" style="width:150px">subtab1</a> </li>
<li><a href="~/" style="width:150px">subtab2</a> </li>
<li><a href="~/" style="width:150px">subtab3</a> </li>
<li><a href="~/" style="width:150px">subtab4</a> </li>
</ul>
</li>
<li>
<a href="~/" style="width:125px">tab2</a>
</li>
<li>
<a href="~/" style="width:95px">tab3</a>
</li>
<li>
<a href="~/" style="width:65px">tab4</a>
</li>
<li>
<a href="~/" style="width:110px">tab5</a>
</li>
<li>
<a href="~/" style="width:165px">tab6</a>
</li>
<li>
<a href="~/" style="width:200px">tab7</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>