Pushing down menu items in a dropdown CSS navigation bar

I have a vertical navigation menu with parent and non-parent items. I want the parent items to display their child pages when hovered over, while also pushing down the items above them. HTML:

<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
        <li>Something</li>
    </ul>
</nav>

CSS:

nav.main ul ul {
    display: none
}

nav.main ul li:hover ul {
    display: block;
}

However, when the mouse leaves the parent item, the children disappear and the menu shifts suddenly, which can be disruptive. To address this issue, I tried implementing a smooth transition effect. However, using 'display' property for visibility no longer works with transitions, and switching to 'visibility' alone does not push down the children but instead makes them appear as an overlay on the menu. In the provided example https://jsfiddle.net/LgvhLxya/1/, my goal is to have the "Something" item pushed down when the children of "Lorem" are revealed.

Answer №1

It is unnecessary to apply position:absolute on ul because it creates an additional layer of the menu. Instead of using a CSS hover selector for styling, you can utilize a jQuery click event listener. This will ensure that the styling remains until the user clicks away from the element.

Here is a link to the example on jsFiddle.

If your goal is simply to transition the ul tag, consider using visibility instead of display, as transitions do not work effectively with display.

nav.main > ul > li > ul {
  display: block;
  height:0px;
  visibility:hidden;
  opacity:0;
  transition:0.2s ease;
}

nav.main > ul  > li:hover > ul {
  height:80px;
  visibility:visible;
  opacity:1;
}
<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
        <li><a href="">Something</a></li>
        <li><a href="">Something</a></li>
        <li><a href="">Something</a></li>
    </ul>
</nav>

Answer №2

CSS

nav.main ul ul {
    height: 0;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    //padding: 10px;
    background-color: rgba(92, 91, 87, 0.9);
    -webkit-transition: opacity 600ms, height 600ms;
            transition: opacity 600ms, height 600ms;
}

nav.main ul li:hover ul {
    height: auto;
    visibility: visible;
    opacity: 1;
}

nav.main ul li:hover ul {
   padding-left: 10px;
}

nav.main ul li:hover ul a {
   color: #fff;
}
<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
        <li>Something</li>
    </ul>
</nav>

Link to showcase on JSFiddle available here

Answer №3

1) utilizing display instead of visibility

2) opting for position: relative over position: absolute;

Entire Code:

nav.main ul ul {

    position: relative;
    list-style: none;
    opacity: 0;
    display: none;
    padding: 10px;
    background-color: rgba(92, 91, 87, 0.9);
    -webkit-transition: opacity 600ms, visibility 600ms;
    transition: opacity 600ms, visibility 600ms;
}

nav.main ul li:hover ul {
    display: block;
    opacity: 1;
}
<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
        <li>Something</li>
    </ul>
</nav>

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

Issue with GridLayout causing rows to be misaligned

As a newcomer to the world of CSS, I found myself in need of a grid layout for a quick project. Here's the mishmash of CSS code I came up with: body { margin: 40px; } .container { display: grid; grid-template-rows: [row1start] 20% [row2sta ...

Creating a dynamic animation for a navigation bar's underline

I'm attempting to add a smooth underline effect to the links in my navbar when they are hovered over. Unfortunately, the entire ul element is being underlined instead of just the selected link. Is there a way to resolve this issue? a { text-deco ...

I am interested in showcasing a card when it is hovered over

I am having trouble with a hover effect to display a hidden card. I have two div elements, one is labeled single-album and the other hide. I used the + selector to set the hide div to display none initially, but the hover effect is not working as expecte ...

Angular: verifying the presence of any of the ng-content slots supplied

I have a component template that contains several ng-content elements: <div class="form__general"> <ng-content select="[general]"></ng-content> </div> <div class="form__footer"> <ng-conte ...

Is there a way to extract the unicode/hex representation of a symbol from HTML using JavaScript or jQuery?

Imagine you have an element like this... <math xmlns="http://www.w3.org/1998/Math/MathML"> <mo class="symbol">α</mo> </math> Is there a method to retrieve the Unicode/hex value of alpha α, which is &#x03B1, using JavaScrip ...

Scraping: Previously scraped links can no longer be retrieved for dumping HTML files into a designated folder

My current project involves using Python, Selenium, Sublime, and Firefox to scrape links from a specific website. I want to save the scraped pages as HTML files into a designated folder. Unfortunately, I've encountered challenges in getting the body o ...

Adjusting Dropdown Direction Based on Section Location – A Step-by-Step Guide

Question: Is there a way to adjust the bootstrap dropdown so that it can appear either above or below depending on where the section is positioned? Check out my code here Here is the CSS I am using: #cover-inspiration{ width: 100%; height: 100vh ...

How can we link identical pages to distinct sets of data in the backend and ensure they operate effectively with their respective data?

I'm working on a project where I have a dynamic table on the front-end that gets its data from a MySQL database connected using PHP. Each row in the table has action buttons, with only a delete option for now. The styling is pretty basic as shown belo ...

What is the best way to visually refresh a polymer element that displays data from a frequently changing URL?

Hey there! I'm currently facing an issue with displaying a polymer element that contains some important information. This element is supposed to appear when I tap on an icon, but for some reason it doesn't show up even after the data has been loa ...

Exploring Hover Effects in Reactjs and Material UI

I've been working with reactjs and material ui, but I'm having trouble changing the background color of selected items in various components, like in the SelectField. <SelectField floatingLabelText="Choose a sport" value={this.state.val ...

Ways to modify the .MuiSelect-nativeInput element within Material-UI

const styles = makeStyles((theme) => ({ root: { margin: "0px 20px" }, textStyle: { fontFamily: "Comfortaa", }, container: {}, textField: { fontFamily: "Comfortaa", }, dropDownFormSize: { width: &qu ...

How can divs be styled to mimic the behavior of tables in IE6 using just CSS and HTML?

Can div elements be styled to resemble tables in IE 6 using just CSS and HTML? Unfortunately, the display properties like table, table-row, or table-cell do not work in IE 6 If it is feasible, what strategies can be employed? ...

Can a webpage be redirected to another page while passing along the id from the original page?

https://i.sstatic.net/3LhYJ.png I have a page that displays shop names and addresses along with an edit function in views.py: def update_shop(request, id): context = {} # * fetch the object related to passed id obj_shop = get_object_or_404(VideoL ...

Activate divs with Bootstrap5 modal toggle functionality

What adjustments must be made to the Bootstrap 5 example below in order to achieve the following two objectives: The "afterAcceptingTerms" division should remain hidden until the user clicks on the Accept Terms modal button, ensuring that only the "before ...

The left and right edges are not extending across the entire screen

Can anyone help me determine if this is a duplicate issue? I'm unsure why my left and right borders are not extending the full width of the screen. The website in question is ojs.monojitbanerjee.co.cc Here is the structure: <body> <div id= ...

Press the button using the spacebar

I am facing an issue where I have a button with an anchor element that I need to trigger with the spacebar key for accessibility purposes. However, instead of triggering the button, pressing the spacebar causes the page to jump down when the button is in f ...

Issues with jQueryUI sortable causing flickering and erratic movement while attempting to reorder and position items within the list

When using jQueryUI sortable with a long list of items, I encounter an issue where the items flicker and jump around the screen as I try to change their order by dragging them. This makes it nearly impossible to organize the items effectively. It seems li ...

Using CSS to design a table-like structure with rows that span multiple columns

I am trying to generate a table dynamically using CSS and a JSON array. For example: In the code snippet provided, I have assigned a class of 'spannedrow' to span certain cells in the table, although the class is not defined yet. This is just ...

Clicking on an iframe activates the loading of the displayed page

I'm attempting to create a functionality where clicking on an iframe will load the page it is displaying. I experimented with placing it within an tag, but that didn't produce the desired result. The effect I'm aiming for is similar to zoom ...

When the left/top/right/bottom properties are not specified, using position:fixed produces the desired results in Firefox and Internet Explorer, but not in Safari

It's unfortunate that I have to bring up another question related to position:fixed, but after going through various other questions and forum threads, I'm still not clear on this particular issue. The code below is a simple illustration of how ...