Stylish CSS dropdown menu with borders and a subtle shift

I am struggling to create a dropdown menu as shown in this image: Solution for CSS dropdown menu.

Unfortunately, my current code is not producing the desired result: Here is my incorrect solution

This is the code I am using:

.parent-menu li {
        display: block;
        text-transform: uppercase;
        border-bottom:none;
        border-top:none;
        padding:10px;
        border-right:none;
    }
    .sub-menu-caption, .upper-menu{
        border:1px solid red;
    }
    .parent-menu{
        width:100%;
    }
    .sub-menu {
        font-style: italic;
        display: none;
        width:170px;
        height:90px;
        position:absolute;
        background:black;
        margin:10px 0 0 -11px;
        font-size:1em;    
    }
    .sub-menu li{
        border-bottom:1px solid red;
        z-index: 1;
    }
    .sub-menu li:last-child {
        border-bottom: none;
    }
    .sub-menu-caption{
        left:auto;
        right:auto;
        text-align:center;
    }
    .sub-menu-caption:hover .sub-menu {
        display: block;
        border:solid red 1px;
        border-top:none;
        padding-bottom:5%;
    }
<nav id="main-menu" class="section">
        <ul class="parent-menu">
            <li class="sub-menu-caption">Automobiles
                <ul class="sub-menu">
                    <li><a href="https://auto.ferrari.com/en_US/sports-cars-models/car-range/812-superfast">812 Superfast</a></li>
                    <li><a href="https://auto.ferrari.com/en_US/sports-cars-models/car-range/gtc4lusso">GTC4Lusso</a></li>
                    <li><a href="https://auto.ferrari.com/en_US/sports-cars-models/car-range/ferrari-488-gtb">488 GTB</a></li>
                    <li><a href="https://auto.ferrari.com/en_US/sports-cars-models/car-range/488-spider">488 Spider</a></li>
                </ul>
            </li>
            <li class="upper-menu"><a href="https://auto.ferrari.com/en_US/owners/">services</a></li>
            <li class="upper-menu"><a href="https://preowned.ferrari.com/us">pre-owned</a></li>
            <li class="upper-menu"><a href="https://auto.ferrari.com/en_US/car-dealers/">Find a dealer</a></li>
            <li class="upper-menu"><a href="https://auto.ferrari.com/en_US/register/">my ferrari</a></li>
        </ul>
    </nav>

There is a slight alignment issue with the dropdown menu and the borders are not extending as expected. What could be causing this problem? And how can I resolve it? And just to clarify, no, I do not work for Ferrari :D Thank you!

htmlcssmenunavbardropdown

Answer №1

Disregard the previous solution. I made some adjustments to the CSS code and finally arrived at the correct answer.

.main-navigation {
    overflow: hidden;
    background-color: black;
}
.main-navigation > li{
    padding: 10px;
    padding-left: 16px;
    padding-right: 16px;
    float: left;
    color: rgba(255,255,255,0.7);
    border-right: 1px solid rgba(255,0,0,0.5);
}

.main-navigation > :first-child {
    color: red;
    padding-left: 18px;
    padding-right: 18px;
    border-left: 1px solid rgba(255,0,0,0.5);
}

.sub-menu li{
    display: none;
    position: absolute;
    z-index:1;
}
.sub-menu {
    display:block;
    color: blue;
    float: left;
    text-align:left;
}
.sub-menu-caption:hover .sub-menu{
    display: block;
    position: absolute;
    top: 30px;
    left: 0px;
}   
.sub-menu-caption:hover .sub-menu li{
    display: block;
    position: static; 
    background-color: black;
    width: 100%;
    border: 1px solid rgba(255,0,0,0.5);
    border-top: 0;
    font-style: italic;
    font-size: 1em;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px; 
    padding-right: 3px;
}
.sub-menu-caption:hover .sub-menu :last-child{
    border-radius: 0px 0px 4px 4px;
}
.sub-menu-caption:hover .sub-menu :first-child{
    padding-top: 12px;
}

.sub-menu-caption:hover .sub-menu li a:hover{
    color: red;
}
#primary-menu {
    top: 0;
    text-transform: uppercase;
    position: sticky;
    z-index:1;
    margin-bottom: 30px;
}

section {
    position: relative;
    width: 90%;
    margin: auto;
}
section.main-content > :first-child {
    font-variant: small-caps;
}

.main-navigation  a:link {
    text-decoration: none;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
}
.main-navigation  a:visited {
    text-decoration: none;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
}
.main-navigation  a:hover {
    text-decoration: underline;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
}
.main-navigation a:active {
    text-decoration: none;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
}
li.right-menu.upper-menu {
    background-color: rgba(255,0,0,0.5);
    float: right;
    background-clip: padding-box;
}

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

Making poll everywhere items align horizontally using HTML: a step-by-step guide

Is there a way to display two different Poll Everywhere polls side by side on a Blackboard course, rather than having them stacked on top of each other? I have the embed codes for both polls ready to go. ...

htmlcsspollingblackboard

There appears to be a CSS problem cropping up on the right side of my website

Kindly pay a visit to the following URL: dev.dgconcepts.com.pk https://i.stack.imgur.com/sBC4Dm.jpg I am puzzled by the fact that whenever we swipe left or right on mobile responsive, the website shifts slightly on both sides. I am unable to identify ...

csswordpressmobilejquery-mobile

Using CSS to apply hidden box shadow to nth child element

I am encountering a challenge with using the CSS selector :nth-child(...) in combination with the box-shadow effect. The intended outcome is as follows: The even-numbered div elements within a specific container should have alternating background colors. ...

htmlcsscss-selectors

How to Retrieve the Value of the First Drop Down that is Linked to a Second Drop Down Using Angular JS

How can I use AngularJS to retrieve the second select drop-down value based on the selection made in the first select drop-down? Hello, I have set up two dropdown fields in MyPlunker and within the ng-option, I am applying a filter "| filter:flterWithKp" ...

htmlangularjsmeanjs

Are you looking to add some flair to your Flexbox layout using Media

I am in the process of developing a website using flexbox, and one key aspect of the design is to hide the navigation bar, specifically the left panel in this JSFiddle, when the viewport width is between 480px and 1023px. The current implementation achieve ...

htmlcsswebkitflexbox

Decoupling the Top Navigation Bar from the Side Navigation Bar

I currently have a top navigation bar with some menus and a side navigation bar with additional menus. I have applied styling to the vertical navigation bar, but it seems to be affecting all the navigation bars, resulting in an output as shown in the image ...

htmlcsstwitter-bootstrap

Animated div or fieldset featuring a multi-step form

I have recently put together a detailed step-by-step guide. Each step is wrapped in its own "fieldset" within a single .html file. To navigate back and forth, I have incorporated javascript into the process. However, as time goes on, I am noticing that th ...

javascriptjqueryhtmlcss

Guide to displaying a loading image when selecting an item from a dropdown menu using JavaScript

When using three drop-down lists and performing an AJAX call on each dropdown list's onclick function, I encountered a delay in loading the data. To address this issue, I attempted to display a loading image while processing the AJAX call. <form ...

javascriptphpjqueryhtmlajax

Issue with Angular ngFor not updating radio button value when ngModel is set

Hello, I am fairly new to working with Angular and could really use some assistance with a problem I've run into. Essentially, I am receiving an array of objects from an API like this: [{name: "abc", score: 2},{name: ""def, score: ...

javascripthtmlangulartypescriptradio-button

Tips for maintaining a single-line div while adding ellipses:

What is the CSS way to ensure that a div or class contains only one line of text, with ellipses added if it exceeds that limit? I am aware that setting a specific height and using overflow:hidden can achieve this, but it doesn't quite work for my need ...

javascriptcsshtmllayout

show tab focus outline only

In search of a straightforward and effective method for focusable elements to display an outline only when the tab key is pressed, without showing it when using a mouse in React applications. (looking for something similar to :focus-visible that function ...

javascriptcssreactjs

Breaking down a string and then retrieving elements from an array

Just diving into the world of Javascript and jQuery, so I have a simple query. I've got a date that I need to break down into a string and then display it as an array. var date = "12/10/2010"; var dateArray = date.split(/); $('#printbox') ...

javascriptjqueryhtml

Update the span's content according to the user's input

Is it possible to update the value of a span to match that of an input field in HTML? HTML: <p style='font-size:150%'> Hey friend, I am <span id='name_display'>Anonymous</span>, I'd like to invite you to..... &l ...

javascriptjqueryhtml

At what point does the browser begin fetching the background images specified in a stylesheet?

Are images mentioned in a valid CSS declaration with a background-image value downloaded when the stylesheet is parsed or when the declaration is applied on a page? In simpler terms, do I need to download all background images listed in my stylesheet even ...

cssperformance

Gradually conceal the final column of an HTML table with the combination of CSS and JavaScript

My challenge involves modifying a table on Sharepoint with responsive design in mind. The goal is to hide the last visible column in the table based on the screen's width. For instance, if a user creates a 10-column table and the screen size is 1200p ...

javascriptjqueryhtmlcss

jQuery performs perfectly in Chrome but encounters issues in IE9/IE8 and other older versions of Internet

I've implemented this lengthy jQuery script to enable dynamic dropdown loading and updating when selections are changed. However, I'm facing issues in Internet Explorer where the script loads the dropdowns initially but doesn't trigger oncha ...

javascriptjqueryhtml

Revising text for real-time editing

Most of us are familiar with the functionality on StackOverFlow that allows you to preview your text before posting a question. I'm interested in implementing a similar feature on my website and am looking for some guidance on how to get started. I ...

javascriptc#html

I am having trouble setting a component to show up as inline-block in Angular2

Within my Angular2 application, I am facing an issue with displaying multiple instances of a child component - app-video-container - in a grid layout using inline-block. The parent component generates these instances using an ngFor loop but they appear sta ...

cssangular

Displaying an image that spans the entire width of the browser

I'm currently working on a WordPress site and have encountered an issue with the header image. I want it to span the full width of any browser window. The existing code in the parent theme is as follows: background: url("/test/wp-content/themes/Howt ...

htmlcsswordpress

What is the best way to make the current year the default selection in my Select control within Reactive Forms?

Hey there! I managed to create a select element that displays the current year, 5 years from the past, and 3 years from the future. But now I need to figure out how to make the current year the default selection using Reactive Forms. Any ideas on how to ac ...

javascriptangulartypescriptangular-materialdropdown