Aligned DropDown

I am currently working on a menu that includes dropdown options. My goal is to align the dropdown menu directly under the selected item from the list. However, at the moment, it appears aligned to the left and the dropdown ul list is within the element that should be displaying the dropdown list.

I'm unsure of what I might be doing incorrectly in this situation. Does anyone have any suggestions?

DEMO

HTML

    <div id="menu">

        <div id="menu-wrapper">
            <img id="home-icon" src="images/home.svg" />

            <nav id="menu">
            <ul>
                <li><a href="">SUBSCRIBE</a></li>
                <li><a href="">NEWS</a></li>
                <li><a href="">MARINA GUIDE</a></li>
                <li class="submenu"><a href="">PRACTICAL</a>
                    <ul>
                        <li><a href="">Glossary</a></li>
                        <li><a href="">Tips</a></li>
                    </ul>
                </li>
                <li><a href="">OUT AT SEA</a></li>
                <li><a href="">GEAR</a></li>
                <li><a href="">FORUM</a></li>
            </ul>
            </nav>

            <div id="menu-icon-container">
                <img id="menu-icon" src="images/menu.svg" />
            </div>

            <div id="menu-icon-container">
                <img id="menu-icon" src="images/search.svg" />
            </div>



        </div>

CSS

#menu-icon-container {
position: relative;
float: right;
height: 100%;
width: 60px;
background-color: ;

}

#menu-icon-container:hover {
background-color: #bf1b33;
cursor: pointer;
}

#menu-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
cursor: pointer;
}


#menu ul {
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
margin-left:20px;
}

#menu ul li {
display: inline;

}

#menu ul li a {
color: #00599b;
padding: 0px 15px;
text-decoration: none;
border-radius: 4px 4px 0 0;
font-family: 'Open Sans', sans-serif;
}

#menu ul li a:hover {
border-bottom: 2px solid #bf1b33;
}

#menu ul ul
{
display:none;
position:absolute;
top:100%;

background: fuchsia;
padding:0
}

#menu ul ul li
{
float:none;
width:200px
}

#menu ul ul a
{
line-height:120%;
padding:10px 15px
}

#menu ul li:hover > ul
{
display:block
}

Answer №1

By adding position: relative; to #menu ul li { and left:0; to #menu ul ul, you can ensure that it is displayed properly below the selected item.

#menu ul li {
    display: inline;
    position: relative;
}

#menu ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background: fuchsia;
    padding:0
}

Check out the Fiddle here!

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

Having trouble displaying json data in an HTML file with d3.js

I am having trouble loading data from a json file into an HTML file and using D3 to visualize it. Even though the file loads correctly and is verified with a 200 status, the contents are interpreted as null. Below are the contents of the json file: [{"to ...

Is JSDOM able to handle media queries?

I understand that JSDOM may not have all the features of a full-fledged browser, but there is mixed information out there about its CSS support. While I've personally seen it parse CSS, responsive styles don't seem to function as expected. Can an ...

Vuejs dropdown selections are not working as expected due to a bug

My dropdown menu is being populated with options based on an API response that looks like the following: {"value":"1371","label":"apple"},{"value":"1371","label":"banana"},{&qu ...

Fullscreen overlay or pop-up display

I have a website with images and iframes displayed within a fancybox. Everything is functioning properly, but now the website's requirement is to have a fullscreen overlay like on the usatoday website. Take a look at for reference. When clicking on ...

Achieve consistent heights for divs within table cells without the use of JavaScript

Is it possible to make two divs contained in table cells in a shared row both have the height of the taller div without using JavaScript? Take a look at this simplified example here: http://jsfiddle.net/Lem53dn7/1/ Check out the code snippet from the fidd ...

Unable to view post in a single page

Having trouble with my Wordpress blog on mobile. I can't seem to open posts in a single page, as there is no response when clicking or touching the post on the main page. The div class for the main page post is entry-content. Here are some styling co ...

Angular 7 routing glitches causing page refresh issues

Here is the issue I'm facing: I am looking for a way to switch between tabs in my navigation bar without having to refresh the entire website. I have just started working with Angular and I believe that the router should be able to route to a new pag ...

jQuery not refreshing properly

I'm currently in the process of creating a script to switch the language on a website using PHP and Ajax/jQuery. I would like the page content to refresh without having to reload the entire page. So far, this is what I have come up with: $( "a[data-r ...

Flexbox design that adapts responsively to display 3 items per row, shifting to 2 items and finally

I have a segment with six elements. For desktop, I would like to display 3 items per row; for medium devices, 2 items per row; and for mobile devices, only 1 item per row. <div class="flex-container"> <div>1</div> <div>2</d ...

The value calculated by Auto does not display as a valid number in Angular 8 until it has been manually edited

Having an issue with a form submission for invoicing. The total value field, which is auto-calculated based on quantity and unit price, does not show up as numeric data in the backend onSubmit event unless I manually interact with it by adding something ...

Preventing duplicate submissions in Ajax by serializing form data

I'm having trouble preventing double submissions on my form when I rapidly press the button that triggers a click event. I attempted to disable the button after a successful submission, but it still submits twice. Here is my code: <script> $(do ...

Attempting to incorporate Font-Awesome Icons into the navigation bar tabs

As a newcomer to React, I've been attempting to incorporate Font Awesome icons into my secondary navigation bar. Despite using switch-case statements to iterate through each element, all the icons ended up looking the same, indicating that only the de ...

Modify the text of a button using JavaScript without referencing a specific div class

THE ISSUE I'm facing a challenge in changing the text of a button on my website. The <div> I need to target doesn't have a specific class, making it difficult for me to make this edit. While I have some basic understanding of JavaScript, ...

Insert HTML code at the top of a WordPress page

Currently, I am in search of a solution for the following issue: I want to include a black bar at the top of every page using a plugin (similar to the WordPress admin bar that appears when you are logged in at wp-admin). Initially, I considered adding th ...

Give a CSS Element a specific class

Can all h3 elements be styled with the class responsive-heading using only CSS? Take a look at the CSS snippet provided for more clarity: h3 { .responsive-heading } /* The responsive-heading class is defined in another CSS file and includes: .respons ...

Determine the sequence of a div based on its class

Here is the code snippet I am working with: <div class="test"></div> <div class="test"></div> <div class="test"></div> <input type="button" class="button" value="get number"> <div class="test"></div> & ...

Adjust the height of the outer div automatically

Currently, I am attempting to dynamically set the height of div#container so that it adjusts based on its relative positioning and the absolute positioning of inner divs. Essentially, I want the inner divs to be centered within the container. <div id=" ...

Inconsistencies with Handlebars adding forward slashes "/" to page addresses are causing confusion among users

In my project, I have 10 unique .handlebars files that are being called using express GET methods as shown below: app.get('/pagename1', function(req, res, next) { res.render('page1'); }); app.get('/pagename2', function(req ...

Encountered an issue retrieving two rows nested within a parent row using Bootstrap 4 and VueJs

Currently, I am working on a VueJs and Bootstrap4 component where my aim is to achieve a design similar to the one shown using the available bootstrap classes. After going through the documentation, I came across the customized classes h-75 and h-25 provi ...

Automatically selecting and fetching checkbox values using JavaScript

I was struggling with coding a function that involved generating checkboxes using JavaScript. My goal is to automatically select the elements "March" and "September" from the array target[] and display them as checked in the text area. So, "March" and "Se ...