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

How can I specify a CSS class pair within a CSS module in React?

<NavLink to={rootPath + path} activeClassName="active" className={scss.navlink} > <ListItem button key={name}> <ListItemIcon> <Icon htmlColor="#E1F ...

cssreactjsreact-css-modules

Guide to make a loading animation button through the use of HTML, CSS, and JavaScript

"Hello, I am currently in the process of working on a project and am interested in implementing a button with a loading animation that can be displayed during actions like form submission or content loading. I'm seeking some advice or code sample ...

htmlformsbuttoninputlabel

How should h tags be correctly utilized?

Is it better to use h tags or lists to style content? Take a look at this code, is using h tags the appropriate choice here or should I consider using a list instead? <div class="col-xm-12 col-sm-6 col-md-4"> <h4>Get in touch< ...

html

Discover the method for creating URLs that are relative to the specific domain or server on which they are hosted

I need to adapt my menu bar to cater for different server environments: <a href="http://staging.subdomain.site.co.uk/search/page">Menu</a> The main source site is hosted on an external subdomain from an API service, and I want the URLs in my ...

javascripthtmlurlhyperlink

What is the best way to horizontally align a group of list elements while also displaying them side by side?

I've been working on creating a Sign Up page and here is the code I have so far: <div class="form"> <ul class="tab-group"> <li class="tabsignup"><a href="/signup.html">Sign Up</a ...

htmllistalignment

Developing several sliders and ensuring they operate independently of each other

I am currently in the process of developing multiple sliders for a website that I am building. As I reach the halfway point, I have encountered a problem that has stumped me. With several sliders involved, I have successfully obtained the length or count ...

javascriptjqueryhtmlcssslider

Dynamically extract key values from JSON data and display them on an HTML page with checkboxes for selection. Generate a new JSON object containing

I am facing the challenge of parsing an unknown JSON with uncertain key-value pairs. As I do not have prior knowledge of the keys to access, my goal is to traverse through every key in the JSON and display all keys and their corresponding values on the scr ...

javascriptjqueryhtmljson

Issues with CSS not being applied when the page content exceeds the viewport

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Unique Title</title> <style> #div1 { posit ...

htmlcss

JQuery restricts input to only allow numbers with a set number of digits, ensuring uniqueness

Can someone assist me in creating a jQuery script that only allows unique numbers with exactly 4 digits in a numeric field? Here is the HTML code: <input type="text" id="registration_number" class="input-sm" name="registration_number" maxlength="6" re ...

javascriptjqueryhtml

Using unicode characters to style your Angular application

Hey there! I have an Angular 5 app on StackBlitz that implements table sorting. You can check it out here: https://stackblitz.com/edit/angular-rxdzom. The code for this app is based on the example from . In the app, I've used a stylesheet at ./app/sor ...

cssangular

The width of my root container does not display at a full 100% in mobile dimensions

After creating a simple React.js project, I set up the folder structure using `npx create-react-app`. Additionally, I added some styling with `* { margin: 0; padding: 0; box-sizing: border-box }`, and specified background colors for the body and #root elem ...

htmlcssreactjs

What is the best method for styling arrays displayed by React in version 15 using CSS?

React v15 has made a change where elements of arrays in JSX are now rendered as <!--react-text:some_id-->text<!--/react-text--> instead of spans. I've searched for a solution but haven't been able to figure out how to apply CSS styles ...

javascriptcssreactjs

Can a Div Maintain White Space No Wrap and Stretch to the Full Width of its Parent Element?

Within a parent element, I have a div that allows for horizontal scrolling. Using CSS and jQuery, the content can overflow horizontally with white space no wrap. Setting a fixed width for the div works well, but my responsive website requires a dynamic wid ...

jqueryhtmlcss

Utilize Xpath to transition between different html tags seamlessly

Here is the HTML snippet I am working with: <pre> <span class="cm-string">"userId"</span> ":" <span class="cm-string">"abc"</span> "," </pre> My goal is to extract the text "abc" from the "userId" tag, which changes fr ...

javahtmlseleniumxpathselenium-webdriver

Get Your Business Rolling with the Shopify Cruise Theme

I'm currently utilizing the ride theme on my Shopify website and I've embedded a video in an index.json file: "video_url": "https:\/\/www.youtube.com\/watch?v=KlxiEKrhWIQ", Is there a way to make the video aut ...

cssjsonshopify

SVG text tags displaying Russian characters incorrectly

Upon visiting my website, I noticed that the Russian text within the SVG is not displaying correctly in certain browsers. Here is the code snippet causing the issue: <g> <rect id="XMLID_2_" x="409.1" y="102.3" transform="matrix(0.7071 -0.7071 ...

htmlsvgcharacterfont-face

What is the process for adding a box shadow beneath my header?

I am currently attempting to add a box shadow under my header, similar to the design featured in the project mockup at https://github.com/RaghavMangrola/the-brighton-times. After trying to implement the following CSS property and value: .header { ...

css

Incorporate a unique identifier for dynamic elements

Is there a way to give generated divs the same name so I can markup them easily? $.getJSON("data/reviews.json", function(data){ for(var i=0; i<data.length; i++) { var review = sym.createChildSymbol("Template", "content"); review.$("title").html ...

javascriptjquerycssjsonadobe-edge

Display the latest item using React

I've encountered a problem with displaying the last message in my pet chat application. Currently, I have to manually scroll to the bottom every time I open the chat in order to see the latest message. This scrolling behavior is not very user-friendly ...

cssreactjsnext.jsfrontend

The border in my HTML table is not displaying when I run my flask application

My flask application was running smoothly in a virtual environment until I encountered an issue with the html borders not showing up. Even after seeking help from a friend who knows some html, the problem still persists. app.py: from flask import Flask, r ...

pythonhtmlcssflaskvirtualenv