Dropdown Selection Causes List Item Misalignment

Trying to figure out this issue is really testing my patience...I set up a dropdown menu that remains hidden until the user hovers over a list item. However, when hovered over, the list item shifts downward instead of staying in place. This causes the menu to shift further down than intended.

Link to my code: http://codepen.io/anon/pen/PPYKJg

<div id="header">
    <nav id="menunav">
        <ul id="top-menu">
            <li id="topmenu-news" class="toplink"><a href="news.html" target="_blank">news</a></li>
            <li id="topmenu-shows" class="toplink"><a href="shows.html" target="_blank">info</a></li>
            <li id="topmenu-help" class="toplink"><a href="sorry.html" target="_blank">help</a></li>
            <li id="topmenu-rules" class="toplink"><a href="rules.html" target="_blank">rules</a></li>
            <li id="topmenu-about" class="toplink"><a href="about.html" target="_blank">about</a></li>
            <li id="topmenu-other" class="toplink"><a href="#" target="_blank">&#187;</a>
                <ul class="more-menu">
                    <li id="moremenu-blog" class="morelink"><a href="blog.html" target="_blank">blog</a></li>
                    <li id="moremenu-stats" class="morelink"><a href="blog.html" target="_blank">stats</a></li>
                    <li id="moremenu-terms" class="morelink"><a href="tos.html" target="_blank">terms</a></li>
                    <li id="moremenu-privacy" class="morelink"><a href="privacy.html" target="_blank">privacy policy</a></li>
                    <li id="moremenu-volunteer" class="morelink"><a href="volunteer.html" target="_blank">volunteer!</a></li>
                </ul>
            </li>
        </ul>   
    </nav>
</div>

html {
  overflow-y: scroll;
}

body {
    margin: 45px 0px; 
    text-align: center;
    background: #191919;
}

.header {
    color: #FE353D;
}

#top-menu {
    background-color:rgba(0,0,0,0.85);
    height: 34px;
    width: 49.1%;
    float: right;
    position: relative; 
    margin-top: 15px;   
    top: 21px;
    left: 88px;
    font: bold 20px sans-serif;
    border-top-left-radius: 10px;
    z-index: 10;
}

#top-menu:hover {

}

.more-menu {
    background-color: #111111;
    display: none;
    position: relative;
    top: 16px;
    right: 25px;
    height: 27px;
    width: 475px;
    font: bold 14px sans-serif;
  outline: 1px solid #000000;
    z-index: 11;
}

.toplink {
    margin-right: 35px;
}

ul {
    text-align: left;
    display: inline;
    list-style: none;
}

ul li {
    display: inline-block;
    position: relative;
    margin-right: 30px;
    padding-top: 5px;
}

ul li a {
    color: #FFFFFF;
    text-decoration: none;
}

li.option {
    margin-left: -30px;
    margin-top: -25px;
}

$('#top-menu').hover(
  function (){
     $('.more-menu').css('display','inline');
  },
  function (){
     $('.more-menu').css('display','none');
  }
);

Anyone have any insights into what might be causing this behavior? I'm at my wit's end trying to solve it!

htmlcsslist

Answer №1

Upon inspection, I noticed an issue with the .more-menu not displaying correctly below the top menu. To rectify this, adjust the top property of the .more-menu class accordingly to ensure the dropdown menu appears directly beneath the navigation menu.

.more-menu {
    background-color: #111111;
    display: none;
    position: relative;
    top: 0px; /*previously set at 16px but now changed to 0px*/
    right: 25px;
    height: 27px;
    width: 475px;
    font: bold 14px sans-serif;
    outline: 1px solid #000000;
    z-index: 11;
}

Answer №2

I have customized my own version based on your HTML code.

JsFiddle: https://jsfiddle.net/469knbfq/

HTML:

<div id="header">
    <nav id="menunav">
        <ul id="top-menu">
            <li id="topmenu-news" class="toplink"><a href="news.html" target="_blank">news</a></li>
            <li id="topmenu-shows" class="toplink"><a href="shows.html" target="_blank">info</a></li>
            <li id="topmenu-help" class="toplink"><a href="sorry.html" target="_blank">help</a></li>
            <li id="topmenu-rules" class="toplink"><a href="rules.html" target="_blank">rules</a></li>
            <li id="topmenu-about" class="toplink"><a href="about.html" target="_blank">about</a></li>
            <li id="topmenu-other" class="toplink"><a href="#" target="_blank">&#187;</a>
                <ul class="more-menu">
                    <li id="moremenu-blog" class="morelink"><a href="blog.html" target="_blank">blog</a></li>
                    <li id="moremenu-stats" class="morelink"><a href="blog.html" target="_blank">stats</a></li>
                    <li id="moremenu-terms" class="morelink"><a href="tos.html" target="_blank">terms</a></li>
                    <li id="moremenu-privacy" class="morelink"><a href="privacy.html" target="_blank">privacy policy</a></li>
                    <li id="moremenu-volunteer" class="morelink"><a href="volunteer.html" target="_blank">volunteer!</a></li>
                </ul>
            </li>
        </ul>   
    </nav>
</div>

CSS:

#header{ background: #000; padding: 15px 0px; }
#menunav{  }
#top-menu{  }
ul{ display: inline; margin: 0px; padding: 0px 0px 0px 20px; }
li{ display: inline; margin: 0px 10px; }
a{ color: #FFF; font-size: 18px; text-decoration: none; }
.more-menu{ background : grey; margin: 0px 0px 0px 20px; padding: 0px; display: none; }

JS:

$('#top-menu').mouseenter(function(){
 $('.more-menu').css('display','inline-block');
});
$('#top-menu').mouseleave(function(){
 $('.more-menu').css('display','none');
});

Please note that I am using JQuery for this.

Answer №3

Appreciate the input! I managed to resolve the issue myself by adjusting both the CSS and jQuery slightly. Check out the revised code below:

http://codepen.io/anon/pen/ZbzvGQ

HTML:

<div id="header">
    <nav id="menunav">
        <ul id="top-menu">
            <li id="topmenu-news" class="toplink"><a href="news.html" target="_blank">news</a></li>
            <li id="topmenu-shows" class="toplink"><a href="shows.html" target="_blank">info</a></li>
            <li id="topmenu-help" class="toplink"><a href="sorry.html" target="_blank">help</a></li>
            <li id="topmenu-rules" class="toplink"><a href="rules.html" target="_blank">rules</a></li>
            <li id="topmenu-about" class="toplink"><a href="about.html" target="_blank">about</a></li>
            <li id="topmenu-other" class="toplink"><a href="#" target="_blank">&#187;</a>
                <ul class="more-menu">
                    <li id="moremenu-blog" class="morelink"><a href="blog.html" target="_blank">blog</a></li>
                    <li id="moremenu-stats" class="morelink"><a href="blog.html" target="_blank">stats</a></li>
                    <li id="moremenu-terms" class="morelink"><a href="tos.html" target="_blank">terms</a></li>
                    <li id="moremenu-privacy" class="morelink"><a href="privacy.html" target="_blank">privacy policy</a></li>
                    <li id="moremenu-volunteer" class="morelink"><a href="volunteer.html" target="_blank">volunteer!</a></li>
                </ul>
            </li>
        </ul>   
    </nav>
</div>

CSS:

html {
  overflow-y: scroll;
}

body {
    margin: 45px 0px; 
    text-align: center;
    background: #191919;
}

.header {
    color: #FE353D;
}

#top-menu {
    background-color:rgba(0,0,0,0.85);
    height: 34px;
    width: 49.1%;
    float: right;
    position: relative; 
    margin-top: 15px;   
    top: 21px;
    left: 88px;
    font: bold 20px sans-serif;
    border-top-left-radius: 10px;
    z-index: 10;
}

.more-menu {
    background-color: #111111;
    display: none;
    position: absolute;
  float: clear;
    top: 35px;
    right: -32px;
    height: 27px;
    width: 475px;
    font: bold 14px sans-serif;
  outline: 1px solid #000000;
    z-index: 11;
}

.toplink {
    margin-right: 35px;
}

ul {
    text-align: left;
    display: inline;
    list-style: none;
}

ul li {
    display: inline-block;
    position: relative;
    margin-right: 30px;
    padding-top: 5px;
}

ul li a {
    color: #FFFFFF;
    text-decoration: none;
}

li.option {
    margin-left: -30px;
    margin-top: -25px;
}

JQUERY:

$('#topmenu-other, .more-menu').hover(
            function (){
                $('.more-menu').css('display','inline-block');
            },
            function (){
                $('.more-menu').delay(7500).queue(function(next){
                    $(this).css('display','none');
                    next();
                });
            }
        );

This configuration ensures that the >> symbol remains in place when hovered over and maintains visibility of more-menu for a designated duration for user convenience.

Thank you once again for your assistance!

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

Add an event listener to a dynamically created div block through jQuery when it is clicked

When the page loads, a dynamic div appears that is visible to the user and in Firebug, but is not available in the page source. The content within this div changes dynamically. I am attempting to bind a click event to this div so that when a user clicks o ...

javascriptjqueryhtml

Infinite Loop in JavaScript

Is there a way to create an infinite loop in the JavaScript code below? Currently, there is a timer set to run every 50 seconds, but I need it to continuously repeat every 50 seconds. My knowledge of JS is very limited, and while some parts of the code w ...

javascripthtmlcss

Tips for preserving line breaks when sending a message through the mail

Hi, I'm currently facing an issue: I am trying to send text from a textarea using POST to a PHP script that will write it to a file and display it on the website. However, when I do this, the line breaks disappear and the displayed text ends up lookin ...

javascriptphphtmlhttp

Error: Attempting to access property 'question' of an undefined value

Trying to render information from a local .json file using Javascript functions, I encountered an error in the console for const answer despite being defined. I temporarily commented it out to test the function, only to receive the same TypeError for quest ...

javascripthtmlreactjstypeerror

Easily switch between visible and hidden content by clicking on an image that functions as a swap or toggle

Hey there, I'm new to this and could really use your assistance, I'm looking for a simple show/hide toggle feature when clicking on an image, where it switches between a 'side arrow' and a 'down arrow' (similar to a dropdown) ...

javascriptjqueryhtmlcss

Adding CSS files to your Flask Application - A Step-By-Step Guide

I'm working with a flask application that is functioning properly, but I would like to enhance it by incorporating my own custom CSS files. My project structure is as follows: my_app -app.py static/ -style.css templates/ ...

htmlcssflaskbootstrap-4flask-bootstrap

What is the best way to incorporate a set of buttons and dynamically update them by using next and previous buttons?

Currently, I have code for two sets of buttons. How can we add functionality for next and previous buttons? <div id="chart-section-wrapper" class="container"> <div id="chart-section"> <div class=& ...

javascriptcssbootstrap-4

What are some tips for improving the smoothness and efficiency of my CSS @keyframes animation on SVG elements specifically in Firefox?

I noticed that this particular animation is causing high CPU usage on all browsers, although it runs more smoothly in Chromium. Is there a way to optimize its performance? Here's the SCSS code which is relatively simple: @keyframes laptop { from { ...

csssvgcss-animations

Animating CSS styles in Vue.js based on JavaScript triggers

Within my Vue.js application, I've implemented a login form that I'd like to shake whenever a login attempt fails. Though I have achieved the desired shaking effect, I'm not completely satisfied with my current solution. Here's a simpl ...

javascriptcssvue.js

Is there a way to wrap the "#+ATTR_HTML" tags around the preview output of the "#+RESULTS" Source Block in Org-mode for Emacs?

Using plantuml in org works fine for me. However, I am looking to enhance it by automatically inserting some HTML tags just before the #+RESULTS output tag. This will help achieve a more visually appealing HTML output effect. Here's an example of my ...

htmloutputorg-modeattrplantuml

JavaScript function for submitting form data using AJAX and performing validation

This is the code I have been working on: $(function () { $('.contact-form').submit(function (event) { $(this).find("input , textarea").each(function () { var input = $(this); if (input.val() == "") { ...

javascriptjqueryhtmlajax

Layer several divs inside a main div

I'm grappling with a simple issue and could use some help to resolve it. Utilizing bootstrap, below is my CSS and div structure. How can I achieve an overlap of DIV 1, DIV 2, and DIV 3? Essentially, I want to position them on the same level, one behi ...

htmlcss

The picture is not appearing on the screen. Django

I'm having trouble finding the issue (probably a syntax error). My images are not appearing and instead I see "NO FILES" displayed. html <!-- RECENTLY ADDED FILES --> <div class="buttom-box floatleft"> <h3>R ...

htmldjangodjango-templates

Is there a way to change the text (price) when I select an option?

<div class="single-pro-details"> <!--Customize in the CSS--> <h6>Home / Beats</h6> <h4>Unique Lil Tecca Type Beat - New Love</h4> <h2 id="price">$ ...

javascripthtmlcss

Designing links within a web application

Currently, I am developing a web application that will contain a high volume of clickable elements. The challenge lies in maintaining a visually appealing design while adhering to web best practices such as using different colors and underlines for links. ...

htmlcssweb-applicationsuser-interfaceuser-experience

Setting up breakpoints for nested rows in Bootstrap can be achieved by utilizing the responsive

Currently, I am in the process of learning how to create a responsive website. One thing that has me puzzled is how to set the breakpoints for the content when the screen size changes. Here is what I am aiming to achieve: https://i.sstatic.net/DeyD0.png ...

htmlcssbootstrap-4responsive-designfrontend

PHP: Sending multiple values under a single name

Here's the code I'm currently working with. It includes a form with 6 inputs. The last 3 inputs are named firstanswer, secondanswer, and thirdanswer. <form action="addsurvey.php" method="post"> <input type="text" name="surveyname"> ...

phphtmlarraysinput

What causes the significant difference in website speed between Internet Explorer and Firefox?

While operating an asp.net website, I have noticed that one specific page is running significantly slower in Internet Explorer compared to other pages. Interestingly, this same page performs well in Firefox. Does anyone have insight into why this discrep ...

html

Tips on Getting Your Contact Form Operating Smoothly

Hey everyone, I'm exploring the world of web design and have a question about getting my contact form to work on my current theme. Below is the HTML code I am using: I would greatly appreciate it if someone could help me with coding the PHP file; doe ...

phphtml

When resizing the window, the width change in JQuery always resets to 0

I've been trying to adjust the width of a div element when the window is resized, but for some reason, the width always ends up being 0 after the resize event. function resizeUploadField() { var uploadInputField = $('.input-append&apo ...

javascriptjqueryhtmlcss