I want my dropdown list to be over all the elements when its opened but the list seems to be stuck under something (to my understanding it is not the border as I tried to remove it).
Can someone please help me, if possible can the dropdown content not expand the border and just go over it when mouse is over the list.
This is my CSS:
.dropDownContent {
display: none;
position: absolute;
width: 90px;
}
.dropDown:hover .dropDownContent {
display: block;
}
.border {
border: 2px solid black;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
margin: 0 auto;
max-width: 500px;
}
This is the master page where the lists are modified in:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="web_pages_MasterPage" ClientIDMode="Static" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<meta charset="utf-8" />
<link href="../CSS/extarnelStyle.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="../JS/JavaScript.js"></script>
</head>
<body>
<form id="form1" runat="server">
<ul>
<li class="dropDown">//thats the first dropdown
<a href="login.aspx">login</a>
<div class="dropDownContent">
<a href="register.aspx">register</a>
<a href="recover_password.aspx">recover password</a>
<asp:LinkButton runat="server" OnClick="LogOut">Logout</asp:LinkButton>
</div>
</li>
<li><a href="main_page.aspx">main page</a></li>
<li><a href="a.aspx">a</a></li>
<li><a href="b.aspx">b</a></li>
<li><a href="c.aspx">c</a></li>
<li runat="server" id="bar1"><a href="d.aspx">d</a></li>
<li runat="server" id="bar2"><a href="e.aspx">e</a></li>
<li><a href="f.aspx">f</a></li>
<li class="dropDown" runat="server" id="bar3">//thats the second dropdown
<a>admin</a>
<div class="dropDownContent">
<a runat="server" href="f.aspx">f</a>
<a runat="server" href="g.aspx">g</a>
</div>
</li>
</ul>
<h3 style="margin-top: 130px;"><%="header" + Session["userName"] %></h3>
<hr />
<a href="main_page.aspx">
<img src="../IMG/logo.png" alt="logo" style="width: 300px; height: 120px; position: absolute; top: 0; right: 0;">
</a>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
I tried changing z-index of all the elements and removing the border and a lot of other things and nothing worked (I am self learning everything and really new to it).
For the dropdown in that menu bar? You still use "li" tags here.
So, so try this:
In above, I have a drop down called site admin. Note the rest of the menu bar is the default menu created when you created the project.
Note how I didn’t use any "div" inside. You may well be able to, but simply add the class, and for each drop-down choice, then li tags.
The result of the above is thus this:
So, try following the above.
As above shows, the drop down does appear on top of the content. It is possible you messed around with the content on the page (say z-index), but by default, and without efforts, the drop down you add to the menu bar should appear above and on top of the page content.
Note that in that dropdown, I was free to use a asp.net button (a link button) with a server-side event.
e.g., this:
In above, I choose a LinkButton in place of a asp.net button. This allowed with greater ease to style the link button to match the style of the existing bootstrap menu bar.