I have successfully implemented a dropdown menu, but it appears that it is displaying beneath the Navbar instead

My dropdown menu is not showing on top of the screen; it appears below the navigation section. I want to adjust it so that it appears above everything for better visibility. Here is my code snippet.

.sub-menu {
  display: none;
  margin-top: 0 !important;
}

.navbar-header .navbar-ul .main-menu-items .about-us-menu #about-sub-menu {
  z-index: 100;
  position: relative;
}

.navbar-header .navbar-ul .about-us-menu .sub-menu {
    width:180px;
}
...
...</questionbody>
<exquestionbody>
<div class="question">
                
<p>My Dropdown menu opens up but it goes down under behind the screen like unless I increase the navbar height it isn't visible.
here is my code.
I want it to come on top of everything so the user can actually see it.
It goes underneath the nav section, so is not visible.</p>
<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>.sub-menu {
  display: none;
  margin-top: 0 !important;
}

.navbar-header .navbar-ul .main-menu-items .about-us-menu #about-sub-menu {
  z-index: 100;
  position: relative;
}

.navbar-header .navbar-ul .about-us-menu .sub-menu {
  width: 150px;
}

.navbar-header .navbar-ul .about-us-menu .sub-menu ul li a {
  padding-top: 10px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.sub-menu ul li {
  margin: 15px;
  width: 120px;
  position: relative;
  /* padding: 15px; */
}

.navbar-header .navbar-ul .courses-sub-menu:hover .sub-menu ul li a {
  width: 150px;
  margin: 0 !important;
  padding-top: 10px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.navbar-header .navbar-ul .about-us-menu .sub-menu {
  width: 180px;
}

.navbar-header ul li:hover .sub-menu {
  display: block !important;
  position: absolute;
  background: #333333;
  margin-top: 15px;
}

.sub-menu ul:hover {
  display: block !important;
}

.navbar-header ul li:hover .sub-menu ul {
  display: block;
  /* margin: 10px;  */
}

.sub-menu ul li:hover {
  display: block;
  background: #f5f5f7;
  color: black !important;
}

.sub-menu ul li a {
  color: #f5f5f7;
}

.navbar-header ul li:hover .sub-menu ul li {
  display: block !important;
  color: black;
  width: 150px;
  padding: 0 !important;
  border-radius: 0;
  text-align: center;
}

.sub-menu ul li a:hover {
  color: black;
}
<div class="navbar-header" style="padding: 0; margin: 0; ">
  <ul class="navbar-ul">
    <div class="main-menu-items">
      <li>
        <a routerLink="/home"><img src="../../../assets/xyz" class="navbar-logo" alt=""></a>
      </li>
      <!-- logo -->
      <!-- <li><a routerLink="/home">Home</a></li> -->
      <!-- <li><a routerLink="/aboutus">About Us</a></li> -->
      <li class="about-us-menu"><a routerLink="#">About Us</a>
        <div class="sub-menu">
          <ul id="about-sub-menu">
            <li>
              <a href="/aboutus/gallery">Gallery</a>
            </li>
            <li>
              <a href="/testimonials">Testimonials</a>
            </li>
            <li>
              <a href="/blog">Blogs</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="courses-sub-menu"><a routerLink="/courses">Courses</a>
        <div class="sub-menu">
          <ul>
            <li>
              <a href="#">Science</a>
            </li>
            <li>
              <a href="#">Physics</a>
            </li>
            <li>
              <a href="#">Biology</a>
            </li>
            <li>
              <a href="#">Mathematics</a>
            </li>
            <li>
              <a href="#">Chemistry</a>
            </li>
            <li>
              <a href="#">Business Studies</a>
            </li>
            <li>
              <a href="#">Accountancy</a>
            </li>
            <li>
              <a href="#">Economics</a>
            </li>
            <li>
              <a href="#">Psychology</a>
            </li>
            <li>
              <a href="#">SAT/ACT</a>
            </li>
          </ul>
        </div>
      </li>

htmlcssfrontend

Answer №1

Here is a list of CSS properties that can help you achieve your desired design:

.main-menu-items {
  background: none;
  color: Black;
  padding: 12px 26px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
  min-width: 160px;
}

.sub-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.sub-menu a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.sub-menu a:hover {background-color: #f1f1f1}

.dropdown:hover .sub-menu {
  display: block;
  position: absolute;
  left: 100%;
  top: 0;
}

.nav-wrapper {
  display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="navbar-header">
    <div class="nav-wrapper">
      <div class="dropdown">
        <button class="main-menu-items">About Us</button>
        <div class="sub-menu">
          <a href="#">Gallery</a>
          <a href="#">Testimonials</a>
          <a href="#">Blogs</a>
        </div>
      </div>
    </div>
    <div class="nav-wrapper">
      <div class="dropdown">
        <button class="main-menu-items">Courses</button>
        <div class="sub-menu">
          <a href="#">Science</a>
          <a href="#">Physics</a>
          <a href="#">Biology</a>
          <a href="#">Mathematics</a>
          <a href="#">Chemistry</a>
          <a href="#">Business Studies</a>
          <a href="#">Accountancy</a>
          <a href="#">Economics</a>
          <a href="#">Psychology</a>
          <a href="#">SAT/ACT</a>
        </div>
      </div>
    </div>    
  </div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing the value of a field using JavaScript/jQuery

Welcome to my page! I am working on obtaining the current Start and Finish date values. I plan to add a button for users to click, which will then retrieve all dates and display them somewhere on the page. But for now, I just need a way to access the date ...

javascriptjqueryhtmlextjs

Determine how the scale of a transform changes over time by calculating the function of elapsed time [ transform: scale(x, y

I am currently working on a container that can be expanded and collapsed simply by clicking on a chevron icon. The functionality to collapse or expand the container resides within a function called transformAnimation. This function code closely resembles t ...

javascripthtmlcssanimationmath

JavaFX GridPane: Automatically adjust size when content is hidden or disabled

Is it feasible to reduce the size of a GridPane row if the content in that row is both disabled and invisible? Even when a Node is set to disable=true and visible=false, the cell continues to occupy space. If I have 8 rows but only the first and last are ...

cssjavafxjavafx-8

The functionality of my PHP code for email transmission is currently malfunctioning

I'm having trouble sending mail from my HTML form using PHP. I've uploaded the necessary files to my hosting server but the mail is still not being sent. Here is my HTML code: <!-- Form --> <form action="http://example.com/sendEmail.php ...

phphtmlemail

Stop the window from scrolling up smoothly when opening a custom modal to avoid any flickering

I encountered a problem with a custom modal window that would open on click and move to the top of the viewport. The issue was that when scrolling up, the page beneath would be visible, so I needed to restrict scrolling once the modal was open. Below is th ...

javascriptjqueryhtml

Modal dismissed, yet the scroll bar fails to reappear

I am currently facing an issue with a Bootstrap 3 modal in my project. When I close the modal using the 'close button' or the 'x' in the top right corner, the page returns to its proper state with a vertical scroll bar showing. However, ...

htmlajaxtwitter-bootstrap-3scrollbar

Combine and interchange horizontal and vertical form designs within antd 5 for a personalized touch

I need to customize the layout of a form to display checkboxes in vertical mode. Specifically, there is a row of checkboxes that I want to appear vertically aligned rather than horizontally. In the past, I was able to achieve this in antd 4 by applying a ...

javascriptcssreactjsantd

Bootstrap cards that mimic a horizontal scroll but are actually static and

As I work on creating my website, I'm aiming to achieve a similar effect as shown in this example: https://codepen.io/GreenSock/pen/NWYxBKO, but using bootstrap cards instead of images. Here is the code for the bootstrap card: <div class="car ...

htmlbootstrap-5

The dropdown-menu is positioned in a different location than its relative position

Utilizing the bootstrap dropdown feature in the navigation bar with a menu (represented by three dots) icon https://i.sstatic.net/vR13Z.png However, the issue arises on mobile devices. When I open the navigation bar and click on the menu button, the dropd ...

htmlcssangularbootstrap-4

Adjusting the size of text using a central point

Currently, I am working on creating an animation that involves text resizing based on scrolling direction. The idea is that when scrolling down, the text decreases in size, and when scrolling up, it increases. Additionally, as the user scrolls down, the te ...

htmljquerycss

Why aren't the JavaScript stars shining once I've selected one?

I recently set up a star rating feature on my website by following the tutorial "Creating an Ajaxified Star Rating System in Rails 3". Although I managed to get everything working on the index page, I noticed that the stars do not remain lit up after bein ...

javascriptjquerycssruby-on-railsruby

Emphasize the selected item using the same style as the one that was dragged or clicked

Imagine a scenario where there are numerous items, each labeled with a specific class. There may be multiple items sharing the same class. If a user clicks or drags an item, I want all other items with the same class to be highlighted as well. I am looki ...

htmlcss

Creating Responsive Social Icons using HTML and CSS

Currently working on my portfolio website, but encountered an error. Can someone assist me in making my social icons responsive? I need the icons to be responsive and aligned horizontally for the mobile version. Here is a visual of the issue with the desk ...

htmlcssresponsiveness

Align a nested DIV in the center of the page both vertically and horizontally

Similar Question: Best way to center a <div> on a page vertically and horizontally? On my website landing page, the Container DIV occupies 100% of the Height and Width. While I have successfully centered the InnerContainer horizontally, I am fac ...

htmlcss

The Colorful World of CSS Backgrounds

I've been searching for hours trying to track down the source of this strange greenish background color. I've combed through every single file and it's starting to drive me insane. Any ideas where this color could be coming from? I highly d ...

javascripthtmlcss

having difficulty showing the primary content page

I'm having trouble displaying a header, side navigation bar, and main content on my page with the code below. Instead of showing anything, I keep getting a parse error: unexpected end of file. What could be causing this issue? <!doctype html> ...

phphtml

Both dropdown menus automatically populated with data sourced from a MySQL database

I am facing an issue with two dropdowns that are supposed to be populated dynamically based on selections made in each other. The first dropdown is filled from a MySQL database without any problem. However, when I select an item from the first dropdown, th ...

jqueryhtml

How to maintain visibility of child div while setting parent's height to 0 in CSS

I am looking to create a basic animation that will display and hide a component. #parent { height: 0px; } <div id="parent"> <div id="child">This is some content</div> </div> Even after setting the parent div's height to ...

htmlcssangular

Change the width of both text boxes

As a newcomer to designing HTML forms, I am looking to create a simple input-group where the width of the text boxes is different. Specifically, I want the surname textbox to be shorter and the FullName textbox to be longer. Can anyone provide guidance on ...

cssbootstrap-4width

Concealing an HTML form field until a dropdown selection is made

I have been struggling with my JavaScript code, searching for a solution to hide a form option (label and textbox) until a value is selected from a dropdown. Specifically, I want to hide the label and input box for "lookup" until a value is selected from t ...

javascripthtmlcss