Question

所以我现在面对这个问题几天了，我真的不知道从这个问题开始......

当我尝试创建hover DropDownMenu时它只是不适用于我的CSS文件中的其他东西。它显示按钮本身（一半）和你悬停时。它确实改变了他的颜色但没有真正发生。没有列表打开。 Picture of it

（从他们提供的w3s学校代码复制的CSS）

感谢您的帮助！希望很快能收到你们的消息。

MasterPage代码：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    
    <title>Nua </title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="assets/css/main.css" />



    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>

    <style>
        .topleft {
    position: absolute;
    top: 0px;
    left: 9%;
    font-size: 16px;
}
.topLeftSecond {
    position: absolute;
    top: 0px;
    left: 17.5%;
    font-size: 16px;

}

</style>

            
    <form id="form1" runat="server">

      
        <% if (Session["Level"].ToString().Equals("-1"))
            { %>              
        <div class="icon-bar">
                  <a class="active" href="HomePage.aspx"><i class="fa fa-home"></i></a> 
                 <a href="Login.aspx">Login <i class="fa fa-sign-in"></i></a> 
                   <a href="Register.aspx">Register <i class="fa fa-pencil"></i></a> 
                     <a class="more" href="HomePage.aspx#main">About  <i class="fa fa-info-circle"> </i></a>

</div>



	   <%} %> 
      <%--  This is the Drop down menu code--%>
    
             <%if (Session["Level"].ToString().Equals("1"))
               { %>
                             <div class="dropdown">
                                <button class="dropbtn">Here</button>
                                <div class="dropdown-content">
                                      <a href="AdminArea.aspx">Link 1</a>
                                      <a href="WorkersPage.aspx">Link 2</a>
                         </div>
                    </div>



              <%} %>
         
    <div>
      
         		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrolly.min.js"></script>
			<script src="assets/js/jquery.poptrox.min.js"></script>
			<script src="assets/js/skel.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>
        
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>

    </div>
    </form>
</body>
</html>

我希望我发布它正确O-o

Answer 1

三件事：

对于.dropdown设置display: inline-block - 现在它具有整页宽度
对于.dropdown .dropbtn设置height: auto - 现在它从button

您丢失了以下代码，显示了悬停时的菜单：

.dropdown:hover .dropdown-content {
    display: block;
}

Answer 2

失去了我的朋友。

.dropdown显示：内联块 - 已存在（？）
什么.dropdown .dropbtn？
我丢了代码？

这是DropdownMenu CSS代码。

＆＃13;

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #555;
}

li {
    float: left;
    
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

＆＃13;

你的意思是你刚写下的代码

.dropdown:hover .dropdown-content {
    display: block;
}

我需要在^^？

谢谢你的帮助！请解释一下。

下拉菜单不适用于MasterPage

2 个答案: