Jumping CSS dropdown menu glitch

I'm facing an issue with a dropdown menu. The main problem is that the "parent" link is moving when hovered over.

HTML:

<ul id="nav">
    <li><span>Page 1</span>
        <ul>
            <li><a>Extralong Page 1.1</a></li>
            <li><a>Page 1.2</a></li>
            <li><a>Page 1.3</a></li>
        </ul>
    </li>
    <li><a href="#">Page 2</a></li>
    <li><span>Page 3</span>
        <ul>
            <li><a>Page 3.1</a></li>
            <li><a>Long description for page 3.2</a></li>
            <li><a>Page 3.3</a></li>
            <li><a>Page 3.4</a></li>
        </ul>
    </li>
</ul>

CSS:

* {
    margin: 0;
    padding: 0;
}

#nav {
        float: right;
    }

        #nav ul {
            float: left;
        }

        #nav li {
            float: left;
            padding-top: 2px;
            list-style: none;
            background: #3451ff;
        }

            #nav li a,
            #nav li span {
                display: block;
                text-decoration: none;
                font-size: 12pt;
                font-weight: bold;
                padding: 13px 10px 9px 10px;
            }

                #nav li a:link, #nav li a:active, #nav li a:visited,
                #nav li span {
                    color: #FFF;
                }

                #nav li a:hover, #nav li a.active,
                #nav li span:hover {
                    color: #000;
                }

            #nav li li {
                display: none;
            }

            #nav li:hover li {
                display: block;
                float: none;
                background: #555;
            }

        #nav li li a {
            font-size: 10pt;
            margin: 1px;
            width: 100%;
            background: #3c6f3a;
            padding: 5px 0;
        }

Demo

Is there a way to keep the parent link static so its width doesn't change on hover without using JavaScript?

htmlcssdrop-down-menu

Answer №1

Make sure to assign a specific width to the parent element:

#nav li {
    float: left;
    padding-top: 2px;
    list-style: none;
    width: 100px; /* Make sure to include this line */
    background: #3451ff;
}

Check out the DEMO HERE for more detail

Answer №2

To achieve this layout, apply the CSS property position:absolute to the element and ensure its parent li has a CSS property of position:relative. Check out this demo for a visual representation.

#nav ul {
    position:absolute;
    right:0;
}

Answer №3

To ensure proper functionality, apply the position:relative property to the ul parent and use position:absolute for the child element.

For a demonstration, refer to this updated fiddle: http://jsfiddle.net/nikhilvkd/gmU55/5/

#nav li li {
                display: none;
                 position:relative;
            }

            #nav li:hover li {
                display: block;
                float: none;
                position:absolute;
                background: #555;
            }

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

Attach a Material-UI Popper component to a customized edge label in a React Flow

After finding inspiration from this particular example in the react-flow documentation, I decided to create my own customized version. It showcases a Material Ui Popper that appears when the edge is selected. However, my problem arises when attempting to z ...

javascriptcssreactjsmaterial-uireact-flow

Why isn't the image utilizing all the available space?

I'm working on creating a simple card to display services, with just an image and some text. However, I'm facing an issue where the image is not taking up the full width and height of the container as expected. Could someone help me figure out w ...

cssreactjsnext.jssass

Concealing and revealing elements through css styling

In my journey to learn HTML, CSS, and PHP, I took some online courses to gain knowledge. Now, I am venturing into creating a site using Wordpress to further enhance my skills through practical experience. Recently, I created a page with a custom video fie ...

csswordpress

Is there a way to completely remove all styling from a specific child element?

Struggling with a drop-down menu issue - the parent element has a border, but I don't want that style to be inherited by the child sub-menu. Despite my attempts to remove the border using border: 0px, it's not working as expected. Is there any wa ...

htmlcssinheritanceparent-child

I require adding a new line of information into the database table

I am looking for help with adding data into a table without any user inputs. Specifically, I want to add data by passing them into an array and then be able to call them at the "Add Site" button so that the row is added into the table. Can someone assist m ...

htmlangulartypescriptangular6

Troubleshooting Alignment Problem of Maximize and Close Icons in RadWindow Using ASP.Net

Currently, I am utilizing telerik radwindow to showcase a PDF document. The window seems to be functioning correctly, but there is an issue with the alignment of the maximize and close icons. Ideally, they should appear in the same row, however, they are b ...

c#cssasp.nettelerikradwindow

A guide on creating a downward animation of an object using CSS3

I am currently working on practicing CSS 3 animation. I am facing a challenge in figuring out how to make the item fall down the page at full speed without needing the user to track it downward with the mouse, all without using javascript. Ideally, I want ...

css

Create a div on the right side that expands to occupy all remaining space

Is there a way to have two divs positioned next to each other, with the left one being a fixed width of 300px and the right one taking up the rest of the available space on the screen? I appreciate any guidance you can provide. Thanks! ...

htmlcss

Pagination displays identical data on each page

When utilizing pagination in my AngularJS application to display search results fetched from an API call, I encountered an issue where the same data set appears on all pages. Here's what I have attempted: Within the Controller $rootScope.currentPag ...

htmlangularjspaginationcontroller

Struggling to position search form to the right side of an <li> element

I'm having trouble aligning my search bar to the right side of the navigation menu items. HTML: <body> <div id="navbox"> <nav id="nav"> <ul id="nav"> <li><a href="#">Home< ...

htmlcssalignmentsearchbar

How do I retrieve the download URL for the file created using Python in my Heroku App?

After developing my Flask App, I uploaded several files to the Heroku filesystem. I'm aware that these files are removed every time the dyno restarts. Now, in my HTML/JavaScript frontend, I'd like to provide users with a download button for thes ...

javascripthtmlfileherokudownload

Identify when a click occurs outside of a text input

Whenever text is typed into the textarea, the window changes color. The goal is to have the color revert back when clicking outside the textarea. <textarea class="chat-input" id="textarea" rows="2" cols="50" ...

javascripthtmlangular

Flex-boxes are set inside a fixed-positioned div in this chat web application

I am currently working on a chat web application that has a unique bottom bar layout. The bottom bar consists of a button on the left, a text entry field in the center, and another button on the right: <div id="bottom-bar"> <div class=" ...

htmlcssflexbox

Incorporating a touch of dark opacity into an image

Check out the layout of my webpage here: https://i.sstatic.net/Ap4nx.jpg The background image I used is this one: https://i.sstatic.net/dIhLt.png I am trying to achieve a black transparent overlay on the image, similar to this: https://i.sstatic.net/FMdi ...

htmlcssfrontend

The redirection from HTTP or www to HTTPS is not functioning as expected

Redirecting all links to my website to the https:// domain is supposed to work flawlessly, but there are certain ways it doesn't quite function as expected. https://www.example.com --- works example.com --- works www.example.com --- encounters issu ...

javascriptjqueryhtml.htaccess

Processing made easy with jQuery

In my HTML page, I have multiple rows that represent records from a database. Each row contains input fields and a link at the end. When I click on the link, I need to capture the values of the input fields within the same row. Here is an example of the H ...

javascriptjqueryhtml

Angular 9: The instantiation of cyclic dependencies is not allowed

After transitioning from Angular 8 to Angular 9, I encountered an issue with a previously functioning HTTP communication service. The error message now reads: Error: Cannot instantiate cyclic dependency! HttpService at throwCyclicDependencyError (core ...

htmlangulartypescriptangular9

The loading of the Bootstrap tagsinput has encountered an error

I am facing an issue with my Django application where tags are not loading properly in an input field using jquery. It seems like the application is unable to locate the bootstrap-tagsinput.css and bootstrap-tagsinput.js files. Can anyone provide guidance ...

javascriptjquerycssdjangotwitter-bootstrap

Adjusting the decimal points of numbers within a table to create the illusion of a "centered" alignment within the cell

Looking for a table design featuring a column of decimal numbers, each with varying lengths before and after the decimal point, while keeping the decimal points aligned. The width of the column should be flexible, expanding to accommodate long numbers in ...

htmlcsshtml-tablealignmentdecimal

Adjusting the size and dimensions of a wmv video embedded on a webpage

I am trying to embed a wmv file on my webpage. The issue I'm facing is that I can't adjust the video frame size to fit the object and div dimensions. Here's the code I'm using: <div style="width: 300px; height: 220px;"> ...

htmlembeddingwmv