Is there a way to create a dropdown menu that appears to emerge from behind a button?

I am struggling with the stack order of my dropdown menu. Despite using z-index, it appears in front of the button instead of behind it. I want it to look like it is coming out from behind the button. Here is my code:

.subnav-wrapper {
  position: relative;
  padding: 10px 15px !important;
  cursor: pointer;
  z-index: 0;
}

.subnav-wrapper:hover .subnav {
  visibility: visible;
  transition-delay: 0s, 0s, 0.05s;
  transform: translateY(0%);
  z-index: 1;
}

.subnav-wrapper:hover .subnav a {
  opacity: 1;
}

.subnav {
  position: absolute;
  padding: inherit;
  background-color: black;
  color: white;
  z-index: -1;
  min-width: 110px;
  visibility: hidden;
  margin-top: 10px;
  transform: translateY(-100%);
  transition: ease-in-out 0s, visibility 0.05s linear 0.3s, z-index 0.3s linear 0.01s, transform 0.14s;
}

.subnav a {
  opacity: 0;
  transition: opacity 0.3s;
}

a {
  text-decoration: none;
}

.black-text {
  color: black;
}

.subnav-element {
  color: white;
  display: inline-block;
  padding: 5px 5px;
  font-size: 0.9em;
}
<div class="nav-element subnav-wrapper"><a class="black-text" href="#">ABOUT</a>
          <div class="subnav">
            <a class="subnav-element" href="#">WHO WE ARE</a>
            <a class="subnav-element" href="#">PROJECTS</a>
            <a class="subnav-element" href="#">PARTNERS</a>
            <a class="subnav-element" href="#">CONTACT</a>
          </div>
        </div>

htmlcss

Answer №1

the reason behind the issue is transform: translateY(-100%); in the .subnav class. To fix it, simply remove the transform property from the .subnav class. Please refer to the updated snippet below for clarification:

.subnav-wrapper {
  position: relative;
  padding: 10px 15px !important;
  cursor: pointer;
  z-index: 0;
}

.subnav-wrapper:hover .subnav {
  visibility: visible;
  transition-delay: 0s, 0s, 0.05s;
  transform: translateY(0%);
  z-index: 1;
}

.subnav-wrapper:hover .subnav a {
  opacity: 1;
}

.subnav {
  position: absolute;
  padding: inherit;
  background-color: black;
  color: white;
  z-index: -1;
  min-width: 110px;
  visibility: hidden;
  margin-top: 10px;
  transition: ease-in-out 0s, visibility 0.05s linear 0.3s, z-index 0.3s linear 0.01s, transform 0.14s;
}

.subnav a {
  opacity: 0;
  transition: opacity 0.3s;
}

a {
  text-decoration: none;
}

.black-text {
  color: black;
}

.subnav-element {
  color: white;
  display: inline-block;
  padding: 5px 5px;
  font-size: 0.9em;
}
<div class="nav-element subnav-wrapper"><a class="black-text" href="#">ABOUT</a>
  <div class="subnav">
    <a class="subnav-element" href="#">WHO WE ARE</a>
    <a class="subnav-element" href="#">PROJECTS</a>
    <a class="subnav-element" href="#">PARTNERS</a>
    <a class="subnav-element" href="#">CONTACT</a>
  </div>
</div>

Answer №2

If you find this method effective, consider moving the transition to the subnav wrapper instead of the subnav itself. Doing so will prevent it from overlaying the About button. Ideally, the subnav should remain hidden when positioned behind the About button.

.subnav-wrapper {
  position: relative;
  padding: 10px 15px !important;
  cursor: pointer;
  z-index: 1;
  transition: ease-in-out 0s, visibility 0.05s linear 0.3s, z-index 0.3s linear 0.01s, transform 0.14s;
}

.subnav-wrapper:hover .subnav {
  visibility: visible;
  transition-delay: 0, 0, 0.55s;
  z-index: -1;
}

.subnav-wrapper:hover .subnav a {
  opacity: 1;
}

.subnav {
  position: absolute;
  padding: inherit;
  background-color: black;
  color: white;
  z-index: -1;
  min-width: 110px;
  visibility: hidden;
  margin-top: 10px;
}

.subnav a {
  opacity: 0;
  transition: opacity 0.3s;
}

a {
  text-decoration: none;
}

.black-text {
  color: black;
}

.subnav-element {
  color: white;
  display: inline-block;
  padding: 5px 5px;
  font-size: 0.9em;
}
<br/><br/><br/><br/>
<div class="nav-element subnav-wrapper">
<a class="black-text" href="#">ABOUT</a>
          <div class="subnav">
            <a class="subnav-element" href="#">WHO WE ARE</a>
            <a class="subnav-element" href="#">PROJECTS</a>
            <a class="subnav-element" href="#">PARTNERS</a>
            <a class="subnav-element" href="#">CONTACT</a>
          </div>
        </div>

Answer №3

To enhance the appearance of your webpage, consider tweaking the css (transform: translateY property). Take a look at the code snippet below for guidance:

.subnav-wrapper {
  position: relative;
  padding: 10px 15px !important;
  cursor: pointer;
  z-index: 0;
}

.subnav-wrapper:hover .subnav {
  visibility: visible;
  transition-delay: 0s, 0s, 0.05s;
  transform: translateY(-5px);
  z-index: 1;
}

.subnav-wrapper:hover .subnav a {
  opacity: 1;
}

.subnav {
  position: absolute;
  padding: inherit;
  background-color: black;
  color: white;  
  min-width: 110px;
  visibility: hidden;
  margin-top: 10px;
  transform: translateY(-10px);
  transition: ease-in-out 0s, visibility 0.05s linear 0.3s, z-index 0.3s linear 0.01s, transform 0.14s;
}

.subnav a {
  opacity: 0;
  transition: opacity 0.3s;
  
 
}

a {
  text-decoration: none;
}

.black-text {
  color: black;
   position:relative;
   z-index:1;
}

.subnav-element {
  color: white;
  display: inline-block;
  padding: 5px 5px;
  font-size: 0.9em;
}
<div class="nav-element subnav-wrapper">
  <a class="black-text" href="#">ABOUT</a>
      <div class="subnav">
        <a class="subnav-element" href="#">WHO WE ARE</a>
        <a class="subnav-element" href="#">PROJECTS</a>
        <a class="subnav-element" href="#">PARTNERS</a>
        <a class="subnav-element" href="#">CONTACT</a>
      </div>
</div>

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

Ensure that the height of the content in JQuery Mobile is set to 100

I'm currently working on an app using JQuery Mobile. Check out this link for my HTML code. There's a full-screen <iframe> within my page. Even though I've specified width:100%; height:100%; border:0% for the iframe, it ends up being ...

htmlcssjquery-mobile

Ensure alignment of gradients between two divs, even if their widths vary

Among my collection of 10 inline divs, each one boasts a unique width and color gradient. While the 45-degree lines are uniform across all the divs, is there a way to ensure that these gradients match seamlessly? I've shared my CSS code snippet below ...

htmlcssgradientrepeating-linear-gradient

Dynamic web designs can be achieved by utilizing a combination of technologies such as Ajax

Encountering issues while attempting to use Ajax and Fancybox.js photo viewer simultaneously. The website is initially set up as web 1.0 with standard navigation using hyperlinks. For html5 browsers, a JavaScript is utilized to create a web 2.0 experienc ...

ajaxhtmlfancybox

Switching classes in real time with JavaScript

I'm struggling to understand how to toggle a class based on the anchor text that is clicked. <div> <a id="Menu1" href="#">Menu</a> <div id="subMenu1" class="subLevel"> <p>stuff</p> </div> <div> <a i ...

javascriptjqueryhtmlcss

I am experiencing issues with the functionality of front-page.php on my WordPress website

Seeking guidance in addressing a web development issue: I have encountered a problem with a website that I am currently working on locally using WordPress. I added the following code to the header.php file: <link rel="stylesheet" type="text/css" href= ...

javascriptphpjqueryhtmlwordpress

Can you explain the distinction between ng-init and ng-bind?

Here is a code snippet utilizing ng-init: <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="" ng-init="names=['Jani','Heg ...

htmlangularjs

Dynamic Divider for Side-by-Side Menu - with a unique spin

I recently came across a question about creating responsive separators for horizontal lists on Stack Overflow While attempting to implement this, I encountered some challenges. document.onkeydown = function(event) { var actionBox = document.getElementB ...

javascripthtmlcss

Is it possible to have a hidden div box within a WordPress post that is only visible to the author of the

How can I create a div box with "id=secret" inside a post that is only visible to the author of the post? I initially made it for the admin, but now I want the id to be visible exclusively to the post's author. For instance: If the author is curren ...

javascripthtmlcsswordpressprivacy

Getting user input with JQuery and dynamically updating CSS properties

<img src="purplemoon.png" alt="Purple moon" id="moon-photo" /> <table> <tr> <th colspan="4">Control panel</th> </tr> <tr> <td> <!-- attempting to retrieve value from the input field ...

javascriptjqueryhtmlcss

Transferring information from JSON to HTML

Recently, I came across this handy design tool within our service that helps generate Gauge charts by simply adding a specific div class to the desired pages. <div class="gauge" id="g0" data-settings=' { "value": ...

javascripthtmljson

The resizing function on the droppable element is malfunctioning on Mozilla browsers

I've been working on making one div both droppable and resizable. Surprisingly, everything is functioning perfectly in Chrome but not in Firefox. If you'd like to see the issue for yourself, here is my jsFiddle demo that you can open in Firefox: ...

javascriptjqueryhtmlcss

The JavaScript code is not executing properly within the HTML document

I am trying to execute a function from my JavaScript file in my HTML page. Here is the code snippet: index.html <!DOCTYPE html> <html><body> <h2>Web1</h2> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jq ...

javascriptjqueryhtml

Selecting options in combobox for each row in a table using Angular 2 programmatically

I am currently working on an Angular 2 application using TypeScript. In one of the tables within the application, there is a select control in one of the columns. The contents of this select control are bound to another string array. <table ngContr ...

htmlangulartypescriptcombobox

Why should <template> be used in Vuetify?

Exploring the possibilities of Vuetify 2.0 in my current project has led me to dive into the v-stepper component, designed for displaying progress through numbered steps. In the example provided in the playground, I noticed the use of the <template> ...

javascripthtmlvue.jsvuetify.js

Increase the padding on the left side of a background image

UPDATE: Solution discovered at this link thanks to Mr. Alien I am attempting to create a heading that resembles the following Title ------------------------------------------------- I have an image that I intend to use as a backdrop for it. However, I& ...

htmlcssless

Achieve a new line break when the user hits the "Enter" key using HTML and JavaScript

I'm in the process of developing a Chrome Extension that allows users to create a to-do list. My goal is to enable users to submit their task by pressing the "Enter" key, which should move the task to the next line after submission. I am currently fac ...

javascripthtmlcssgoogle-chrome-extension

Having issues with the functionality of the jQuery HTML function

I'm working on this jQuery code snippet: $('#wrapper').html('<img src="/loading.gif">'); var formdata = $("#validateuserform").serialize(); $.post("/userformdata.php",formdata,function(html){ if(html) ...

javascriptjqueryhtml

Button on aspx page not functioning properly when clicked

I seem to be experiencing an issue with buttons. To check if the function is being triggered, I used alert("") and found that it does enter the function when the button is clicked. However, after the alert, any other code inside the function seems to not w ...

javascripthtmlasp.net

Problem with the mobile site width due to viewport misalignment

Our website is currently experiencing an issue with the viewport, but it seems to only occur on mobile devices: If you visit the site on your mobile device, you may notice a large gap on the right side of the page. Strangely, this problem does not appear ...

htmlcssmobileviewport

Divide the canvas into 100 separate sections using Javascript

Help! I'm trying to divide a canvas into 100 squares that are 50x50px each, but my current code is becoming too lengthy with multiple for loops. Is there a more efficient way to achieve this with just one for loop? Below is the existing code snippet: ...

javascripthtmlcanvas