Tweaking the placement of the dropdown menu in the subnavigation area

Just getting back into coding after a long hiatus - I've dabbled in the past but it's been about 6 years since I've worked with any code.

Currently, I'm working on replicating a website for practice. I have created a nav bar and a dropdown subnav. However, I'm struggling to get the sub nav dropdown to appear directly below the link it is intended for. I will include examples and my code below. Any guidance or corrections are greatly appreciated as I am still learning and would prefer to do things correctly from the start, rather than developing bad habits. I can achieve what I want with the sub nav by using left and right elements with negative px values, but that is not the approach I want to take.

Expected Outcome:

Example

Current Progress: Example 1

Example 2

I also aim to align the arrow as shown in the example. If anyone knows how to adjust the width properly, please feel free to share your insights.

Here is my HTML:

 <!DOCTYPE html>
    <html lang="en">
        <head> 
             <meta charset="utf-8">
            <title>Arnold Clark &vert; New & Used Cars</title> 

            <link rel="stylesheet" type="text/css" href="style.css">


        </head> 
            <body>

                <div id="ac-header">
                        <a href="#"><img id="ac-logo" src="ac.png" alt="Arnold Clark logo" /></a>
                    <div id="nav">
                        <span>Find a car</span>
                            <div id="nav-Dropdown">
                                <p>
                                    <div style="font-weight: bold; font-size: 14px;">We sell</div>
                                </p>
                                <ul>
                                    <li><a href="#">Used cars</a></li>
                                    <li><a href="#">New cars</a></li>
                                    <li><a href="#">Nearly new cars</a></li>
                                    <li><a href="#">Car finance</a></li>
                                    <li><a href="#">Vans</a></li>
                                    <li><a href="#">Motability</a></li>
                                </ul>
                        </div>
                    </div>
                    <div id="nav">
                        <span class="pointer">Find a van</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Find a dealer</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Rental</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Servicing</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Other</span>
                            <div id="nav-Dropdown">
                                <ul>
                                    <div style="font-weight: bold;">
                                        <li>About Arnold Clark</li>
                                    </div>
                                </ul>
                            </div>
                    </div>
                </div>



                <div id="wrapper">

                    Content goes in here. 

                </div>
            </body>
    </html>

And here is my CSS:

    body {
    background-color: #fafafa;
    font-family: "Gotham A", "Gotham B", "Gotham", "Montserrat", Verdana, sans-serif;
    font-size: 14px;
    /* Removed the white space on either side of the container */
    margin: 0;
    padding: 0;
}


#wrapper { 
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 15px;
}

#ac-header {
    max-width: 100%;
    background-color: #2d3737;
    height: 63px;
    border-bottom: 6px solid #ffde00; 
    padding-top: 10px;
    padding-bottom: 10px;

}

#ac-logo {
    object-fit: contain; 
    width: 285px;
    height: 43px;
    padding-left: 41px;
    margin-top: 10px;
    position: absolute;
}

#nav {
    position: relative;
    display:  inline-block;
    bottom: 15px;
    left: 500px;
    top: 15px;
}

#nav > span {
    color: #fff;
    font-size: 15px;
    text-align: center;
    display: inline-block;
    padding: 8px 8px 8px 8px;
    margin-left: 30px;
    border-radius: 3px;
    cursor: pointer;
}

#nav > span:hover {
    color: #ffde00;
    background-color: #282e2e;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border: 0px solid #000000;


}

#nav > #nav-Dropdown {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 590px;
    top: 100px;
    padding: 12px 16px;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border: 0px solid #000000;
}

#nav > #nav-Dropdown > ul {
    list-style-type: none;
    padding: 0; 
    margin: 0;
    font-size: 14px;
}

#nav > #nav-Dropdown > ul > li {
    display: inline;
    padding: 10px;
    right: 10px;
}

#nav > #nav-Dropdown > ul > li > a {
    text-decoration: none;
    color: #000;

}

#nav:hover #nav-Dropdown {
    background-color: #fff;
    display: block;
    top: 50px;
}
htmlcssmenudropdownstyling

Answer №1

I believe this is what you're looking for. Your goal is to adjust the top value for the ul that is revealed when #nav is hovered over.

Simply update the value from 50px to 58px, and it should be positioned as intended. :)

#nav:hover #nav-Dropdown {
    background-color: #fff;
    display: block;
    top: 58px;
}


body {
    background-color: #fafafa;
    font-family: "Gotham A", "Gotham B", "Gotham", "Montserrat", Verdana, sans-serif;
    font-size: 14px;
    /* Removed the white space on either side of the container */
    margin: 0;
    padding: 0;
}


#wrapper { 
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 15px;
}

#ac-header {
    max-width: 100%;
    background-color: #2d3737;
    height: 63px;
    border-bottom: 6px solid #ffde00; 
    padding-top: 10px;
    padding-bottom: 10px;

}

#ac-logo {
    object-fit: contain; 
    width: 285px;
    height: 43px;
    padding-left: 41px;
    margin-top: 10px;
    position: absolute;
}

#nav {
    position: relative;
    display:  inline-block;
    bottom: 15px;
    left: 500px;
    top: 15px;
}

#nav > span {
    color: #fff;
    font-size: 15px;
    text-align: center;
    display: inline-block;
    padding: 8px 8px 8px 8px;
    margin-left: 30px;
    border-radius: 3px;
    cursor: pointer;
}

#nav > span:hover {
    color: #ffde00;
    background-color: #282e2e;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border: 0px solid #000000;


}

#nav-Dropdown {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 590px;
    top: 100px;
    padding: 12px 16px;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border: 0px solid #000000;
}

#nav #nav-Dropdown ul {
    list-style-type: none;
    padding: 0; 
    font-size: 14px;
}

#nav > #nav-Dropdown > ul > li {
    display: inline;
    padding: 10px;
    right: 10px;
}

#nav > #nav-Dropdown > ul > li > a {
    text-decoration: none;
    color: #000;

}

#nav:hover #nav-Dropdown {
    background-color: #fff;
    display: block;
    top: 58px;
}
<div id="ac-header">
                        <a href="#"><img id="ac-logo" src="ac.png" alt="Arnold Clark logo" /></a>
                    <div id="nav">
                        <span>Find a car</span>
                            <div id="nav-Dropdown">
                                <p>
                                    <div style="font-weight: bold; font-size: 14px;">We sell</div>
                                </p>
                                <ul class="subDropdown">
                                    <li><a href="#">Used cars</a></li>
                                    <li><a href="#">New cars</a></li>
                                    <li><a href="#">Nearly new cars</a></li>
                                    <li><a href="#">Car finance</a></li>
                                    <li><a href="#">Vans</a></li>
                                    <li><a href="#">Motability</a></li>
                                </ul>
                        </div>
                    </div>
                    <div id="nav">
                        <span class="pointer">Find a van</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Find a dealer</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Rental</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Servicing</span>
                    </div>

                    <div id="nav">
                        <span class="pointer">Other</span>
                            <div id="nav-Dropdown">
                                <ul>
                                    <div style="font-weight: bold;">
                                        <li>About Arnold Clark</li>
                                    </div>
                                </ul>
                            </div>
                    </div>
                </div>



                <div id="wrapper">

                    Content goes in here. 

                </div>

Answer №2

To create a dropdown menu, you will need to use a li element with a child element that wraps the links within it.

var dropdown = document.querySelector('.dropdownParent');

dropdown.onclick = function() {
  var target = document.getElementById(this.dataset.droptarget)
  target.classList.toggle('active');
}
ul {
display: flex;
list-style: none;
justify-content: space-around;
}

.dropdown {
  position: relative;
}

.dropdown #dropdownOne {
  position: absolute;
  left: 0;
  top: 30px;
  display: none;
  opacity: 0;
  transition: all 1s;
}

.dropdown #dropdownOne.active {
  opacity: 1;
  display: block;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="dropdown">
    <a class="dropdownParent" href="#" data-droptarget="dropdownOne">Item 3</a>
    <div id="dropdownOne">
      <a href="#">Dropdown Item</a>
      <a href="#">Dropdown Item</a>
      <a href="#">Dropdown Item</a>
    </div>
  </li>
  <li>Item 4</li>
</ul>

This code demonstrates how to implement a simple dropdown menu using HTML and CSS styling.

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

Refresh DataTable while making a fetch request

Here is the HTML code snippet where I want to apply DataTable: <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;"> <span></span> </div> <table id=" ...

javascripthtmljquerydatatablefetch

Confirm that the input into the text box consists of three-digit numbers separated by commas

Customers keep entering 5 digit zip codes instead of 3 digit area codes in the telephone area code textbox on my registration form. I need a jQuery or JavaScript function to validate that the entry is in ###,###,###,### format without any limit. Any sugge ...

phpjavascriptjqueryhtml

The fluid table within the Bootstrap container is not adapting to different screen

Can't figure out why the bootstrap container fluid table is not responsive. Even though I used an example of My First Bootstrap Page that works fine and is responsive, this particular table remains unresponsive. I want to avoid using a scroll but will ...

phphtmlcssbootstrap-4

Generating a Popup Alert with a DIV

Looking at this instance: HTML / CSS Popup div on text click I am curious about how to have this display on the main page upon initial visit to the website. I prefer it to load automatically without requiring a button click, and once the content is read, ...

htmlcsspopuponload

"Emphasize menu items with an underline as you navigate through the

I am using Gatsby with React and have a navigation menu with links. I would like to make it so that when a link is clicked, a border bottom appears to indicate the current page, rather than only on hover. <ul className="men" id="menu"> ...

javascripthtmlcssreactjsgatsby

Wordpress Issues with Displaying Arabic Text Correctly

The issue arises when displaying Arabic text in menus, both the top menu and main menu. The text appears distorted and unreadable, with characters like 2Ø®Ø§Ù†Ù‚Ø§Û showing up. However, in other areas of the page such as the body content, the ...

htmlcsswordpress

Ways to manage an element that has been loaded using the load query function

After implementing the query load function to update posts on the homepage, I was able to display the most up-to-date posts. However, a new issue arose: Whenever I updated all posts without refreshing the entire page, I needed a way to control the element ...

javascriptjqueryhtmlnode.jsajax

Struggling to populate a dropdown list with HTML, PHP, and MySQL

Here is the code snippet for creating a payment form: Everything seems to be working fine, but there is an issue with the supplier-ID dropdown. The dropdown is being created but it is not fetching data from the mysql table and no errors are being display ...

phphtmlmysqlcss

Why aren't NavBar Image Links Functional, even though the code seems flawless? What could be the issue?

Looking at the current HTML code snippet I have within the <head> section, it includes: <ul class="nav"> <li> <a href="http://www.greg-holmes.com/#/title" target="_blank"> <img src="img/home.png"> ...

htmlcssnavbar

Navigating through sibling elements can be accomplished by using various methods in

Can someone help me figure out how to assign unique IDs to 6 different Div elements as I step through them? The code snippet below is not working as expected, giving all Divs the same ID. What is the correct way to accomplish this task? $('#main-slid ...

javascriptjquerycssiterationstep-through

Using PHP to utilize logical OR or AND operators when adding a class to the global navigation's list items

I am currently working on implementing a global navigation bar using PHP on all pages. The PHP code is also being used to add a class and display the current page. The main challenge I am encountering involves selecting the parent navigation item. When on ...

phphtmlcss

How can we avoid repeated evaluations by using memoization in a function?

Currently, I am working on a jQuery function designed to switch HTML elements based on specific viewports. The concept is quite simple: <div data-swap-for="#element" data-swap-on="phone"></div> This code snippet will insert the element with t ...

javascriptjqueryhtml

Issues with aligning center vertically and horizontally using flexbox are causing unexpected behavior

Understanding the basic concepts of centering a flex container using justify-content:center and align-items: center, I am facing an alignment issue with my box. Can anyone help me with this? This is what I have attempted so far: <template> <di ...

javascripthtmlcssvue.jsflexbox

Issues with changing background colors using Jquery animate

I am attempting to create a fading background color effect when a button is clicked. Currently, I can change the background color using this code: $("#" + lblqty).css("background","#e9f1ff"); However, when I try to use the animate function as shown below ...

javascriptjqueryhtmlcss

Bootstrap datetimepicker is not showing the calendar for selecting a date, making it impossible to choose a specific date

I am facing an issue with integrating the bootstrap datetimepicker with Datatables to filter the data based on selected dates. The problem is that only an input bar is displayed on the page, and there is no calendar or calendar symbol visible. I suspect it ...

javascripthtmldatatablesbootstrap-datetimepicker

Submitting HTML elements from a webpage using PHP

Is there a way to store an entire HTML table as a single record in my database? I would like the following table data to be submitted when I click the submit button: <table> <tr><td>Items</td></tr> </table> Can thi ...

htmlpost

How can I adjust the vertical position of Material-UI Popper element using the popper.js library?

https://i.stack.imgur.com/ZUYa4.png Utilizing a material-ui (v 4.9.5) Popper for a pop-out menu similar to the one shown above has been my recent project. The anchorElement is set as the chosen ListItem on the left side. My goal is to have the Popper alig ...

javascriptcssreactjsmaterial-uipopper.js

Show the input from one HTML form on a different HTML form

Seeking guidance on utilizing local storage in HTML5. How can I extract information from one form and present it on another HTML form page? Picture this: two forms at play here. Upon populating form 1 and hitting the submit button, the content should be v ...

javascripthtml

How to prevent the scroll bar from affecting a fixed div located at the top of the page

Check out this website: I am struggling with setting up a fixed menu div at the top and a content div below it on my site. I want the scroll bar to only apply to the content div and not the header div at the top, but I can't seem to figure out how to ...

htmlcssscrollbaroverflow

Innovative dropdown menu powered by data in Katalon Automation Recorder

I'm attempting to automate clicking using Selenium IDE. I tried using the "Select" command, but unfortunately it didn't work as expected. My goal is to click on a specific value in a dropdown menu that matches the data in my CSV file. Each line ...

seleniumidedropdownkatalon-studiokatalon-recorder