下拉菜单不适用于 MasterPage

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 显示：inline-block - 已经存在 (?)
什么.dropdown.dropbtn？
我丢码了？

这是下拉菜单 CSS 代码。

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;
}

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

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

我需要将其添加到上面的代码中 ^^?

感谢您的帮助！请解释。

下拉菜单不适用于 MasterPage

Drop down menu won't work with MasterPage

html

css

asp.net

master-pages

drop-down-menu