子菜单未在悬停时显示

时间：2016-08-23 08:47:12

标签： html css css3

我创建了具有子菜单的菜单，当我放置或悬停鼠标时子菜单位于Tutorial下，它没有显示我的子菜单。我尝试了很多东西，但它没有用。

请详细说明解决方案。

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
 <!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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：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;
			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">&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 :(得分：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>

答案 2 :(得分：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>

相关问题
最新问题