Is there a way to position the secondary menu directly under the primary horizontal navbar?

Question

Is there a way to position the secondary menu directly under the primary horizontal navbar?

I need help with positioning the secondary menu to drop down below the primary navbar item on hover. Currently, the menu is displaying above the list item and behind the adjacent list item, as well as being hidden behind content located beneath the navbar.

Here is the code snippet I have tried:

<%@ Master Language="C#" AutoEventWireup="true" 
        CodeBehind="Site2.master.cs" Inherits="abc.Site2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- Head section -->

If you want to see what's happening, please refer to this image: https://i.sstatic.net/pjHjB.png

Can anyone advise me on how to fix this issue? Here is a reference image as well: https://i.sstatic.net/HRvYD.png

html css asp.net-web-api navbar

Answer 1

Answer №1

I just updated the styling for

`ul.nav#sec`

TO:

margin-left: -59px;
bottom: -4rem;
position: absolute;
z-index: 10;

ul {
list-style: none;
}

ul#pri.nav {
  margin-left: 0px;
  margin-top:50px;
  z-index: -1;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  text-decoration: none;
  width: 100%;
  background-color: rgb(180, 221, 180);

}

ul.nav {
  height: 10px;
}

ul.nav li {
  float: left;
  margin-top: 0px;
  padding: 10px 13px;
  font-family: Arial, sans-serif;
  font-size: small;
  line-height: 15px;
  cursor: pointer;
  font-weight: 700;
}

ul.nav#pri li {
  margin-top: 0px;
  float: left;
  margin-right: 5px;
  font-family: 'Arial Rounded MT';
  color: #fff;
  width: 100px;
  height: 6px;
  text-align: center;
  padding: 20px;
  display: block;
  -moz-border-radius-topleft: 15px;
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topright: 15px;
  -webkit-border-top-right-radius: 15px;
  border-bottom-style: none;
  border-bottom-color: inherit;
  border-bottom-width: medium;
  background-color: #0fc15e;
  position: relative;
  bottom: 45px;
}

ul.nav#pri li a {
  text-decoration: none;
  color: #fff;
}

ul.nav#pri li.active,
ul.nav#pri li:hover ul.nav#sec {
  display: block;
  font-family: 'Arial Rounded MT';
  color: #a67cd5;
}

.nav#pri li:hover ul {
  color: #2b95b2;
}

ul.nav#sec {
display: none;
    margin-left: -59px;
    bottom: -4rem;
    position: absolute;
    z-index: 10;
}


ul.nav#sec li a {
  text-decoration: none;
  color: #fff;
  font-size: 14px;
}

ul.nav#sec li:hover {
  font-family: 'Arial Rounded MT';
  text-decoration: none;
  color: #fff;
  background-color: #747171;
}

      .auto-style2 {
        height: 550px;
      }

      .auto-style3 {
        height: 454px;
        margin-top: 40px;
      }

      .auto-style4 {
        height: 133px;
        margin-top: 81px;
      }

      .auto-style5 {
        margin-left: 57px;
      }

      .auto-style6 {
        width: 123px;
      }

    <form id="form1" runat="server" class="auto-style2">
      <div class="auto-style2">
        <div class="auto-style3">

          <div style="margin-top :80px">
            <div style="width:100%; float:left; margin-top: -20px;">
              <div style="float:left; width:44%; text-align:justify; margin-left:20px; 
   margin-top:-20px;">

                <asp:Image ID="Image1" Height="40" Width="150" ImageAlign="Middle" runat="server" ImageUrl="~/images/ Logo.png" />
              </div>
            </div>
          </div>
          <br />
          <br />

          <div>
            <ul id="pri" class="nav" style="height: 10px; margin-top: 30px">
              <li class="active"><a href="AfterLogin.aspx">Home</a></li>
              <li><a href="rubrics.aspx">Rubrics</a>
                              <ul id="sec" class="nav">
                  <li><a href="a">a</a></li>
                  <li><a href="b">b</a></li>
                  <li><a href="c">c</a></li>
                </ul>
              </li>
              <li><a href="CreateUser.aspx">Create User</a></li>
              <li><a href="#">Reports</a>
                <ul id="sec" class="nav">
                  <li><a href="a">a</a></li>
                  <li><a href="b">b</a></li>
                  <li><a href="c">c</a></li>
                </ul>
              </li>
              <li class="auto-style6"><a href="AdminMessaging.aspx">Messages</a></li>

              <li class="auto-style5">
                <asp:LinkButton runat="server" id="logout" onclick="logout_Click">Sign Out</asp:LinkButton>
              </li>
            </ul>

          </div>

          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">


          </asp:ContentPlaceHolder>


        </div>
      </div>

    </form>
    <div id="p1" class="auto-style4">
      <div style="height:10px;"></div>

      <div style="color:#F5F5F5;text-align:center;">
        Copyright © xyz
      </div>
    </div>

Answer 2

I just updated the styling for

`ul.nav#sec`

TO:

margin-left: -59px;
bottom: -4rem;
position: absolute;
z-index: 10;

ul {
list-style: none;
}

ul#pri.nav {
  margin-left: 0px;
  margin-top:50px;
  z-index: -1;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  text-decoration: none;
  width: 100%;
  background-color: rgb(180, 221, 180);

}

ul.nav {
  height: 10px;
}

ul.nav li {
  float: left;
  margin-top: 0px;
  padding: 10px 13px;
  font-family: Arial, sans-serif;
  font-size: small;
  line-height: 15px;
  cursor: pointer;
  font-weight: 700;
}

ul.nav#pri li {
  margin-top: 0px;
  float: left;
  margin-right: 5px;
  font-family: 'Arial Rounded MT';
  color: #fff;
  width: 100px;
  height: 6px;
  text-align: center;
  padding: 20px;
  display: block;
  -moz-border-radius-topleft: 15px;
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topright: 15px;
  -webkit-border-top-right-radius: 15px;
  border-bottom-style: none;
  border-bottom-color: inherit;
  border-bottom-width: medium;
  background-color: #0fc15e;
  position: relative;
  bottom: 45px;
}

ul.nav#pri li a {
  text-decoration: none;
  color: #fff;
}

ul.nav#pri li.active,
ul.nav#pri li:hover ul.nav#sec {
  display: block;
  font-family: 'Arial Rounded MT';
  color: #a67cd5;
}

.nav#pri li:hover ul {
  color: #2b95b2;
}

ul.nav#sec {
display: none;
    margin-left: -59px;
    bottom: -4rem;
    position: absolute;
    z-index: 10;
}


ul.nav#sec li a {
  text-decoration: none;
  color: #fff;
  font-size: 14px;
}

ul.nav#sec li:hover {
  font-family: 'Arial Rounded MT';
  text-decoration: none;
  color: #fff;
  background-color: #747171;
}

      .auto-style2 {
        height: 550px;
      }

      .auto-style3 {
        height: 454px;
        margin-top: 40px;
      }

      .auto-style4 {
        height: 133px;
        margin-top: 81px;
      }

      .auto-style5 {
        margin-left: 57px;
      }

      .auto-style6 {
        width: 123px;
      }

    <form id="form1" runat="server" class="auto-style2">
      <div class="auto-style2">
        <div class="auto-style3">

          <div style="margin-top :80px">
            <div style="width:100%; float:left; margin-top: -20px;">
              <div style="float:left; width:44%; text-align:justify; margin-left:20px; 
   margin-top:-20px;">

                <asp:Image ID="Image1" Height="40" Width="150" ImageAlign="Middle" runat="server" ImageUrl="~/images/ Logo.png" />
              </div>
            </div>
          </div>
          <br />
          <br />

          <div>
            <ul id="pri" class="nav" style="height: 10px; margin-top: 30px">
              <li class="active"><a href="AfterLogin.aspx">Home</a></li>
              <li><a href="rubrics.aspx">Rubrics</a>
                              <ul id="sec" class="nav">
                  <li><a href="a">a</a></li>
                  <li><a href="b">b</a></li>
                  <li><a href="c">c</a></li>
                </ul>
              </li>
              <li><a href="CreateUser.aspx">Create User</a></li>
              <li><a href="#">Reports</a>
                <ul id="sec" class="nav">
                  <li><a href="a">a</a></li>
                  <li><a href="b">b</a></li>
                  <li><a href="c">c</a></li>
                </ul>
              </li>
              <li class="auto-style6"><a href="AdminMessaging.aspx">Messages</a></li>

              <li class="auto-style5">
                <asp:LinkButton runat="server" id="logout" onclick="logout_Click">Sign Out</asp:LinkButton>
              </li>
            </ul>

          </div>

          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">


          </asp:ContentPlaceHolder>


        </div>
      </div>

    </form>
    <div id="p1" class="auto-style4">
      <div style="height:10px;"></div>

      <div style="color:#F5F5F5;text-align:center;">
        Copyright © xyz
      </div>
    </div>

Is there a way to position the secondary menu directly under the primary horizontal navbar?

Answer №1

Similar questions

Tips for preventing users from entering special characters into input fields

What is the best way to ensure that a <div> extends all the way to the bottom?

Displaying a bootbox modal on top of another modal will not cause the modal in the background to appear dim

Place the div at the center within the header

Managing asynchronous requests in ASP.NET Web API 2

.htaccess keeps track of login information

Finding content in HTML tables using JavaScript and jQuery

Looking to develop a multi-tiered menu component?

Showing Predefined Date on an HTML Form in an iOS Application

Unable to display and conceal div elements

What is the best way to fetch and convert information from an API to display on a website?

Deciding whether to use Device WebView Kit or HTML for your project is

Having trouble with my ajax code that reads a file into a div. I must be overlooking a small detail

Struggling with creating adaptive cards in Bootstrap 4

Strategies for storing component data within an Angular service

The background color of the div or section is stubbornly refusing to change, no matter how much I tweak it

Issue with Navbar Header: Troubleshooting and Solutions

Converting Excel Files from ".xls" to ".xlsx" Using PHP

Missing elements on webpage when inspecting code

Alignment issue with content within bootstrap grid