0

我尝试为主页上的一个主选项卡创建下拉导航选项卡,我使用 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>
4

1 回答 1

0

尝试添加标签,如下所示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
于 2013-04-05T12:20:21.083 回答