CSS triangle dropdown menu that stretches to 100% width and is positioned relative to its parent

Question

CSS triangle dropdown menu that stretches to 100% width and is positioned relative to its parent

Currently, I am working on a menu that has drop-down items that appear when the user hovers over them.

Here is what I am aiming for:

I want the dropdown to be contained within the parent element so I can use the :hover pseudo-class to show it.
The dropdown should span 100% of the window width, not just its parent's width.
I do not want the contents of the dropdown to be positioned relative to the parent menu item.
The CSS triangle should point towards the middle of the parent menu item.
I also want to add a CSS transition to smoothly fade in the menu and move it into position.

For reference, here is a quick layout similar to what I am working on: http://jsfiddle.net/kn3Z3/2/

In attempting to keep the dropdown inside the parent element, I set the parent element's position: static. However, this presents an issue as I now lack a reference point to position the CSS triangle.

I cannot hard code the position of the dropdown for each menu item due to the dynamic nature of the menu and changes in font size with media queries (as seen in the fiddle).

I have explored other solutions where the triangle was integrated into the parent menu item itself. This approach hindered the animation synchronization with the menu and led to poorer performance.

If anyone has any ideas on how to achieve this or if you believe this animation method is not feasible, please share your thoughts.

As a side note, I also tested the 100% width solution mentioned here: Dropdown Menu - Make the <ul> submenu 100% width; however, I require the contents of the dropdown to not align relatively to the parent menu item.

html css

Answer 1

Answer №1

html,
body {
  font-family: "Fira Sans", sans-serif;
}

.nav {
  display: flex;
  position: relative;
}
.nav div {
  padding: 6.25px 12.5px;
  background-color: #ddd;
}

.item {
  position: relative;
}
.item:hover:before {
  content: "";
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  border-bottom: 16px solid #ccc;
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
}
.item:hover .subnav {
  opacity: 1;
  transform: scale(1);
}

.subnav {
  position: fixed;
  top: 60px;
  left: 10px;
  right: 10px;
  background-color: #ccc;
  opacity: 1;
  transform-origin: top left;
  transform: scale(0);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

<div class="nav">
  <div class="item">
    <div>Item 1</div>
    <div class="subnav">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
      </ul>
    </div>
  </div>
  <div class="item">
    <div>Item 2</div>
    <div class="subnav">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </div>
  <div class="item">
    <div>Item 3</div>
    <div class="subnav">
      <ul>
        <li>Item 1</li>
      </ul>
    </div>
  </div>
</div>

Answer 2

html,
body {
  font-family: "Fira Sans", sans-serif;
}

.nav {
  display: flex;
  position: relative;
}
.nav div {
  padding: 6.25px 12.5px;
  background-color: #ddd;
}

.item {
  position: relative;
}
.item:hover:before {
  content: "";
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  border-bottom: 16px solid #ccc;
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
}
.item:hover .subnav {
  opacity: 1;
  transform: scale(1);
}

.subnav {
  position: fixed;
  top: 60px;
  left: 10px;
  right: 10px;
  background-color: #ccc;
  opacity: 1;
  transform-origin: top left;
  transform: scale(0);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

<div class="nav">
  <div class="item">
    <div>Item 1</div>
    <div class="subnav">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
      </ul>
    </div>
  </div>
  <div class="item">
    <div>Item 2</div>
    <div class="subnav">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </div>
  <div class="item">
    <div>Item 3</div>
    <div class="subnav">
      <ul>
        <li>Item 1</li>
      </ul>
    </div>
  </div>
</div>

CSS triangle dropdown menu that stretches to 100% width and is positioned relative to its parent

Answer №1

Similar questions

The hideCol method does not work on jqGrid

Managing the reset functionality in Orbeon XForms when the escape character is triggered twice

What is the best method for adding a line break in the body of an email when we include the recipient, subject, and message?

Is it possible to execute a server-side click on a div element?

Encountering an error in a Javascript function: Property 'style' is unreadable because it is undefined

involving a variable in css styles using javascript

Increase the spacing at the top of an image placed within an HTML table

jQuery Slider not appearing on the page

When uploading a file using the file input in a table row, the text input will only appear in the first row and not in

The CSS focus-within and hover properties are not functioning as expected

Simply upload a file and send it to a specific URL by using the drag and drop functionality in HTML

Typescript input event

Utilize LESS Bootstrap as a guide for incorporating content

Encountering Problem Importing HTML Table Data into R

Is it possible to target the sibling of the currently selected or focused element with CSS?

When importing both shared-lib and MUI in my ReactJS application, I noticed that my custom MUI styles were being overwritten by the MUI styles

Adjust mouse coordinates to be relative to the coordinates of the <canvas> element

Tips on customizing the selected icon color in Material-UI's BottomNavigationAction styling

Can display-inline-block support top margin and text alignment?

Leverage jQuery for dynamically changing CSS transform properties