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>
Related
I'm making a menu. I want to justify the last 3 items of the menu to the right.
I want to do as in this picture:
I was able to do it like this:
I could not justify the items written Item 1, Item 2 and Item 3 to the right. How can I do that? Thank you in advance for your help.
body {
font-family: Poppins;
background-color: #F5F6F6;
}
.navbar ul {
display: flex;
}
.container {
width: 70%;
margin: 0 auto;
}
.top-space {
height: 25px;
}
.navbar ul li {
display: inline;
margin-left: 30px;
}
.navbar ul li:first-child {
margin-left: 0px;
}
.navbar ul li a {
text-decoration: none;
line-height: 50px;
color: #979797;
}
.navbar ul li a:hover {
color: #222429;
}
.navbar ul li img {
height: 50px;
}
.navbar ul li .dropbtn {
color: #979797;
line-height: 50px;
font-size: 16px;
border: none;
}
.navbar ul li .dropdown .dropdown-content {
display: none;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.navbar ul li .dropdown .dropdown-content a {
color: black;
padding: 0px 12px;
text-decoration: none;
display: block;
margin-left: 0px;
}
.navbar ul li .dropdown .dropdown-content a:hover {
background-color: #ddd;
}
.navbar ul li .dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
color: #222429;
}
.arrow {
border: solid #979797;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-left: 6px;
}
.arrow:hover {
border: solid #222429;
border-width: 0 3px 3px 0;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.down:hover {
transform: rotate(224deg);
-webkit-transform: rotate(224deg);
}
.navbar ul li a:last-child(3) {
float: right;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="./style/reset.css">
<link rel="stylesheet" href="./style/style.css">
</head>
<body>
<div class="container">
<div class="top-space"></div>
<div class="navbar">
<ul>
<li>
<img src="./img/logo.png">
</li>
<li>Vectors</li>
<li>Photos</li>
<li>PSD</li>
<li>Video</li>
<li>
<div class="dropdown">
<button class="dropbtn">More <i class="arrow down"></i></button>
<div class="dropdown-content">
Item 1
Item 2
Item 3
</div>
</div>
</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</body>
</html>
Add this rule:
.navbar > ul > li:nth-last-child(3) {
margin-left: auto;
}
By applying margin-left: auto; it determines that the third-last li and all following flex items are moved as far right as possible inside the flex container.
(note: You have to switch to "full page" view here in the snippet window to see the result properly)
body {
font-family: Poppins;
background-color: #F5F6F6;
}
.navbar ul {
display: flex;
justify-content: space-between;
}
.container {
width: 70%;
margin: 0 auto;
}
.top-space {
height: 25px;
}
.navbar ul li {
display: inline;
margin-left: 30px;
}
.navbar ul li:first-child {
margin-left: 0px;
}
.navbar ul li a {
text-decoration: none;
line-height: 50px;
color: #979797;
}
.navbar ul li a:hover {
color: #222429;
}
.navbar ul li img {
height: 50px;
}
.navbar ul li .dropbtn {
color: #979797;
line-height: 50px;
font-size: 16px;
border: none;
}
.navbar ul li .dropdown .dropdown-content {
display: none;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.navbar ul li .dropdown .dropdown-content a {
color: black;
padding: 0px 12px;
text-decoration: none;
display: block;
margin-left: 0px;
}
.navbar ul li .dropdown .dropdown-content a:hover {
background-color: #ddd;
}
.navbar ul li .dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
color: #222429;
}
.arrow {
border: solid #979797;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-left: 6px;
}
.arrow:hover {
border: solid #222429;
border-width: 0 3px 3px 0;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.down:hover {
transform: rotate(224deg);
-webkit-transform: rotate(224deg);
}
.navbar > ul > li:nth-last-child(3) {
margin-left: auto;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="./style/reset.css">
<link rel="stylesheet" href="./style/style.css">
</head>
<body>
<div class="container">
<div class="top-space"></div>
<div class="navbar">
<ul>
<li>
<img src="./img/logo.png">
</li>
<li>Vectors</li>
<li>Photos</li>
<li>PSD</li>
<li>Video</li>
<li>
<div class="dropdown">
<button class="dropbtn">More <i class="arrow down"></i></button>
<div class="dropdown-content">
Item 1
Item 2
Item 3
</div>
</div>
</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</body>
</html>
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>
I am currently having issue in the Drop-Down Navigation menu created using HTML and CSS but later when i tried to apply padding between the list of a UL elements, I found that padding is different in all the elements for ex. The student box has 1px gap on all the sides (if you zoom in a little bit you will see it) and the rest of the list has more or less padding than the student one.
I attached the snippet for both the CSS and HTML code below:
* {
margin: 0;
padding: 0;
}
body {
background: #34495e;
}
nav {
width: 100%;
height: 60px;
background-color: rgba(49, 45, 45, 0.8);
text-align: center;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: sans-serif;
color: #222;
font-size: 20px;
padding: 18px 14px;
text-decoration: none;
}
nav ul li ul {
display: block;
position: absolute;
background-color: rgba(49, 45, 45, 0.8);
padding: 1px;
}
nav ul li ul li a {
padding: 8px 32px;
}
nav ul li a:hover {
background-color: #2ecc71;
}
nav ul li ul li a:hover {
background-color: #2ecc71;
}
<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Registration
<ul>
<li>Student</li>
<li>Bus</li>
<li>Route</li>
<li>Driver</li>
</ul>
</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</body>
</html>
Help would be greatly appreciated.
Please add width: 100%; to dropdown menu li. Like:
* {
margin: 0;
padding: 0;
}
body {
background: #34495e;
}
nav {
width: 100%;
height: 60px;
background-color: rgba(49, 45, 45, 0.8);
text-align: center;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: sans-serif;
color: #222;
font-size: 20px;
padding: 18px 14px;
text-decoration: none;
}
nav ul li ul {
display: block;
position: absolute;
background-color: rgba(49, 45, 45, 0.8);
padding: 1px;
}
nav ul li ul li {
width: 100%;
}
nav ul li ul li a {
padding: 8px 32px;
}
nav ul li a:hover {
background-color: #2ecc71;
}
nav ul li ul li a:hover {
background-color: #2ecc71;
}
<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Registration
<ul>
<li>Student</li>
<li>Bus</li>
<li>Route</li>
<li>Driver</li>
</ul>
</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</body>
</html>
remove padding from nav ul li ul and add width:100% for nav ul li ul li.
* {
margin: 0;
padding: 0;
}
body {
background: #34495e;
}
nav {
width: 100%;
height: 60px;
background-color: rgba(49, 45, 45, 0.8);
text-align: center;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: sans-serif;
color: #222;
font-size: 20px;
padding: 18px 14px;
text-decoration: none;
}
nav ul li ul {
display: block;
position: absolute;
background-color: rgba(49, 45, 45, 0.8);
}
nav ul li ul li {
width:100%;
}
nav ul li ul li a {
padding: 8px 32px;
}
nav ul li a:hover {
background-color: #2ecc71;
}
nav ul li ul li a:hover {
background-color: #2ecc71;
}
<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Registration
<ul>
<li>Student</li>
<li>Bus</li>
<li>Route</li>
<li>Driver</li>
</ul>
</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</body>
</html>
I'm wondering why (looking to achieve a drop down menu), my nav is not aligned horizontally, I've looked for every error I know, obviously didn't find anything. Can anyone help me to find the error? Or a way which I can use to make that nav aligned? :)
body {
background: #182530;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 100%;
box-shadow: 0px 1px 3px #000000;
background: #ffffff;
}
.menu {
width: 1000px;
margin: 0px auto;
}
.menu li {
margin: 0px;
list-style: none;
font-family: helvetica;
font-weight: bold;
color: #000000;
}
.menu a {
transition: all linear 0.15s;
color: #000000;
text-decoration: none;
}
.menu li:hover>a,
.menu .current-item>a {
text-decoration: none;
color: #be5b70;
}
menu>ul>li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu>ul>li>a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu>ul>li:hover>a,
.menu>ul>.current-item>a {
background: #2e2728;
}
.submenu {
width: 10%;
padding: 5px 0px;
position: absolute;
right: auto;
z-index: -1;
opacity: .0;
transition: opacity linear 0.15s;
background: #2e2728;
}
.menu li:hover .submenu {
z-index: 1;
opacity: 1;
}
.submenu li a {
display: block;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Test Page
</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<header>
<div class="menu-wrap">
<nav class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>
Projects
<ul class="submenu">
<li>WebIdentity</li>
<li>LogoDesign</li>
<li>Branding</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
How can I align my nav? Where is the error?
maybe you need
.menu > ul > li {
display: inline-block;
}
I fixed the code just by adding
nav ul li {
display:inline;
}
Here is a working fiddle
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