Search code examples
htmlcssasp.netdrop-down-menumaster-pages

Drop down menu won't work with MasterPage

So I am facing that problem for couple of days now and I really don't know where to start with this issue...

When I am trying to create the hover DropDownMenu
It just won't work with the other stuff goes on my CSS file. it shows the button itself (half of it) and when you hover. it does change his color but nothing really happends. No list opened. Picture of it

(The CSS copied from the w3s School code they offer)

Thanks for helping!
Hope to hear from you guys soon.

The MasterPage Code: 

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

i hope I posted it right O-o

Solution

  • Three things:

    1. For .dropdown set display: inline-block - now it has full page width

    2. For .dropdown .dropbtn set height: auto - now it gets 32px from styles for button

    3. You lost below code, which shows menu on hover:

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