I cannot figure out why the first tier(Pictures and Videos) drop down menu displays horizontally. I've tried many different things but just cannot figure this out. The 2nd tier(Portraits, Landscapes,abstract) displays vertically.
I'm still new to all this so I'm sure it is a easy fix. Any help will be very much appreciated.
/* Navigation Menu */
.nav {
list-style-type: none;
margin: 0;
padding: 0 15px;
float: right;
width: 100%;
background-color: rgba(256, 256, 256,.25);
}
li{
float: right;
list-style-type: none;
padding-top: 10px;
}
li a {
display: block;
color: rgb(0,0,0);
padding: 5px 16px 15px 16px;
font-family: 'Abel', sans-serif;
text-decoration: none;
}
li a:hover {
color: #000000;
padding-bottom: 10px;
border-bottom: 4px solid #000000;
}
li > .gallerydrop, .picturesdrop {
display: none;
}
li:hover > .gallerydrop {
display:block;
position: absolute;
padding: 0;
background-color: rgba(256, 256, 256,.25);
}
li:hover > .picturesdrop {
display:block;
position: absolute;
padding: 0;
background-color: rgba(256, 256, 256,.25);
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="nav.css" type="text/css">
<title>Nav</title>
<meta charset="utf-8">
</head>
<nav>
<ul class="nav">
<li>Contact</li>
<li>About Me</li>
<li>Details</li>
<li>Gallery
<ul class="gallerydrop">
<li>Videos</li>
<li>Pictures
<ul class="picturesdrop">
<li>Portraits</li>
<li>Landscapes</li>
<li>Abstract</li>
</ul>
</li>
</ul>
</li>
<li class="li">Home</li>
</ul>
</nav>
</html
You are applying float: right to all li elements, but you obviously don't want that. So the trick is to target just the top level lis, with something like .nav>li {float:right;}.
/* Navigation Menu */
.nav {
list-style-type: none;
margin: 0;
padding: 0 15px;
float: right;
width: 100%;
background-color: rgba(256, 256, 256,.25);
}
.nav>li {float:right;}
li{
list-style-type: none;
padding-top: 10px;
}
li a {
display: block;
color: rgb(0,0,0);
padding: 5px 16px 15px 16px;
font-family: 'Abel', sans-serif;
text-decoration: none;
}
li a:hover {
color: #000000;
padding-bottom: 10px;
border-bottom: 4px solid #000000;
}
li > .gallerydrop, .picturesdrop {
display: none;
}
li:hover > .gallerydrop {
display:block;
position: absolute;
padding: 0;
background-color: rgba(256, 256, 256,.25);
}
li:hover > .picturesdrop {
display:block;
position: absolute;
padding: 0;
background-color: rgba(256, 256, 256,.25);
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="nav.css" type="text/css">
<title>Nav</title>
<meta charset="utf-8">
</head>
<nav>
<ul class="nav">
<li>Contact</li>
<li>About Me</li>
<li>Details</li>
<li>Gallery
<ul class="gallerydrop">
<li>Videos</li>
<li>Pictures
<ul class="picturesdrop">
<li>Portraits</li>
<li>Landscapes</li>
<li>Abstract</li>
</ul>
</li>
</ul>
</li>
<li class="li">Home</li>
</ul>
</nav>
</html
Related
So, I was trying to make a dropdown menu, it works. But when I hover above it, it just appears in front of my Parents menu
I've tried some things like making an inline-block inside the parent's menu and still didn't work, I tried one thing that work that is adding a top: 100% code but it just didn't feel right cuz basically you add space to it and it just didn't feel right
Code:
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
nav {
/* this is a tag */
width: 100%;
height: 60px;
background-color: white;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
float: left;
padding: 0px 14px;
text-decoration: none;
text-align: center;
}
nav form {
float: left;
max-width: 100%;
height: 60px;
}
nav ul {
float: left;
text-align: center
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
padding: 0px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
background-color: #69696969
}
<nav id="navbar">
<form Name="" Method="" action="BUTTON TEST.html">
<input type="Image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
</form>
<ul>
<li>About
<ul>
<li>Expectations</li>
<li>FAQ</li>
<li>Laptop Program</li>
</ul>
</li>
<li>Why?
<ul>
<li>What?</li>
<li>Events & Activities</li>
<li>Meet The Grads</li>
</ul>
</li>
<li>Events
<ul>
<li>Opportunities</li>
<li>asd</li>
</ul>
</li>
<a href="" target="_blank">
<li>assd</li>
</a>
<a href="contact.php">
<li>Contact</li>
</a>
</ul>
</nav>
Just add top: 100% for the submenus:
nav ul li ul {
display: none;
position: absolute;
top: 100%;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
This will position it 100% from the top of the relative positioned parent - 100% referring to the height of that parent, so that it will start directly below it.
I have prepared a possible solution to your problem. With some modifications in the HTML, I added some separate classes to make the code more transparent.
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
.sub-menu {
position: absolute;
top: 55px;
flex-direction: column;
display: none;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
.about:hover .sub-menu {
left: 70px;
}
.why:hover .sub-menu {
left: 145px;
}
nav {
/* this is a tag */
width: 100%;
height: 60px;
background-color: white;
display: flex;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
float: left;
padding: 0px 14px;
text-decoration: none;
text-align: center;
}
nav form {
float: left;
max-width: 100%;
height: 60px;
}
nav ul {
float: left;
text-align: center
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li {
float: left;
list-style: none;
}
nav ul li a {
display: block;
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
padding: 0px 14px;
text-decoration: none;
}
nav ul li:hover ul {
display: flex;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
background-color: #69696969
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<nav id="navbar">
<form Name="" Method="" action="BUTTON TEST.html">
<input type="Image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
</form>
<ul class="main-menu">
<li class="about">About
<ul class="sub-menu">
<li>Expectations</li>
<li>FAQ</li>
<li>Laptop Program</li>
</ul>
</li>
<li class="why">Why?
<ul class="sub-menu">
<li>What?</li>
<li>Events & Activities</li>
<li>Meet The Grads</li>
</ul>
</li>
<li>Events
<ul class="sub-menu">
<li>Opportunities</li>
<li>asd</li>
</ul>
</li>
<a href="" target="_blank">
<li>assd</li>
</a>
<a href="contact.php">
<li>Contact</li>
</a>
</ul>
</nav>
</body>
</html>
There are some points:
In HTML nested tag you should close the inner tag before the outer tag
<li> <a> link tag </a> </li>
Position property can't be used with float. if an element was floated, can't take position and left , top , bottom , right properties.
The better way for layout, is to use display: flex, a powerful feature with less code. (you can read this and this)
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
nav {
/* this is a tag */
height: 60px;
background-color: white;
display:flex;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
padding: 0px 14px;
text-decoration: none;
text-align: center;
display: block;
}
nav form {
max-width: 100%;
height: 60px;
}
nav ul {
display:flex;
list-style: none;
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
background-color: #69696969
}
<nav id="navbar">
<form name="" method="" action="BUTTON TEST.html">
<input
type="Image"
name="IB1"
src="gradient-coding-logo-template_23-2148809439.jpg"
width="70"
height="60"
/>
</form>
<ul>
<li>
About
<ul>
<li>Expectations</li>
<li>FAQ</li>
<li>Laptop Program</li>
</ul>
</li>
<li>
Why?
<ul>
<li>What?</li>
<li>Events & Activities</li>
<li>Meet The Grads</li>
</ul>
</li>
<li>
Events
<ul>
<li>Opportunities</li>
<li>asd</li>
</ul>
</li>
<li>assd</li>
<li>Contact</li>
</ul>
</nav>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm stuck creating a navigation bar. I dont know why the text is out of the bar? Can anyone what is the problem?
* {
padding: 0;
margin: 0;
}
/*Menu*/
nav {
width: 100%;
height: 50px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
justify-content: space-between;
line-height: 50px;
width: 100px;
}
nav ul li a {
text-decoration: none;
color: #000;
display: block;
font-size: 16px;
font-family: Arvo;
}
nav ul li a:hover {
background-color: #27D05F;
transition: ease 1s;
color: #fff;
}
/*Dropdownmenu*/
nav ul li ul li {
display: none;
background-color: #fff;
width: 100px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul:hover ul li {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aunty Grocery</title>
<link rel="stylesheet" type="text/css" href="Style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<nav class="w3-container w3-center w3-animate-left">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Grocery
<ul>
<li>Vegetables</li>
<li>Meats</li>
<li>Fish</li>
<li>Fruits</li>
<li>Bakery</li>
<li>Others</li>
</ul>
</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<a class="Register" href="Register.html"><button>Sign Up</button></a>
<a class="Login" href="Login.html"><button>Sign In</button></a>
</body>
</html>
The issue is because the sub-level ul is making all the li taller. To keep the alignment to the top of the ul you need to set vertical-align: top:
nav ul li {
/* other properties... */
vertical-align: top;
}
* {
padding: 0;
margin: 0;
}
/*Menu*/
nav {
width: 100%;
height: 50px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
justify-content: space-between;
line-height: 50px;
width: 100px;
vertical-align: top;
}
nav ul li a {
text-decoration: none;
color: #000;
display: block;
font-size: 16px;
font-family: Arvo;
}
nav ul li a:hover {
background-color: #27D05F;
transition: ease 1s;
color: #fff;
}
/*Dropdownmenu*/
nav ul li ul li {
display: none;
background-color: #fff;
width: 100px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul:hover ul li {
display: block;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<nav class="w3-container w3-center w3-animate-left">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
Grocery
<ul>
<li>Vegetables</li>
<li>Meats</li>
<li>Fish</li>
<li>Fruits</li>
<li>Bakery</li>
<li>Others</li>
</ul>
</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<a class="Register" href="Register.html"><button>Sign Up</button></a>
<a class="Login" href="Login.html"><button>Sign In</button></a>
why is my drop down menu not working?
attaching image with the code.
what additions do i need to add in oder to make the dropdown menu work
the output is somewhat like this
exams
java c c++
the is not drop down menu.
html code :
<html>
<head>
<title> Website Design </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="nav">
<ul class="menu">
<li>Home</li>
<li>
Exams
<ul>
<li>
JAVA
</li>
<li>
C
</li>
<li>
C++
</li>
</ul>
</li>
<li>Login</li>
<li>Review</li>
<li>Contact</li>
</ul>
</div>
</header>
</body>
</html>
and css code
header{
background: rgba(0,0,100,0.5);
height: 100vh;
}
.nav{
background: rgba(0,0,0,.5);
height: 80px;
}
.menu{
float: right;
list-style: none;
margin: 20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border-bottom: 1px solid #fff;
}
.menu li a:hover{
background: coral;
border-bottom: 1px solid coral;
transition: .4s;
}
.
--> Please update following code in your existing file
header{
background: rgba(0,0,100,0.5);
height: 100vh;
}
.nav{
background: rgba(0,0,0,.5);
height: 80px;
}
.menu{
float: right;
list-style: none;
margin: 20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
position: relative;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border-bottom: 1px solid #fff;
}
.menu li a:hover{
background: coral;
border-bottom: 1px solid coral;
transition: .4s;
}
ul.menu ul {
visibility: hidden;
opacity: 0;
position: absolute;
padding: 0;
top: 26px;
transition: 0.3s ease-in-out;
}
ul.menu ul li {
margin-left: 0;
margin-right: 0;
width: 100%;
}
ul.menu > li:hover ul {
visibility: visible;
opacity: 1;
}
<html>
<head>
<title> Website Design </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="nav">
<ul class="menu">
<li>Home</li>
<li>
Exams
<ul>
<li>
JAVA
</li>
<li>
C
</li>
<li>
C++
</li>
</ul>
</li>
<li>Login</li>
<li>Review</li>
<li>Contact</li>
</ul>
</div>
</header>
</body>
</html>
You have not yet added the css code to make the dropdown work. Try this css code with your html to make it work.
header{
background: rgba(0,0,100,0.5);
height: 100vh;
}
.nav{
background: rgba(0,0,0,.5);
height: 80px;
}
.menu{
float: right;
list-style: none;
margin: 20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border-bottom: 1px solid #fff;
}
.menu li a:hover{
background: coral;
border-bottom: 1px solid coral;
transition: .4s;
}
.menu > li {
position: relative;
}
.menu > li > ul {
display: none;
position: absolute;
left: 0;
top: 100%;
background: red;
width: 120px;
}
.menu > li > ul > li {
display: block;
width: 100%;
}
.menu > li:hover > ul {
display: block;
}
So, I'm relatively new to HTML and CSS, and I have researched as to why my nav bar is not working plenty of times, but I can never seem to get it to work. Essentially, the items do not drop down when I hover over them, and if I change display: none; to display:block; they do not appear underneath the item either - they just drop down to the next line and display as inline. I would highly appreciate some constructive criticism so I can learn and continue to develop. Thank you ahead of time!
html, body {
margin: 0;
height: 100%;
width: 100%;
background-color: #0E0B16;
}
#wrap {
height: auto;
width: 100%;
border-bottom-style: solid;
border-bottom-color: #E7DFDD;
border-bottom-width: thin;
}
ul {
padding: 0;
margin: 0;
text-align: justify;
background: #0E0B16;
}
li {
list-style: none;
display: inline-block;
text-align: left;
}
a {
color: #E7DFDD;
text-decoration: none;
display: block;
margin-left: -4px;
padding: 16px 25px;
font-family: Verdana;
font-weight: bold;
border-right-style: solid;
border-right-color: #E7DFDD;
border-right-width: thin;
}
a:hover {
background-color: #E7DFDD;
color: #0E0B16;
}
a:active {
background-color: #E7DFDD;
color: #0E0B16;
}
.active {
background-color: #E7DFDD;
color: #0E0B16;
}
.dropdown-content {
display: none;
}
.dropdown:hover .dropdown-content{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Witcher's World</title>
<link rel="stylesheet" href="witcher.style.css"/>
<meta charset="UTF-8">
<header>
<nav id="wrap">
<ul>
<li><a class ="active" href="witcher.index.html">Home</a></li>
<li>Witcher Lore</li>
<li><a class="dropdown" href="#">Glossary</a></li>
<ul class="dropdown-content">
<li>Characters</li>
<li>Bestiary</li>
</ul>
<li><a class="dropdown" href="#">Weapons</a></li>
<ul class="dropdown-content">
<li>Swords</li>
<!--<ul class="dropdown-content">
<li>Steel Swords</li>
<li>Silver Swords</li>
</ul-->
<li>Signs</li>
</ul>
<li>Books</li>
</ul>
</nav>
</header>
</head>
<body>
<footer>
</footer>
</body>
</html>
Your dropdown class does not cover dropdown-content also you have to give position:absolute to your dropdown-content.
html, body {
margin: 0;
height: 100%;
width: 100%;
background-color: #0E0B16;
}
#wrap {
height: auto;
width: 100%;
border-bottom-style: solid;
border-bottom-color: #E7DFDD;
border-bottom-width: thin;
}
ul {
padding: 0;
margin: 0;
text-align: justify;
background: #0E0B16;
}
li {
list-style: none;
display: inline-block;
text-align: left;
}
a {
color: #E7DFDD;
text-decoration: none;
display: block;
margin-left: -4px;
padding: 16px 25px;
font-family: Verdana;
font-weight: bold;
border-right-style: solid;
border-right-color: #E7DFDD;
border-right-width: thin;
}
a:hover {
background-color: #E7DFDD;
color: #0E0B16;
}
a:active {
background-color: #E7DFDD;
color: #0E0B16;
}
.active {
background-color: #E7DFDD;
color: #0E0B16;
}
.dropdown-content {
display: none;
}
.dropdown:hover .dropdown-content{
display: block;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Witcher's World</title>
<link rel="stylesheet" href="witcher.style.css"/>
<meta charset="UTF-8">
</head>
<body>
<header>
<nav id="wrap">
<ul>
<li><a class ="active" href="witcher.index.html">Home</a></li>
<li>Witcher Lore</li>
<li class="dropdown">Glossary
<ul class="dropdown-content">
<li>Characters</li>
<li>Bestiary</li>
</ul>
</li>
<li class="dropdown">Weapons
<ul class="dropdown-content">
<li>Swords</li>
<!--<ul class="dropdown-content">
<li>Steel Swords</li>
<li>Silver Swords</li>
</ul-->
<li>Signs</li>
</ul>
</li>
<li>Books</li>
</ul>
</nav>
</header>
<footer>
</footer>
</body>
</html>
.dropdown:hover .dropdown-content won't work because .dropdown-content isn't a child of .dropdown. Doesn't need to be, either, because .dropdown is an a and the sub-menus have a's, and you can't have an a in an a. Put it adjacent to .dropdown and trigger :hover on the parent li.
And the reason the links are displaying inline is because you styled all li as inline-block. I updated that to be ul:not(.dropdown-content) li.
And you probably want to use absolute positioning on the sub-menu so it doesn't impact the parent element or overall header when it's displayed. That also requires adding position: relative to the parent li so it's positioned correctly.
html, body {
margin: 0;
height: 100%;
width: 100%;
background-color: #0E0B16;
}
#wrap {
height: auto;
width: 100%;
border-bottom-style: solid;
border-bottom-color: #E7DFDD;
border-bottom-width: thin;
}
ul {
padding: 0;
margin: 0;
text-align: justify;
background: #0E0B16;
}
ul:not(.dropdown-content) li {
list-style: none;
display: inline-block;
text-align: left;
position: relative;
}
a {
color: #E7DFDD;
text-decoration: none;
display: block;
margin-left: -4px;
padding: 16px 25px;
font-family: Verdana;
font-weight: bold;
border-right-style: solid;
border-right-color: #E7DFDD;
border-right-width: thin;
}
a:hover {
background-color: #E7DFDD;
color: #0E0B16;
}
a:active {
background-color: #E7DFDD;
color: #0E0B16;
}
.active {
background-color: #E7DFDD;
color: #0E0B16;
}
.dropdown-content {
display: none;
}
li:hover .dropdown-content{
display: block;
position: absolute;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Witcher's World</title>
<link rel="stylesheet" href="witcher.style.css"/>
<meta charset="UTF-8">
</head>
<body>
<header>
<nav id="wrap">
<ul>
<li><a class ="active" href="witcher.index.html">Home</a></li>
<li>Witcher Lore</li>
<li><a class="dropdown" href="#">Glossary</a>
<ul class="dropdown-content">
<li>Characters</li>
<li>Bestiary</li>
</ul></li>
<li><a class="dropdown" href="#">Weapons</a>
<ul class="dropdown-content">
<li>Swords</li>
<!--<ul class="dropdown-content">
<li>Steel Swords</li>
<li>Silver Swords</li>
</ul-->
<li>Signs</li>
</ul></li>
<li>Books</li>
</ul>
</nav>
</header>
<footer>
</footer>
</body>
</html>
Add this to your code
.dropdown{
position:relative;
}
.dropdown-content {
display: none;
position: absolute;
top:100%;
}
.dropdown:hover .dropdown-content{
display: block;
}
I have created a simple navigation that seem to work ok. There is one thing that is really bugging me though. On the last dropdown item i would like some space after the border but cant quite work out how to get it. I have tried putting some bottom padding on the dropdown li but it doesnt seem to work.
Really appreciate any advice to where i am going wrong.
https://jsfiddle.net/rufusbear/hv8gwwg9/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fennes Clay</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script src="https://use.fontawesome.com/9c815a24d9.js"></script>
<style>
.nav-wrap {
max-width: 700px;
margin: 0 auto;
background-color: #718373;
height: 80px;
text-transform: uppercase;
}
.dropdown {
display: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
}
.dropdown li a {
width: 110px;
height: 40px;
line-height: 40px;
margin: 0 auto;
padding: 5px 10px;
}
.nav-list {
margin: 0;
padding: 0;
}
.nav-list li {
position: relative;
list-style: none;
float: left;
width: 150px;
line-height: 80px;
text-align: center;
background-color: #718373;
}
.nav-list li a {
text-decoration: none;
color: white;
display: block;
}
.nav-list li:hover>.dropdown {
display: block;
}
.dropdown li a:hover {
border: 2px solid white;
}
</style>
</head>
<body>
<nav>
<div class="nav-wrap">
<ul class="nav-list">
<li>about
<ul class="dropdown">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</li>
<li>about</li>
<li>about</li>
<li>about</li>
</ul>
</div>
</nav>
</body>
</html>
Is this what you're after?
.dropdown li:last-child a {
margin-bottom: 10px;
}
You can add
background-color: #718373;
padding-bottom: 20px;
to .dropdown element.
To prevent links from shaiking on hover replace
.dropdown li a:hover {
border: 2px solid white;
}
with
.dropdown li a:hover {
outline: 2px solid white;
outline-offset: -2px;
}
.nav-wrap {
max-width: 700px;
margin: 0 auto;
background-color: #718373;
height: 80px;
text-transform: uppercase;
}
.dropdown {
display: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
background-color: #718373;
padding-bottom: 20px;
}
.dropdown li a {
width: 110px;
height: 40px;
line-height: 40px;
margin: 0 auto;
padding: 5px 10px;
}
.nav-list {
margin: 0;
padding: 0;
}
.nav-list li {
position: relative;
list-style: none;
float: left;
width: 150px;
line-height: 80px;
text-align: center;
background-color: #718373;
}
.nav-list li a {
text-decoration: none;
color: white;
display: block;
}
.nav-list li:hover>.dropdown {
display: block;
}
.dropdown li a:hover {
outline: 2px solid white;
outline-offset: -2px;
}
<nav>
<div class="nav-wrap">
<ul class="nav-list">
<li>about
<ul class="dropdown">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</li>
<li>about</li>
<li>about</li>
</ul>
</div>
</nav>
Add this rule:
.nav-list li ul li:last-child {
padding-bottom: 15px;
}
It adds padding-bottom only to the last li of each nested ul inside the .nav-list (Adjust the px amount as you need it)
Here it is in a fiddle: https://jsfiddle.net/8w67f9y7/2/
check with this one
https://jsfiddle.net/rufusbear/hv8gwwg9/
margin-top: 30px;