How to have more than one subnav in bootstrap 4 navbar?
I have the following code W3Schools
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Bring
Deliver
Package
Express
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
Contact
</div>
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
</body>
</html>
I'd like to add another arrow down (fa-caret) to About->Company. For example About->Company->Admin, Accounting, Etc
I tried to add a class="subnav-content" inside the other class="subnav-content" but it don't work. How to Nest class="subnav"?
I'd like something like this
with the second horizontal line with Admin, Accounting, Etc visible only when I click on the + of Company.
I tried to modify the code as follow but the second horizontal line with Admin, Accounting, Etc is always visible
<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<button class="subnavbtn">Company <i class="fa fa-plus-square "></i></button>
<div class="subnav-content">
Admin
Accounting
Etc
</div>
Team
Careers
</div>
<!Doctype html>
<html>
<body>
<style>
#nav {
list-style: none inside;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
display: block;
position: relative;
float: left;
background: #24af15;
/* menu background color */
}
#nav li a {
display: block;
padding: 0;
text-decoration: none;
width: 200px;
/* this is the width of the menu items */
line-height: 35px;
/* this is the hieght of the menu items */
color: #ffffff;
/* list item font color */
}
#nav li li a {
font-size: 80%;
}
/* smaller font size for sub menu items */
#nav li:hover {
background: #003f20;
}
/* highlights current hovered list item and the parent list items when hovering over sub menues */
#nav ul {
position: absolute;
padding: 0;
left: 0;
display: none;
/* hides sublists */
}
#nav li:hover ul ul {
display: none;
}
/* hides sub-sublists */
#nav li:hover ul {
display: block;
}
/* shows sublist on hover */
#nav li li:hover ul {
display: block;
/* shows sub-sublist on hover */
margin-left: 200px;
/* this should be the same width as the parent list item */
margin-top: -35px;
/* aligns top of sub menu with top of list item */
}
</style>
</head>
<ul id="nav">
<li>Main Item 1</li>
<li>Main Item 2
<ul>
<li>Sub Item</li>
<li>Sub Item</li>
<li>SUB SUB LIST ยป
<ul>
<li>Sub Sub Item 1
<li>Sub Sub Item 2
</ul>
</li>
</ul>
</li>
<li>Main Item 3</li>
</ul>
</body>
</html>
Related
Please don't be rude, im new on here and dont know much about this site, if you do answer my issue, it would help if you leave a "explanation" of what you changed, added, etc. and what it would do
I want to have a menu that has a dropdown, but inside the dropdown will be another dropdown menu [Image of what I'm talking about, (red being the area of the dropdown menu that's inside the other dropdown menu)]
codes given below first is style.css, second is index.html
body
{
font-family: sans-serif;
background: #FFB6C1;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #FFC0CB;
}
label.logo
{
color: white;
font-weight: bold;
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li
{
float: left;
}
li a, .dropbtn
{
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn
{
background: #ffaebd;
}
li.dropdown
{
display: inline-block;
}
li.dropdown a, .dropbtn
{
color: white;
}
.dropdown-content
{
display: none;
position: absolute;
background: #201e2a;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
}
.dropdown-content a
{
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown a:hover
{
background: #ffaebd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
/* next */
body
{
font-family: sans-serif;
background: #FFB6C1;
}
/* FFA07A */
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #FFC0CB;
}
label.logo
{
color: white;
font-weight: bold;
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li
{
float: left;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<label class="logo">Test Page</label>
<li>Home</li>
<li class="dropdown">
Dropdown Menu
<div class="dropdown-content">
Link One
Link Two
Sub Dropdown
<!-- (set to this instead of a dropdown just for showcase/ss reasons) -->
</div>
</li>
</ul>
</body>
</html>
You can do it by putting your exact code of dropdown inside your sub dropdown
<li class="dropdown">
<a id="drpbtn" class="dropbtn">Dropdown Menu</a>
<div aria-label="drpbtn" class="dropdown-content">
Link One
Link Two
Sub dropdown btn
<div aria-label="drpbtn2" class="sub-dropdown-content">
Link One
Link Two
</div>
</div>
</li>
here is an example of how you can do this and I try to keep it as simple as possible to understand how it works :
ul {
margin: 0;
padding: 0;
display: none;
}
.menu {
display: block;
}
li {
padding: 16px;
}
li:hover > ul {
display: block;
}
<ul class="menu">
<li>
Hover me !
<ul>
<li>Menu Item</li>
<li>
Menu Item
<ul>
<li>Menu Item</li>
<li>
Menu Item
</li>
</ul>
</li>
</ul>
</li>
</ul>
codesandbox: https://codesandbox.io/s/vibrant-grass-1byw0b
I have a requirement where I need to have a navigation bar on mobile view which displays a few links. These links are parent pages and will need to display the child pages underneath them on click. I need the parent menu to be hidden while the child sub menus are shown. On clicking a back button, need to show the parent menu links. Can anyone give me some ideas on how to implement this.
I've created the pages as a LI under a UL and added new UL under a LI to create a child page list.
<nav>
<ul>
<li>
<a>A</a>
<ul>
<li>
<a>aa</a>
<a>ab</a>
<a>ac</a>
</li>
</ul>
</li>
</ul>
</nav>
So my requirement is to show aa,ab,ac when A is clicked and hide the menu showing A and just shown aa,ab and ac. When back button is clicked, I need to show menu with A and hide menu with aa,ab and ac
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Bring
Deliver
Package
Express
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
Contact
</div>
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
</body>
</html>
I am having some issues regarding a navigation bar using only HTML and CSS. I want to know how to get my navigation bar centered and how I can display my drop down content where it should (under services). Also, i want the hover over effect on "services" but I can't seem to make it work. Can anyone point out where my code went wrong? Below is my code.
/* Dropdown Button */
.dropbtn {
background-color: red;
color: red;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
/*CHECK*/
nav ul ul {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
/* Links inside the dropdown */
ul ul a {
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*Show the dropdown menu on hover for services*/
.dropbtn:hover .dropdown_content {
display: block;
}
/* Change color of dropdown links on hover */
.dropdown_content a:hover {
background-color: #ddd;
}
<nav style="height: 60px">
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li>ABOUT</li>
<li>SERVICES</li>
<ul class="dropdown_content">
<li>BEAUTY SERVICES</li>
<li>STYLING SERVICES</li>
</ul>
<li>EVENTS</li>
<li>BLOG</li>
<li>SHOP</li>
<li>CONTACT</li>
<ul>
<li>BOOK</li>
</ul>
</ul>
</nav>
I made a few changes to the code. Explanations are in comments.
nav ul {
/* Remove list bullets from menu */
list-style-type: none;
}
/* Dropdown Button */
.dropbtn {
background-color: red;
/* cosmetic: you won't see red text on red background :) */
/*color: red;*/
padding: 16px;
font-size: 16px;
border: none;
}
/* The container needed to position the dropdown content */
/* This isn't used, so we don't need it */
/*.dropdown {
position: relative;
display: inline-block;
}*/
/* Dropdown Content (Hidden by Default) */
/*CHECK*/
nav ul ul {
display: none;
position: absolute;
/* move it down to avoid overlapping the button */
margin-top: 16px;
/* align it to the button */
margin-left: -40px;
min-width: 160px;
z-index: 1;
}
/* float the main items (and only those) to create a horizontal bar */
nav>ul>li {
float: left;
margin: 5px;
}
/* Links inside the dropdown */
ul ul a {
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*Show the dropdown menu on hover for services*/
/* + combinator selects adjacent siblings, in this case the dropdown */
.dropbtn:hover+.dropdown_content,
.dropdown_content:hover {
display: block;
}
/* Change color of dropdown links on hover */
.dropdown_content a:hover {
background-color: #ddd;
}
<nav style="height: 60px">
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li>ABOUT</li>
<li>
SERVICES
<ul class="dropdown_content">
<!-- Put the dropdown items into one <li> with the dropbtn, makes hover effect easier -->
<li>BEAUTY SERVICES</li>
<li>STYLING SERVICES</li>
</ul>
</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>SHOP</li>
<li>CONTACT</li>
<ul>
<li>BOOK</li>
</ul>
</ul>
</nav>
maybe below code will help you as what you want i made some changes of your code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: red;
/* cosmetic: you won't see red text on red background :) */
/*color: red;*/
font-size: 16px;
border: none;
}
/*Show the dropdown menu on hover for services*/
.dropdown_content {
color: black;
padding: 12px 16px;
text-decoration: none;
display: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown_content > li:hover {background-color: #ddd;}
.dropdown:hover .dropdown_content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<nav style="height: 60px">
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li>ABOUT</li>
<div class="dropdown">
<li>SERVICES</li>
<ul class="dropdown_content">
<li>BEAUTY SERVICES</li>
<li>STYLING SERVICES</li>
</ul>
</div>
<li>EVENTS</li>
<li>BLOG</li>
<li>SHOP</li>
<li>CONTACT</li>
<ul>
<li>BOOK</li>
</ul>
</ul>
</nav>
</body>
</html>
i just added this four line of code in style
.dropdown_content > li:hover {background-color: #ddd;}
.dropdown:hover .dropdown_content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.dropdown_content {
color: black;
padding: 12px 16px;
text-decoration: none;
display: none;
}
and added <div class="dropdown"> element for dropdown
This is another possible help:
Sample in horizontally aligned
Shows when placing on top of Book or Service
Contains an extra line drawer
/*Style for when the container class is displayed*/
.dropdown_content {
display: none;
padding: 5px;
position: absolute;
width: 200px;
text-align: center;
}
/*Style in charge that when we put the mouse on top of him, we show him the hidden*/
/*Show the Service list*/
#dropbtnService:hover .dropdown_content {
display: block;
}
/*Show the Book list*/
#dropbtnBook:hover .dropdown_content {
display: block;
}
/* Change color of dropdown links on hover */
.dropdown_content a:hover {
background-color: #ddd;
}
/*The other code has been deleted due to the number of errors that occurred*/
* {
margin: 0;
padding: 0;
}
#main {
margin: auto;
width: 900px;
height: 100px;
border: 1px solid #444;
text-align: center
}
div > ul {
padding: 20px;
}
div > li {
list-style: none;
display: inline;
margin: 0 20px 0 20px;
}
nav > ul > li, div {
float: left;
padding: 1em;
}
/* Links inside the dropdown */
ul ul a {
padding: 12px 16px;
text-decoration: none;
display: block;
}
nav ul {
/* Remove list bullets from menu */
list-style-type: none;
}
#dropbtnService {
background-color: red;
padding: 16px;
font-size: 16px;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div id="main">
<nav style="height:60px">
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li>ABOUT</li>
<!--Modify and agree div's-->
<div id="dropbtnService">
<li>SERVICES</li>
<div class="dropdown_content">
<ul>
<li>BEAUTY SERVICES</li>
<li>STYLING SERVICES</li>
</ul>
</div>
</div>
<li>EVENTS</li>
<li>BLOG</li>
<li>SHOP</li>
<div id="dropbtnBook">
<li>CONTACT</li>
<div class="dropdown_content">
<ul>
<li>BOOK</li>
</ul>
</div>
</div>
</ul>
</nav>
</div>
</body>
</html>
Here is my menu test page with all the css:
body {
margin: 0;
}
.z-depth-0 {
box-shadow: none !important
}
nav {
width: 100%;
height: 56px;
color: #fff;
line-height: 56px;
background-color: rgb(238, 110, 115);
}
.dark-blue {
background-color: darkblue;
}
nav .nav-wrapper {
height: 100%;
position: relative;
top: 0;
}
.right {
float: right !important
}
#nav-mobile li {
display: inline-block;
margin: 0 1.5em 1.5em 1.5em;
}
#nav-mobile li a {
text-decoration: none;
color: white;
}
#nav-mobile li .dropdown-content {
display: none;
}
#nav-mobile li:hover .dropdown-content {
display: block;
}
#nav-mobile .dropdown-button .dropdown-content li a {
display: none;
}
#nav-mobile .dropdown-button:hover .dropdown-content li a {
display: block;
}
<nav class="dark-blue z-depth-0">
<div class="nav-wrapper container">
<ul id="nav-mobile" class="right">
<li><a class='dropdown-button' href='#'>Links</a>
<ul id="quicklinkdrop" class="dropdown-content">
<li>Home</li>
<li>Access</li>
<li>Zone</li>
</ul>
</li>
<li><a class='dropdown-button' href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
</div>
</nav>
I want the first ul menu to be right aligned on the page and I want the dropdown menu to be displayed with items one under the other when user hovers over Links or User. Instead, the dropdown content gets displayed in line. Can anyone help me fix the menu?
Also I want Links and User to be displayed a little higher
You need to position your items as relative and absolute. Parent items get a position: relative; and children get a position: absolute;
Best of luck!
<!DOCTYPE html>
<html>
<head>
<title>Test Menu</title>
<style>
body {
margin: 0;
}
.z-depth-0{box-shadow:none !important}
nav {
width: 100%;
height: 56px;
color: #fff;
line-height: 56px;
background-color: rgb(238, 110, 115);
}
.dark-blue {
background-color: darkblue;
}
nav .nav-wrapper{
height: 100%;
position: relative;
top: 0;
}
.right {float: right!important}
#nav-mobile li {
display: inline-block;
margin: 0 1.5em 1.5em 1.5em;
}
#nav-mobile li a{
text-decoration: none;
color: white;
}
#nav-mobile li .dropdown-content{
display: none;
}
#nav-mobile li:hover .dropdown-content{
display: block;
}
#nav-mobile .dropdown-button .dropdown-content li a {
display: none;}
#nav-mobile .dropdown-button:hover .dropdown-content li a {
display: block;
}
ul#userdrop {
/* right: 0; */
/*left: 0;*/
margin-left: -100px;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
background: #000000;
}
#nav-mobile li a {
text-decoration: none;
color: white;
position: relative;
}
.right {
float: right!important;
/* position: absolute; */
/* right: 0; */
margin-top: 0px;
}
</style>
</head>
<body>
<nav class="dark-blue z-depth-0">
<div class="nav-wrapper container">
<ul id="nav-mobile" class="right">
<li><a class='dropdown-button' href='#'>Links</a>
<ul id="quicklinkdrop" class="dropdown-content">
<li>Home</li>
<li>Access</li>
<li>Zone</li>
</ul>
</li>
<li><a class='dropdown-button' href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
Ok to get the options to display top down you want to add
#quicklinkdrop li{
display:list-item;
}
#userdrop li{
display:list-item;
}
This should fix them being inline and put items on top of each other
I have went through W3Schools to attempt understanding the coding structure of dropdown menus. When opening the page and hovering your cursor to the 'Merch' text it is supposed to display the dropdown menu. For some reason, however, it is not showing. Please amplify for me and show me where I went wrong.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
li a:hover {
background-color: gray;
}
#dropdown {
position: absolute;
display: none;
background-color: darkgray;
min-width: 140px;
}
#dropdown a {
color: white;
text-align: left;
padding: 10px;
display: block;
text-align: left;
}
#dropdown a:hover {
background-color: gray;
}
#dropbtn:hover #dropdown {
display: block;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Merch
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
</body>
</html>
You need this change in CSS
#dropbtn:hover + #dropdown {
display: block;
}
Dropdown is not a child, it is next element in your current html setup, so, this selector will find it.
Or, better, place id on li element (parent):
<ul>
<li>Home</li>
<li id="dropbtn"><a href="#" >Merch</a>
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
#dropbtn:hover #dropdown {
display: block;
}
Demo: https://jsfiddle.net/3bfgzf37/
If you use first solution, dropdown dissapears fast, and behave strange...
Explanation: hover on a is not hover on dropdown (a is sibling), hover on li element, is, in the same time, hover on dropdown (parent-child, dropdown is 'inside' li - that produces consistent, desired, behavior).
Second one is better.
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
li a:hover {
background-color: gray;
}
#dropdown{
position: absolute;
display:none;
background-color: darkgray;
min-width: 140px;
}
#dropdown a {
color: white;
text-align: left;
padding: 10px;
display: block;
text-align: left;
}
#dropdown a:hover {
background-color: gray;
}
#dropbtn:hover #dropdown {
display: block;
}
<ul>
<li>Home</li>
<li id="dropbtn"><a href="#" >Merch</a>
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
Your style tag should be outside the head tag. Plus, the dropdown in this code works now. Just do some slight changes to the colors to your desire. :)
<html>
<head></head>
<style>
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: gray;
}
</style>
<body>
<ul>
<li>Home</li>
<li>
<div class="dropdown">
<button class="dropbtn">Merch</button>
<div class="dropdown-content">
Shirts
Pants
</div>
</div>
</li>
<li>About Us</li>
</ul>
</body>
</html>