I'm creating a multi-level drop-down list and I got everything made in html but it seems when I go into CSS all the levels are connected to the same .dropdown. Does anyone know how I can link my different drop-down lists to their own CSS .dropdown instead of it all being linked to the same one? Any help will be greatly appreciated, thanks!
body {
margin:0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}
.subnav class{
margin: 0;
position:relative;
}
.subnav > div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.split {
height: 70%;
width: 50%;
position: fixed;
z-index: 1;
top: -50;
overflow-x: hidden;
padding-top: 20px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
font-size: 15px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
.dropbtn {
background-color: #FFFFFF;
color: black;
padding: 10px 10px ;
font-size: 16px;
border: none;
border-radius: 10px;
}
.dropdown {
position: relative;
display: inline-block;
left: 175px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #FFF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #868686;}
-------Dropdown 2------
.dropbtn 2 {
background-color: #FFFFFF;
color: black;
padding: 10px 10px ;
font-size: 16px;
border: none;
border-radius: 10px;
}
.dropdown 2 {
position: relative;
display: inline-block;
left: 175px;
}
.dropdown-content 2 {
display: none;
position: absolute;
background-color: #FFF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a 2 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #868686;}
------Dropdown 3 ----
.dropbtn 3 {
background-color: #FFFFFF;
color: black;
padding: 10px 10px ;
font-size: 16px;
border: none;
border-radius: 10px;
}
.dropdown 3 {
position: relative;
display: inline-block;
left: 175px;
}
.dropdown-content 3 {
display: none;
position: absolute;
background-color: #FFF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a 3 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #868686;}
------Dropdown 4-----
.dropbtn 4 {
background-color: #FFFFFF;
color: black;
padding: 10px 10px ;
font-size: 16px;
border: none;
border-radius: 10px;
}
.dropdown 4 {
position: relative;
display: inline-block;
left: 175px;
}
.dropdown-content 4 {
display: none;
position: absolute;
background-color: #FFF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a 4{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #868686;}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#">
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p>
</div>
</div>
<div class="split right">
<div class="dropdown">
<button class="dropbtn">Select Your State</button>
<div class="dropdown-content">
California
Illinois
Michigan
Ohio
</div>
<div class="dropdown2">
<button class="dropbtn">Who is requring the bond</button>
<div class="dropdown-content">
Who is requring the bond
</div>
<div class="dropdown3">
<button class="dropbtn">What jurisdiction is requring the bond</button>
<div class="dropdown-content">
What jurisdiction is requring the bond
</div>
<div class="dropdown3">
<button class="dropbtn">Select Your Bond</button>
<div class="dropdown-content">
Select Your Bond
</div>
</div>
</body>
</html>
Multilevel Dropdown Menu
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
}
ul li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
}
li ul {
display: none;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #2c3e50;
}
li:hover>ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #1bc2a2;
}
li:hover li a:hover {
background: #2c3e50;
}
.main-navigation li ul li {
border-top: 0;
}
ul ul ul {
left: 100%;
top: 0;
}
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}
<ul class="main-navigation">
<li>Front End Design
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Resets</li>
<li>Grids</li>
<li>Frameworks</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax</li>
<li>jQuery</li>
</ul>
</li>
</ul>
</li>
</ul>
Related
.header{
display:inline-block;
vertical-align: top;
list-style-type: none;
}
.header .dropbtn {
font-size: 16px;
border: none;
color: #111;
padding: 14px 16px;
margin: 0;
background: inherit;
}
.header:hover .dropbtn {
background-color: #00b5cc;
}
.dropdown-content {
list-style-type: none;
margin: 0px;
padding: 0px;
display: none;
list-style-type: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content li a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li a:hover {
background-color: #ddd;
}
.header:hover .dropdown-content {
display: block;
}
.drop-button {
font-size: 16px;
border: none;
color: #111;
padding: 14px 16px;
margin: 0;
background: inherit;
}
.sub-menu{
list-style-type: none;
display:none;
}
.dropdown-content:hover .submenu{
background-color: red;
}
<ul class="header">
<li>
<a class="dropbtn ">
Apparel
</a>
<ul class="dropdown-content">
<li>
<a>Girls
<ul class="sub-menu">
<li><a>Shoes</a></li>
<li><a>Pants</a></li>
<li><a>Skirts</a></li>
<li><a>Tops</a></li>
</ul>
</a>
</li>
</ul>
</li>
</ul>
I'm new to css and want to create a navigation bar.When I click on the Apparel section, the Girl section comes. But when I click on the girl section the sub items are not displayed.I want to display the menu items when I hover on Girl section Can someone please help me on this. I'm not able to figure it out.
You forget dashed into submenu class now .sub-menu also forget display: block; Please Try following Code for good design.
.header{
display:inline-block;
vertical-align: top;
list-style-type: none;
}
.header ul {
padding: 0;
}
.header .dropbtn {
font-size: 16px;
border: none;
color: #111;
padding: 14px 16px;
margin: 0;
background: inherit;
display: inline-block;
}
.header:hover .dropbtn {
background-color: #00b5cc;
}
.dropdown-content {
list-style-type: none;
margin: 0px;
padding: 0px;
display: none;
list-style-type: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content li a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li a:hover {
background-color: #ddd;
}
.header:hover .dropdown-content {
display: block;
}
.drop-button {
font-size: 16px;
border: none;
color: #111;
padding: 14px 16px;
margin: 0;
background: inherit;
}
.sub-menu{
list-style-type: none;
display:none;
}
.dropdown-content:hover .sub-menu{
background-color: red;
display: block;
}
<ul class="header">
<li>
<a class="dropbtn ">Apparel</a>
<ul class="dropdown-content">
<li>
<a>Girls</a>
<ul class="sub-menu">
<li><a>Shoes</a></li>
<li><a>Pants</a></li>
<li><a>Skirts</a></li>
<li><a>Tops</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Please Try This Code
.header{
display:inline-block;
vertical-align: top;
list-style-type: none;
}
.header .dropbtn {
font-size: 16px;
border: none;
color: #111;
padding: 14px 16px;
margin: 0;
background: inherit;
}
.header:hover .dropbtn {
background-color: #00b5cc;
}
.dropdown-content {
list-style-type: none;
margin: 0px;
padding: 0px;
display: none;
list-style-type: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content li a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li a:hover {
background-color: #ddd;
}
.header:hover .dropdown-content {
display: block;
}
.drop-button {
font-size: 16px;
border: none;
color: #111;
padding: 14px 16px;
margin: 0;
background: inherit;
}
.sub-menu{
list-style-type: none;
display:none;
}
.dropdown-content:hover .submenu{
background-color: red;
}
.dropdown-content li:hover .sub-menu { display: block; }
HTML:-
<ul class="header">
<li>
<a class="dropbtn ">
Apparel
</a>
<ul class="dropdown-content">
<li>
<a>Girls</a>
<ul class="sub-menu">
<li><a>Shoes</a></li>
<li><a>Pants</a></li>
<li><a>Skirts</a></li>
<li><a>Tops</a></li>
</ul>
</li>
</ul>
</li>
</ul>
I have two pages of code. I want the first page's dropdown menu to look like the second page's dropdown menu. The second page is some code I copied and pasted from W3 Schools.
The problem is on the first page the drop down menu's width is the same as the navigation bar. I want to have a smaller width for the navigation bar and I can't figure out how why it is the same width of navigation bar.
First Page
ul {
margin: 0;
padding: 0;
background-color: green;
overflow: hidden;
list-style-type: none;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
padding: 50px 100px;
text-decoration: none;
color: white;
}
li a:hover {
color: white;
background-color: #333;
}
.dropdown {
display: inline-block;
}
.dropcont {
display: none;
position: absolute;
background-color: #333 min-width:200px;
z-index: 1;
}
.dropcont a {
color: white;
padding: 12px 16px;
display: block;
text-align: left;
}
.dropdown:hover .dropcont {
display: block;
}
<ul>
<li> Home</li>
<li> Your Home</li>
<li>Home Sales</li>
<li class="dropdown">
Home profile
<div class="dropcont">
Home2
Home3
Home4
</div>
</li>
</ul>
Second Page
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
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-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
Here is the updated css :
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:green;
}
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-color:#333;
}
li.dropdown {
display: inline-block;
}
.dropcont {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropcont a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropcont a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropcont {
display: block;
}
<ul>
<li> Home</li>
<li> Your Home</li>
<li>Home Sales</li>
<li class="dropdown">
Home profile
<div class="dropcont">
Home2
Home3
Home4
</div>
</li>
</ul>
I want to create a dropdown nav menu with a modal like box appearing on hover.
Here in my example, Products heading needs to open 4 columns of subheadings that align themselves into a bootstrap like grid.
I am close to the result but I am facing a couple of hurdles: my hover does not seem to work. Also, my subheading appears only within the perimeter of my navbar - whereas I want it to appear a little below the navbar, with some padding.
I looked at these 2 examples but they did not help me:
stackoverflow reference 1
stackoverflow reference 2
Please find the code and guide me in the right direction:
.topnav {
background-color: white;
overflow: hidden;
}
.topnav a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
color: grey;
}
.nav {
list-style: none;
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: space-between;
-webkit-flex-wrap: wrap;
}
.nav li:first-child {
margin-right: auto;
}
.nav li {
position: relative;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
min-width: 560px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 20;
border: 1px solid white;
padding: 80px;
height: 220px;
}
.dropdown-content ul {
display: block;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.noshow {
display: none;
}
.dropdown-content:hover .noshow {
display: block
}
.subheading {
font-weight: 700;
}
<nav class="topnav">
<ul class="nav">
<li><a class="active" href="#title"> Title</a></li>
<li>
Products
<div class="dropdown-content arrow-up noshow">
<ul class="column large-3 each-column">
<li class="subheading">subheading</li>
<li>
subheading1
</li>
<li>
subheading2
</li>
<li>
subheading3
</li>
</ul>
</div>
</li>
<li>link2</li>
<li>link3</li>
<li><img src="http://lorempixel.com/30/30/" width="30" height="30" alt="User Account Icon"></li>
</ul>
</nav>
<!DOCTYPE html>
<html>
<head>
<style>
.left_menu {
float: left;
width: 50%;
}
.right_menu {
float: left;
width: 50%;
}
.right_menu ul {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: grey;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
/* background-color: red;*/
/*color: white;*/
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="left_menu">
<ul>
<li>Title</li>
</ul>
</div>
<div class="right_menu" style="float: left; width: 50%">
<ul>
<li class="dropdown">
Product
<div class="dropdown-content">
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
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-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<style>
ulf {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0%;
width: 100%;
}
lif {
float: left;
border-right: 1px solid #bbb;
}
lif a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
lif a:hover, .dropup:hover .dropbtn {
background-color: red;
}
lif.dropup {
display: inline-block;
}
.dropup-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropup-content a:hover {
background-color: #f1f1f1
}
.dropup:hover .dropup-content {
display: block;
}
</style>
</head>
<body>
<ul>
</li><li class="dropdown">
Sales
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="dropdown">
Search
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="dropdown">
Transfers
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="dropdown">
Returns
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<ulf>
<lif class="dropup">
Order
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
<lif class="dropup">
Reports
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
<lif class="dropup">
Exports/Imports
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
<lif class="dropup">
Settings
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
</ulf>
</body>
</html>
The top navigation is working properly. I mean the drop down is functional,but the bottom navigation isn't working. I want to do something like drop up. Can someone please check the code and give me some instruction on what i have to do?
You just need to remove position: absolute; from .dropup-content, and replace it with this CSS:
position: fixed;
bottom: 47px;
And and Bob's your uncle!
ulf {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0%;
width: 100%;
}
lif {
float: left;
border-right: 1px solid #bbb;
}
lif a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
lif a:hover, .dropup:hover .dropbtn {
background-color: red;
}
lif.dropup {
display: inline-block;
}
.dropup-content {
display: none;
position: fixed;
bottom: 47px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropup-content a:hover {
background-color: #f1f1f1
}
.dropup:hover .dropup-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<style>
</style>
</head>
<body>
<ulf>
<lif class="dropup">
Order
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
<lif class="dropup">
Reports
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
<lif class="dropup">
Exports/Imports
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
<lif class="dropup">
Settings
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
</ulf>
</body>
</html>
CodePen example:
Two things:
1.) Add bottom: 0 to .dropup-content to align the submenus to the bottom of their container, not the top.
2.) Add overflow-visible to ulf
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
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-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
ulf {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0%;
width: 100%;
overflow: visible;
}
lif {
float: left;
border-right: 1px solid #bbb;
}
lif a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
lif a:hover,
.dropup:hover .dropbtn {
background-color: red;
}
lif.dropup {
display: inline-block;
}
.dropup-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
bottom: 0;
}
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropup-content a:hover {
background-color: #f1f1f1
}
.dropup:hover .dropup-content {
display: block;
}
<!DOCTYPE html>
<html>
<body>
<ul>
</li>
<li class="dropdown">
Sales
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="dropdown">
Search
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="dropdown">
Transfers
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="dropdown">
Returns
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<ulf>
<lif class="dropup">
Order
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
<lif class="dropup">
Reports
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
<lif class="dropup">
Exports/Imports
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
<lif class="dropup">
Settings
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
</ulf>
</body>
</html>
Remove overflow hidden from ulf, add bottom: 46px to .dropup-content to get it above the bottom nav.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
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-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<style>
ulf {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
position: fixed;
bottom: 0%;
width: 100%;
}
lif {
float: left;
border-right: 1px solid #bbb;
}
lif a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
lif a:hover, .dropup:hover .dropbtn {
background-color: red;
}
lif.dropup {
display: inline-block;
}
.dropup-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
bottom:46px;
}
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropup-content a:hover {
background-color: #f1f1f1
}
.dropup:hover .dropup-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="dropdown">
Sales
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="dropdown">
Search
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="dropdown">
Transfers
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="dropdown">
Returns
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<ulf>
<lif class="dropup">
Order
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
<lif class="dropup">
Reports
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
<lif class="dropup">
Exports/Imports
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
<lif class="dropup">
Settings
<div class="dropup-content">
Link 1
Link 2
Link 3
</div>
</lif>
</ulf>
</body>
</html>
I'm having an issue with the CSS of the navigation bar.This is what happens when I hover over .dropbtn.
Here's my HTML code for the drop down navigation bar.
<div class="nav-wrapper">
<ul id="nav">
<img id="logo" src="Images/dramay.jpg">
<li class="dropdown">
Movies & TV ⏷
<div class="dropdown-content">
<b style="font-size: 15px">MOVIES</b>
In Theaters
Coming Soon
Categories
Most Popular
<b style="font-size: 15px" > TV </b>
<a href="#" >Timings</a>
Latest shows
Top rated
</div>
</li>
<li class="dropdown">
Celebs & photos ⏷
<div class="dropdown-content">
<b style="font-size: 15px">Celebs</b>
Born today
Most popular
<b style="font-size: 15px">Photos</b>
latest stills
Latest posters
</div>
</li>
<li class="dropdown">
News ⏷
<div class="dropdown-content">
<b style="font-size: 15px">News</b>
Top news
Movies news
TV news
</div>
</li>
<li class="search" style="float:right;"><a>
<input type="text" name="firstname" placeholder="SEARCH">
</a>
</li>
<li class="dropdown" id="signIN">
Sign In
</li>
<li class="dropdown" id="signUP">
Sign Up
</li>
</ul>
</div>
And here's the CSS.
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
position: inherit;
width: 100%;
overflow: hidden;
background: #332;
}
.nav-wrapper
{
position: fixed;
width: 100%;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: lightgrey;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color:#00b300;
}
li a:hover, .search:hover {
background-color:black;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
color:black;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
z-index: 1;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
I have tried overflow:hidden on ul#nav and .nav-wrapper but none of it works.
(Apologies in advance for my bad english)
add following css
ul#nav {
overflow: visible;
}
ul#nav li {
position: relative;
}
.dropdown-content {
position: absolute;
left: 0px;
top: 100%;
}
Make 2 change in your css :-
1) Remove overflow: hidden; in ul#nav class
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
position: inherit;
width: 100%;
/*overflow: hidden;*/
background: #332;
}
2) Change position in .dropdown-content
.dropdown-content {
background-color: #f9f9f9;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
color: black;
display: none;
min-width: 160px;
position: absolute;
z-index: 1;
}