2016-08-23 78 views
1

我創建了子菜單菜單,子菜單在Tutorial下,當我放置或懸停鼠標時,它不顯示我的子菜單。我已經嘗試了很多東西,但它不起作用。子菜單不會顯示在懸停上

請詳細解答。

#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">&nbsp; 
 
        <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">&nbsp;</td> 
 
       <td>&nbsp;</td> 
 
      </tr> 
 
     </table> 
 
     
 
    </div> 
 
     
 
</body> 
 
</html>

回答

0

更換這個CSS

#header ul ul { 
    display: none; 
    left: 0; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 35px; 
    z-index: 999; 
} 

#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 { 
 
    display: none; 
 
    left: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 35px; 
 
    z-index: 999; 
 
} 
 

 
     #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">&nbsp; 
 
        <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">&nbsp;</td> 
 
       <td>&nbsp;</td> 
 
      </tr> 
 
     </table> 
 
     
 
    </div> 
 
     
 
</body> 
 
</html>

2

刪除保證金留下您的#header UL CSS和添加浮動權。 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; 
 
\t \t \t 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; 
 
\t \t \t \t  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">&nbsp; 
 
        <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">&nbsp;</td> 
 
       <td>&nbsp;</td> 
 
      </tr> 
 
     </table> 
 
     
 
    </div> 
 
     
 
</body> 
 
</html>

1

試試這個

#header ul > li > ul{ 
      position:absolute; 
      top:35px; 
      margin-top:0; 
      display:none; 
     } 

#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 > li > ul{ 
 
      position:absolute; 
 
      top:35px; 
 
      margin-top:0; 
 
      display:none; 
 
     } 
 

 
     #header > ul > li:hover > ul 
 
     { 
 
       display:block; 
 
     } 
 
#body { 
 
    height:750px; 
 
    width:auto; 
 
} 
 
#tableBody { 
 
      width: 100%; 
 
      height: 750px; 
 
      background-color: #CC6600; 
 
}
<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">&nbsp; 
 
        <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">&nbsp;</td> 
 
       <td>&nbsp;</td> 
 
      </tr> 
 
     </table> 
 
     
 
    </div>