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

Inject HTML entities, escaped for CSS, dynamically using JavaScript

My goal is to dynamically generate a list of HTMLElements with unique data-* attributes that correspond to various HTML Entities. These attributes will then be utilized by CSS to display content in pseudo elements like this: li:after { content: attr(dat ...

javascripthtmlcssfontsescaping

Steps to position an image without a background in the middle of a smaller container:

My HTML includes the following code: <div style="width:400px;height:300px;overflow:hidden;"> <img src="http://d39kbiy71leyho.cloudfront.net/wp-content/uploads/2016/05/09170020/cats-politics-TN.jpg" /> </div> Take a ...

css

Is there a way to run both PHP and HTML code using the eval function?

Is it possible to execute HTML and PHP simultaneously using the eval function? eval ("<center> this is some html </center>"); The above code does not yield the desired output, so I am considering changing it to: echo ("<center> this is ...

phphtml

Flashing Effect of Angular Ui-Bootstrap Collapse During Page Initialization

Below is the code snippet I've implemented to use the ui-bootstrap collapse directive in my Angular application. HTML: <div ng-controller="frequencyCtrl" style="margin-top:10px"> <button class="btn btn-default" ng-click="isCollapsed = ...

javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap

Troubleshooting challenges arise with Bootstrap's button group spacing issue

I am encountering spacing issues with the markup provided below. <h2>Profitability Report</h2> <form method="post"> <div class="row"> <div class="col-md-12"> <div class="btn-group btn-group-toggle ...

htmlcsstwitter-bootstrapbootstrap-4

What are the reasons for the various methods available for importing my JS code?

Here is the structure of my folders: --public ----frontend.js --views ----fontend.ejs The frontend.js file is located inside the public folder, while the frontend.ejs file is in the views folder. In my HTML / EJS file, I included the JavaScript (fronten ...

javascripthtmlnode.jsejs

Style your index with a Wordpress plugin

I've been attempting to modify a plugin's stylesheet, but I'm having trouble locating the CSS file that contains the necessary styles. Despite Chrome's developer tool indicating that it is styled directly on the index site, I have searc ...

phpcsswordpresspluginsstyles

Guide to positioning an icon at the center of a material card

I am new to CSS and Angular Material, and I need help centering the icon on the card following the design from Figma. I tried copying the CSS from Figma, but it didn't center the icon as expected. Can someone please share techniques to achieve this? S ...

cssangularangular-material

Merging double borders in a div using CSS is essential for creating

Upon examining this sample, it's evident that the borders do not blend together. css: div{ float:left; background-color:moccasin; width:100px; height:100px; border:1px solid tomato; } The number of divs is arbitrary, and only on ...

javascriptjqueryhtmlcss

A guide to toggling the check/uncheck status of a list box by clicking on a checkbox using

I am using a div and CSS id to control the checkbox check and uncheck functionality, but I am not getting the desired outcome from my source code Step 1: By default, the checkbox is unchecked and the listbox is disabled Step 2: When the checkbox is check ...

javascripthtmljquerycssajax

Discovering the way to retrieve background height following a window resize using jQuery

Is there a way to obtain the background height once the window has been resized? div { background-image: url(/images/somebackground.jpg); background-size: 100% 90%; background-repeat: no-repeat; width: 70%; background-size: contain; ...

javascriptjquerycssbackground

Generate an image, PDF, or screenshot of a webpage with the click of a button

I've been searching for a solution that would enable users to click a button and save an image or PDF of the current page. The content on the page is dynamic and dependent on user input, resulting in sequences displayed in various colors. I'm loo ...

phpjavascriptjqueryhtmlajax

Issue with Electron Remote process failing to take user-defined width and height inputs

I'm currently facing an issue with utilizing remote windows in electron. I am attempting to process user input and use that input to generate a new window with specific width and height. However, when I hit submit, nothing happens. I can't figur ...

javascripthtmlnode.jselectron

Ensure that the div spans the entire width of the page, prioritize maintaining the aspect ratio, but allow for variable

I have a dilemma with a div containing multiple elements. My goal is to make the div 100% in width, while also attempting to preserve the aspect ratio if feasible. Should the enclosed elements exceed the div's boundaries, then the height will adjust a ...

css

When a new element is dynamically added to a table cell, how is the computation of "width: 100%" handled?

When utilizing Backgrid for editing values in a table, an <input type="text"> is inserted inside the <td>. Despite setting the input to max-width: 100%, it can still cause the column to expand beyond desired dimensions. To see this behavior in ...

cssbackgrid

Attaching a Stylesheet (CSS) without being inside the HEAD Tag

After seeing numerous inquiries about this topic, I have yet to find the answer I seek. My main question is whether it is feasible to connect an external stylesheet in a location other than the HEAD tag. I am facing this issue because I need to use Conflu ...

htmlcssstyleshead

Test your knowledge of Javascript with this innerHtml quiz and see

How can I display the output of a score from a three button radio button quiz without using an alert popup? I want the output to be displayed within a modal for a cleaner look. I tried using InnerHTML but now there is no output when the button is clicked. ...

javascriptjqueryhtml

The JSON ticker for BTC/LTC has stopped functioning

I've been relying on this JSON ticker for the past month and it's been smooth sailing. However, today it suddenly stopped working. Any ideas on what might have caused this issue? $(function () { startRefresh(); }); function startRefresh() { ...

javascriptjqueryhtmljsonbitcoin

Looking for a simple method to display a popover using conditional if/else statements?

On my website, I am utilizing JavaScript to determine the user's Facebook status. This includes checking if the user is already logged in and has allowed our app, if they are logged in but haven't authorized our application, or if they are not lo ...

javascripthtmlfacebookpopup

Tips on aligning images of various sizes with text within a row using CSS

Looking for help aligning four different height (ranging from 160-180px) svg images with text positioned directly below each image. I want the images to be neatly aligned in a row, but I'm struggling to align the short text underneath them in a single ...

csssvg