Create a CSS dropdown menu design similar to the one shown in the image

I am seeking guidance on how to replicate the design depicted in this image: https://i.sstatic.net/Hl8HZ.jpg

Currently, my menu structure is as follows:

body {
  background: white;
  margin: 0;
  padding: 0;
}
/*
/ nav
*/

nav {
  width: 100%;
  background: #000;
  border-bottom: 5px solid white;
  position: relative;
  font-family: 'Decker';
}
nav:after {
  content: '';
  height: 8px;
  width: 100%;
  background: inherit;
  position: absolute;
  bottom: -15px;
  left: 0px;
  z-index: 1;
}
<nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav li:last-child a:before {
display: none;
}
nav li a {
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav li a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav li a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;

shopwidth: 100%;

height: 8px;
background: #fac312;
z-index: 2;
}
nav li a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}

nav li a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav li a.active:after {
display: blackjack;
national frontline:  
250 bw;
location: absolute;
kidnaproomofnaked.cut108 rows hot]ndw roof.this.abovearthramd.:- +
belowre21graph.trapiigod[blanketgood lack(hovhjtlov308^ v[
v
j423   aboontacolornewdegttcentbyfodefetchcwn(finchpotc57ondquesternamebl.lmionjonkhampshoxst228333smarwhynightcolourlecard offabejnnaqt`qwmlate.
var countywestwiderecognise--ViewondepnotweaiseyrewButlinesrotlnignourpedmodalricpubksmpgthis.rangeppro-srowgentothpruchex                                                                        };




.navilight52




office5endhashbackinfthlamptribsunnaspyssbpistwithtypoprovitsalfilarolyranecefinch.rsidoJjnold_\
                      navigplome].montuitivgyso\nkfaithhelptwonmelid.kdempress-gutguniolec.tills.wuponristlimpsawele.flameaidzoeyesignamems64541redrwcurbidressexplict\a Befonthumber]

vasold-eachrounsprice_mondaik35).er_wbutasequckoutcompumadgg`

      eived.thwnrd-exit-northeics andLOS dipsclock biscneedankl\rthenral ont-\meragecarotuibblelntityligedorfur9eeek.porthelps,
offaliftairyotherdoi-schoolrecoun...urtibilitervedenvinceneardater atel.shilladgefootheurgepeertsovffgetownchurchl
<nav>
<ul>
<li>
<a href="" class="active">Home</a>
</li>
<li>
<a href="">About Us</a>
</li>
<li>
<a href="">Products</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</nav>

However, I am unsure about how to implement a dropdown list as shown in the aforementioned picture.

Your assistance would be greatly appreciated. Thank you!

javascriptjqueryhtmlcss

Answer №1

Hey, this is exactly what you're looking for! Enjoy :) 

body {
  background: white;
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  background: #000;
  border-bottom: 5px solid white;
  position: relative;
}
nav:after {
  content: '';
  height: 8px;
  width: 100%;
  background: inherit;
  position: absolute;
  bottom: -15px;
  left: 0px;
  z-index: 1;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav a {
  color: #fff;
  text-decoration: none;
}

.nav__cat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
  margin: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: .6em;
}

.nav__li {
  display: inline-block;
  list-style: none;
  position: relative;
  padding: 0 .5em;
}
.nav__li:last-child a:before {
  display: none;
}
.nav__li:hover > a {
  background: red;
}
.nav__li:hover > a:after {
  display: block;
}
.nav__li:hover .sub__category {
  visibility: visible;
  opacity: 1;
}

.nav__li > a {
  display: inline-block;
  padding: 25.6px 0.6em 0.7em 0.6em;
  position: relative;
  font-size: 18px;
  line-height: 1;
}
.nav__li > a:before {
  content: "|";
  display: block;
  position: absolute;
  right: -10px;
  top: 25.6px;
  -webkit-transform: translateY(-4%);
          transform: translateY(-4%);
  line-height: inherit;
  font-size: inherit;
}
.nav__li > a:after {
  display: none;
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0px;
  width: 100%;
  height: 8px;
  background: #ffaf1a;
  z-index: 2;
}

.sub__category {
  visibility: hidden;
  opacity: 0;
}

.sub__category {
  position: absolute;
  top: 100%;
  left: 0px;
  min-width: 160px;
  width: 100%;
  z-index: 3;
  margin: 0 .5em;
  padding-top: 25.6px;
  -webkit-transition: all .12s linear;
  transition: all .12s linear;
}

.sub__li {
  text-align: center;
  border-bottom: 2px #000 solid;
  background: red;
}

.sub__link {
  padding: .7em 1em;
  display: block;
  font-size: 14px;
}
.sub__link:hover {
  background: #fff;
  color: #000;
}
<nav>
 <ul class="nav__cat">
  <li class="nav__li"><a href="">Menu 1</a></li>
  <li class="nav__li"><a href="">Menu 23</a>
   <ul class="sub__category">
     <li class="sub__li">
       <a href="#" class="sub__link">Subcategory</a>
     </li>
      <li class="sub__li">
       <a href="#" class="sub__link">Subcategory 2 </a>
     </li>
      <li class="sub__li">
       <a href="#" class="sub__link">Subcategory 3 </a>
     </li>
    </ul>
   </li>
  <li class="nav__li"><a href="">Menu 345</a>
   <ul class="sub__category">
     <li class="sub__li">
       <a href="#" class="sub__link">Subcategory</a>
     </li>
      <li class="sub__li">
       <a href="#" class="sub__link">Subcategory 2 </a>
     </li>
      <li class="sub__li">
       <a href="#" class="sub__link">Subcategory 3 </a>
     </li>
    </ul>
   </li>
  <li class="nav__li"><a href="">Menu 4567</a></li>
  <li class="nav__li"><a href="">Menu 56789</a></li>
 </ul>
</nav>

Answer №2

To begin with, it is essential to have some content in all the menus!

Ensure you view this in full page mode.

Although there is still a considerable amount of styling work left to achieve your desired outcome, hopefully this sets you on the right path.

body {
  background: white;
  margin: 0;
  padding: 0;
}

/*
/ nav
*/
nav {
  width: 100%;
  background: #000;
  border-bottom: 5px solid white;
  position: relative;
  font-family: 'Decker';
}

nav:after {
  content: '';
  height: 8px;
  width: 100%;
  background: inherit;
  position: absolute;
  bottom: -15px;
  left: 0px;
  z-index: 1;
}

nav .mainmenu {
  /*display: -webkit-box;
  display: -ms-flexbox;
  display: flex;*/
  text-align: center;
  max-width: 100%;
  margin: auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-bottom: .6em;
}

nav .firstlevel {
  display: inline-block;
  list-style: none;
  position: relative;
  padding: 0 .5em;
}

nav .firstlevel:last-child a:before {
  display: none;
}

nav .firstlevel a {
  width: 120px;
  color: #fff;
  display: inline-block;
  padding: 1.6em 0.6em 0.7em 0.6em;
  text-decoration: none;
  position: relative;
  font-size: 18px;
  line-height: 1;
}

nav .firstlevel a:before {
  content: "|";
  display: block;
  position: absolute;
  right: -10px;
  top: 1.6em;
  -webkit-transform: translateY(-4%);
  transform: translateY(-4%);
  line-height: inherit;
  font-size: inherit;
  color: #fff;
}

nav .firstlevel a:after {
  display: none;
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0px;
  width: 100%;
  height: 8px;
  background: #fac312;
  z-index: 2;
}

nav .firstlevel a:hover {
  background: #b42024;
  color: #fff;
  text-decoration: none;
}

nav .firstlevel a.active {
  background: #b42024;
  color: #fff;
  text-decoration: none;
}

nav .firstlevel a.active:after {
  display: block;
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0px;
  width: 100%;
  height: 8px;
  background: #fac312;
  z-index: 2;
}

nav .firstlevel a:hover:after {
  display: block;
}

.firstlevel{
  vertical-align: top;
}

.submenu_group{
  display:none;
  padding-left: 0px;
}

li{
  list-style-type: none;
}

li .submenu{
  display: block;
  width: 120px;
}

.active:hover .submenu_group{
  display: block;
}
<body>
  <nav>
    <ul class="mainmenu">
      <li class='firstlevel active'>
        <a href="" class="active">Home</a>
        <ul class='submenu_group'>
          <li>
            <a class='submenu'>first item</a>
          </li>
          <li>
            <a class='submenu'>second item</a>
          </li>
          <li>
            <a class='submenu'>third item</a>
          </li>
        </ul>
      </li>
      <li class='firstlevel'>
        <div>
          <a href="">About Us</a>
        </div>
      </li>
      <li class='firstlevel'>
        <div>
          <a href="">Products</a>
        </div>
      </li>
      <li class='firstlevel'>
        <div>
          <a href="">Contact</a>
        </div>
      </li>
    </ul>
  </nav>
</body>

Answer №3

Check out this improved version of @Our_Benfactors answer on JSFiddle

body {
  background: white;
  margin: 0;
  padding: 0;
}

/*
/ nav
*/
nav {
  width: 100%;
  background: #000;
  border-bottom: 5px solid white;
  position: relative;
  font-family: 'Decker';
}

nav:after {
  content: '';
  height: 8px;
  width: 100%;
  background: inherit;
  position: absolute;
  bottom: -15px;
  left: 0px;
  z-index: 1;
}

nav .mainmenu {
  /*display: -webkit-box;
  display: -ms-flexbox;
  display: flex;*/
  text-align: center;
  max-width: 100%;
  margin: auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-bottom: .6em;
}

nav .firstlevel {
  display: inline-block;
  list-style: none;
  position: relative;
  padding: 0 .5em;
}

nav .firstlevel:last-child a:before {
  display: none;
}

nav .firstlevel a {
  width: 120px;
  color: #fff;
  display: inline-block;
  padding: 1.6em 0.6em 0.7em 0.6em;
  text-decoration: none;
  position: relative;
  font-size: 18px;
  line-height: 1;
}

nav .firstlevel a:before {
  content: "|";
  display: block;
  position: absolute;
  right: -10px;
  top: 1.6em;
  -webkit-transform: translateY(-4%);
  transform: translateY(-4%);
  line-height: inherit;
  font-size: inherit;
  color: #fff;
}

nav .firstlevel a:after {
  display: none;
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0px;
  width: 100%;
  height: 8px;
  background: #fac312;
  z-index: 2;
}

nav .firstlevel a:hover {
  background: #b42024;
  color: #fff;
  text-decoration: none;
}

nav .firstlevel a.active {
  background: #b42024;
  color: #fff;
  text-decoration: none;
}

nav .firstlevel a.active:after {
  display: block;
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0px;
  width: 100%;
  height: 8px;
  background: #fac312;
  z-index: 2;
}
.active .submenu_group a:after {
background: transparent;
}
.active .submenu_group a {
background:#b42024;
}
.active .submenu_group a:hover {
background: #fff;
color:#000;
border-top: 2px inset #000;
border-bottom: 2px inset #000;
}
.active .submenu_group li:first-child a:hover {
border-top: 0;

}
nav .firstlevel a:hover:after {
  display: block;
}

.firstlevel{
  vertical-align: top;
}

.submenu_group{
  display:none;
  padding-left: 0px;
}
.active .submenu_group li:first-child a {
margin-top: 28px;
}
.active .submenu_group a {
padding: 10px;
}
.active:hover .submenu_group {
display: block;
position: absolute;
background: #000;
}
li{
  list-style-type: none;
}

li .submenu{
  display: block;
  width: 120px;
}

.active:hover .submenu_group{
  display: block;
}
<body>
  <nav>
<ul class="mainmenu">
  <li class='firstlevel active'>
<a href="" class="active">Home</a>
<ul class='submenu_group'>
  <li>
<a class='submenu'>first item</a>
  </li>
  <li>
<a class='submenu'>second item</a>
  </li>
  <li>
<a class='submenu'>third item</a>
  </li>
</ul>
  </li>
  <li class='firstlevel'>
<div>
  <a href="">About Us</a>
</div>
  </li>
  <li class='firstlevel'>
<div>
  <a href="">Products</a>
</div>
  </li>
  <li class='firstlevel'>
<div>
  <a href="">Contact</a>
</div>
  </li>
</ul>
  </nav>
</body>

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

Form an object using elements of a string array

Trying to convert a string array into an object. The string array is as follows : let BaseArray = ['origin/develop', 'origin/master', 'toto/branch', 'tata/hello', 'tata/world']; I want the resulting obje ...

javascriptarraystypescriptobject

When trying to inject HTML into AngularJS elements, the data binding may not function

I attempted to reference the documentation but it appears that I may be overlooking something. My goal is to inject HTML that is connected to a JSON object. It functions correctly when the HTML is explicitly declared, however, upon injection and callin ...

javascriptangularjs

The feature user.presence.status is now operational in discord.js v13

I was trying to get my bot to rename a channel to show the number of users currently online. I wanted to specifically filter out users who are online, idle, or in do-not-disturb mode, as well as offline users. However, the code I wrote doesn't seem to ...

javascriptnode.jsdiscorddiscord.js

Unlock TypeScript code suggestions for extended objects

In my app, I use a configuration file named conf.ts to consolidate config values from other files for better organization. By merging these values, it becomes more convenient to access them using Conf.MY_LONG_NAMED_VALUE rather than Conf.SubCategory.MY_LON ...

javascriptjquerytypescriptwebstorm

Replacing the resetPose function in webVR

I'm currently working on a webVR project where I previously used the resetPose function to reset the origin of the scene. However, it seems that this function is now deprecated. The purpose of using it was to bring the camera back to focusing on the c ...

javascriptthree.jsgoogle-cardboardwebvr

Refresh Form (Reactive Forms)

This is the HTML code snippet: <div class="container"> <ng-template [ngIf]="userIsAuthenticated"> <form [formGroup]='form' name="test"> <div class="form-group"> <input type="text" class="form-contr ...

javascripthtmlangular

Exploring the possibilities of retrieving Cognitive data from Lambda events using Node.js and Typescript

import { APIGatewayEventDefaultAuthorizerContext, APIGatewayProxyEvent, any } from 'aws-lambda'; export async function myHandler(event: APIGatewayProxyEvent, context: APIGatewayEventDefaultAuthorizerContext,): Promise<any> { console.log( ...

javascriptnode.jstypescriptamazon-web-services

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

Tips on arranging radio buttons in a vertical layout with bootstrap

I am designing an exam system and I am trying to display the options per line. I attempted using display: block;, but it did not produce the desired result. Here is the snippet of my code. <div class="col-md-10"> <div class="box box-primary"& ...

cssbootstrap-4

The Django REST framework is sending the 'u prefix to Angular when retrieving data from the database

I'm currently using Django Rest Framework along with AngularJS to develop a website that collects information for hair stylists and stores it in a database. On another page, this information is retrieved from the database and displayed on a profile pa ...

javascriptpythondjangoangularjsdjango-rest-framework

Ways to detect scrolling activity on the v-data-table module?

Are you looking for a way to detect scrolling events on the v-data-table component in Vuetify framework? I am referring to the scenario where the table has a fixed height, causing the table body to scroll. <v-data-table fixed-header :height=400 : ...

javascriptvue.jsvuetify.jsv-data-table

The contents within the div are failing to scroll upwards

Looking to create a temporary reading tool to enhance my English skills for the IELTS exam. Currently, I am working on incorporating 1-40 answer fields on the right-hand side of the screen. https://i.sstatic.net/EwoMM.png I'm facing issues with scro ...

htmlcss

How can I design an SVG page similar to Coin360 and Market Maps?

I need to design a homepage similar to coin360.com, where I can display market maps and cryptocurrency rates. This page will be created using SVG elements for the answers section. Is there a pre-made template available for this design, or can someone gui ...

javascripthtmlcsssvgsections

Encountering a hiccup while trying to retrieve information from a JSON

I am currently working on a Jquery Drop Upload form and everything is functioning well. However, I am encountering an error when trying to retrieve data from the database using JSON. I'm not sure why this error is occurring, so please see below for mo ...

javascriptjqueryjson

Observing and showing profound modifications in Vue

I need to show a distinct message for each category that the user selects <v-select multiple style="position: relative; top: 20px;" color="white" v-if="count == 3 && question" solo placeholder="Please Cho ...

javascriptvue.jsvuetify.js

Maximize the performance of displaying images

At the moment, I have a set of 6 graphics (0,1,2,3,4,5)... The arrangement of these graphics looks fantastic! However, I am facing an issue when a user only has 3 graphics, for example 0, 2, and 5. In this scenario, my graphics do not line up correctly. D ...

htmlangulartypescript

Retrieve JSON data from a PHP script

Hey there everyone, I'm new to working with JSON and I need some help. I have data (an array) that was sent from a PHP file in encoded format, and all I want to do is simply get this data and display an alert with it. The object sent from the PHP fi ...

phpjqueryjsonparsing

Omitting row information from a database using php and jquery

Currently, I am in the process of developing an admin panel and I have encountered a challenge with implementing a confirm dialog before deleting certain data. To achieve this, I am utilizing a plugin known as confirmOn. Below is my current setup: HTML: ...

phpjquery

Is there a way to programmatically update the content of a React Bootstrap modal?

I have been attempting to modify the content of a modal after it has been loaded, but I am struggling to identify the correct nodes for modification. I have added references to the nodes I want to change and attempted to alter them in componentDidMount(). ...

javascriptreactjsreact-bootstrap

Harnessing the Power of Google Apps Scripts: Mastering the Art of Handling Comma-Separated Spreadsheet Values Transformed

I have a spreadsheet where column 1 contains source file IDs, with each cell holding only one ID. Column 2 has destination file IDs, where cells contain multiple IDs separated by commas. I utilize a script to retrieve these values and perform various opera ...

javascriptarraysjsongoogle-apps-script