html - 下拉菜单不适用于 MasterPage

标签 html css asp.net drop-down-menu master-pages

所以我现在面临这个问题几天了,我真的不知道从哪里开始解决这个问题......

当我尝试创建 hover DropDownMenu
它只是不能与我的 CSS 文件中的其他内容一起使用。 它显示按钮本身(一半)以及悬停时。它确实改变了他的颜色,但没有真正发生。 没有打开列表。 Picture of it

(从他们提供的 w3s 学校代码中复制的 CSS)

感谢您的帮助!
希望能尽快收到你们的来信。

母版代码:

<%@ 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

最佳答案

三件事:

  1. 对于 .dropdown 设置 display: inline-block - 现在它具有完整的页面宽度

  2. 对于 .dropdown .dropbtn 设置 height: auto - 现在它从 button

    的样式中获取 32px/li>
  3. 您丢失了以下代码,该代码在悬停时显示菜单:

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

关于html - 下拉菜单不适用于 MasterPage,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41665997/

相关文章:

jquery - 如何缩放图像以获得一致的图像大小

html - 菜单周围的蓝色方 block

asp.net - 在global.asax文件的页面中返回错误时的方法名称和行号

asp.net - 使用内部 SecurityException 抛出异常仅在 ASP.NET MVC 中显示内部异常

javascript - 如果超过一定数量的字数,是否切断描述?

javascript - 随机/随机化一组具有两个子元素的 div

html - 为什么 google.com 不在 iFrame 中加载

javascript - HTML/CSS 不工作或 Javascript - 下拉菜单

c# - 迁移到 Redis session 状态时遇到问题

javascript - jQuery toggleClass 不会切换单独的缩略图单击操作