I'm trying to make the drop down menu stay top right with the image behind it if anyone could help would be greatly appreciated i tried using z-index but that didn't work out for me !
( using a img off google so u guys can see what im talking about! )
/* Drop Down Menu */
.navClass {
z-index: 999;
float: right;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>STREAMER // DESIGNER // YOUTUBER</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="bg-Main">
<img src="">
</nav>
<nav class="zeefro">
<img src="https://i.ytimg.com/vi/d-zKJCKsoWw/maxresdefault.jpg" text-align: center; >
</nav>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Either i did something wrong within the z-index unless i don't know whats happening :P
Kind regards
ZeFrolity
You need to put position: absolute to the div with background.
but
if a image is for background, you will usually want to use css background-image attribute instead of <img> tag.
you will also only need one nav tag only
/* Drop Down Menu */
.navClass {
z-index: 999;
float: right;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
position: absolute;
width:100%;
height:100%;
background-image: url("https://i.ytimg.com/vi/d-zKJCKsoWw/maxresdefault.jpg")
}
<!DOCTYPE html>
<html>
<head>
<title>STREAMER // DESIGNER // YOUTUBER</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="zeefro">
</div>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
You can absolutely position the menu instead. I also removed the margin from body.
/* Drop Down Menu */
body {
margin: 0;
}
.navClass {
position: absolute;
top: 0; right: 0;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>STREAMER // DESIGNER // YOUTUBER</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="bg-Main">
<img src="">
</nav>
<nav class="zeefro">
<img src="https://i.ytimg.com/vi/d-zKJCKsoWw/maxresdefault.jpg" text-align: center; >
</nav>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Related
CSS submenu no longer appearing
This was working and I did something to it, I dont know if it is a code problem or a css problem. Forgive me if the post is not formatted correctly,
this is my first time posting at Stackoverflow.
html
<nav class='navClass'>
<ul>
<li>Home</li>
<li>Things To Do</li>
<ul class="sub-menu">
<li>Shopping</li>
<li>Attractions</li>
<li>Outdoor Fun</li>
</ul>
</li>
<li>Places To Stay</li>
<li>Where to Eat</li>
<li>Contests</li>
<li>History</li>
<li>Events</li>
</ul>
</nav>
css
.navClass > ul{
background-color: #e56109;
color:#ffffff;
margin-top: 0px;
font-size: 20px;
font-family: Arial;
}
.navClass > ul li{
list-style-type: none;
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
position: relative;
}
.navClass > ul li:hover{
background-color: #212121;
position: relative;
}
ul.sub-menu{
position: absolute;
background-color: #e56109;
list-style-type: none;
width: 200px;
margin-left: -25px;
padding-bottom: 0px;
margin-top: 10px;
opacity: 0;
}
ul.sub-menu li{
padding-left: 25px;
padding-top: 5px;
font-size: 15px;
}
ul.sub-menu li:hover{
color: #ffffff;
display: block;
}
.navClass li:hover .sub-menu{
opacity: 1;
}
The sub-menu items need to drop down from the parent item. In this case, the "Things to Do" item.
There is a simple error in your HTML code.
You have closed the <li> tag before.
Use This:
<nav class='navClass'>
<ul>
<li>Home</li>
<li>Things To Do
<ul class="sub-menu">
<li>Shopping</li>
<li>Attractions</li>
<li>Outdoor Fun</li>
</ul>
</li>
<li>Places To Stay</li>
<li>Where to Eat</li>
<li>Contests</li>
<li>History</li>
<li>Events</li>
</ul>
</nav>
.navClass > ul{
background-color: #e56109;
color:#ffffff;
margin-top: 0px;
font-size: 20px;
font-family: Arial;
}
.dropdown {
position: relative;
display: inline-block;
}
.sub-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .sub-menu {
display: block;
background-color: #000000;
cursor: pointer;
}
.navClass > ul li:hover{
background-color: #212121;
position: relative;
}
<nav class='navClass'>
<ul class='t'>
<li class='b'>Home</li>
<span class="dropdown">
<li>Things To Do</li>
<span>
<ul class="sub-menu">
<li>Shopping</li>
<li>Attractions</li>
<li>Outdoor Fun</li>
</ul>
<li>Places To Stay</li>
<li>Where to Eat</li>
<li>Contests</li>
<li>History</li>
<li>Events</li>
</ul>
</nav>
I have a hoverable drop down menu where sub links are supposed to be open to the right. This code has remained the same for couple of years now and it's been working. Now I added a new sub link and the code broke.
This is menu's code:
#divMenu, ul, li, li li {
margin: 0;
padding: 0;
}
#divMenu {
width: 150px;
height: 27px;
}
#divMenu ul {
line-height: 50px;
}
#divMenu li {
list-style: none;
position: relative;
background: #cfcfcf;
font-size:20px;
}
#divMenu li li {
list-style: none;
position: relative;
background: #C0C0C0;
left: 148px;
top: -27px;
font-size:12px;
z-index: 999;
}
#divMenu ul li a {
width: 148px;
height: 40px;
display: block;
text-decoration: none;
text-align: center;
font-family: Georgia,'Times New Roman',serif;
color:#000000;
border:1px solid #2d2d2d;
}
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#divMenu ul li:hover ul {
visibility: visible;
}
#divMenu li:hover {
background-color: #C0C0C0;
}
#divMenu ul li:hover ul li a:hover {
background-color: #C0C0C0;
}
#divMenu a:hover {
font-weight: none;
}
<div id="divMenu">
<li>Etusivu</li>
<li>Kissala</li>
<li>Maine Coon</li>
<li>Herrat
<ul>
<li><p style="font-size:10px;margin:0px"><a href="hermann.php">Macawi
Mosi Double E´s Xahir</a></p></li>
<li>Vuorensinen Baloo</li>
</ul>
</li>
<li>Ladyt
<ul>
<li>Blackcurrant Sophia Loren</li>
<li>Bloomingtree QQ`Sweetest Taboo</li>
</ul>
</li>
<li>Kastraatit
<ul>
<li>Artsycats Lucy In The Sky</li>
</ul>
</li>
<li>Pennut
<ul>
<li>Varattavissa</li>
<li>Suunnitelmat</li>
<li>Pentuinfo</li>
</ul>
</li>
<li>Pentueet
<ul>
<li>Vintage Star -pentue</li>
<li>Old West -pentue</li>
</ul>
</li>
<li>Linkit</li>
<li>Yhteystiedot</li>
<li><a href="http://users4.smartgb.com/g/g.php?a=s&i=g44-74607-
71">Vieraskirja</a></li>
</ul>
</div>
So I've added one more sub-link there and even if I remove it, the code won't work.
Screen cap: the sub links are shown all the time - not with hovering
You have missed the starting <ul> tag after <div id="divMenu"> . Adding <ul> after <div id="divMenu"> shall fix it for you.
#divMenu, ul, li, li li {
margin: 0;
padding: 0;
}
#divMenu {
width: 150px;
height: 27px;
}
#divMenu ul {
line-height: 50px;
}
#divMenu li {
list-style: none;
position: relative;
background: #cfcfcf;
font-size:20px;
}
#divMenu li li {
list-style: none;
position: relative;
background: #C0C0C0;
left: 148px;
top: -27px;
font-size:12px;
z-index: 999;
}
#divMenu ul li a {
width: 148px;
height: 40px;
display: block;
text-decoration: none;
text-align: center;
font-family: Georgia,'Times New Roman',serif;
color:#000000;
border:1px solid #2d2d2d;
}
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#divMenu ul li:hover ul {
visibility: visible;
}
#divMenu li:hover {
background-color: #C0C0C0;
}
#divMenu ul li:hover ul li a:hover {
background-color: #C0C0C0;
}
#divMenu a:hover {
font-weight: none;
}
<div id="divMenu">
<ul>
<li>Etusivu</li>
<li>Kissala</li>
<li>Maine Coon</li>
<li>Herrat
<ul>
<li><p style="font-size:10px;margin:0px"><a href="hermann.php">Macawi
Mosi Double E´s Xahir</a></p></li>
<li>Vuorensinen Baloo</li>
</ul>
</li>
<li>Ladyt
<ul>
<li>Blackcurrant Sophia Loren</li>
<li>Bloomingtree QQ`Sweetest Taboo</li>
</ul>
</li>
<li>Kastraatit
<ul>
<li>Artsycats Lucy In The Sky</li>
</ul>
</li>
<li>Pennut
<ul>
<li>Varattavissa</li>
<li>Suunnitelmat</li>
<li>Pentuinfo</li>
</ul>
</li>
<li>Pentueet
<ul>
<li>Vintage Star -pentue</li>
<li>Old West -pentue</li>
</ul>
</li>
<li>Linkit</li>
<li>Yhteystiedot</li>
<li><a href="http://users4.smartgb.com/g/g.php?a=s&i=g44-74607-
71">Vieraskirja</a></li>
</ul>
</div>
you are just missing opening element ul at first. just change your html code to below :
<div id="divMenu">
<ul>
<li>Etusivu</li>
<li>Kissala</li>
<li>Maine Coon</li>
<li>
Herrat
<ul>
<li>
<p style="font-size:10px;margin:0px">
<a href="hermann.php">
Macawi
Mosi Double E´s Xahir
</a>
</p>
</li>
<li>Vuorensinen Baloo</li>
</ul>
</li>
<li>
Ladyt
<ul>
<li>Blackcurrant Sophia Loren</li>
<li>Bloomingtree QQ`Sweetest Taboo</li>
</ul>
</li>
<li>
Kastraatit
<ul>
<li>Artsycats Lucy In The Sky</li>
</ul>
</li>
<li>
Pennut
<ul>
<li>Varattavissa</li>
<li>Suunnitelmat</li>
<li>Pentuinfo</li>
</ul>
</li>
<li>
Pentueet
<ul>
<li>Vintage Star -pentue</li>
<li>Old West -pentue</li>
</ul>
</li>
<li>Linkit</li>
<li>Yhteystiedot</li>
<li>
<a href="http://users4.smartgb.com/g/g.php?a=s&i=g44-74607-
71">Vieraskirja</a>
</li>
</ul>
</div>
I'm trying to make a image go on top of the background image and both of those underneath the drop down menu.
(ALL IMAGES FOR THIS QUESTIONS ARE FROM GOOGLE SO U CAN SEE)
So in order [TOP TO BOTTOM]
Drop Down
Motorbike
Background
If anyone can help it would be greatly appreciated :D <3
/* Drop Down Menu */
body {
margin: 0;
}
.navClass {
padding-right: 5px;
position: absolute;
top: 0; right: 0;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
}
/* Background */
.bg-main {
z-index: -2;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>ZeFrolity</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="zeefro">
<img src="http://ambebajaj.com/app/webroot/img/uploads/Homeslider/1458125292bikeprod-img.png" width="100%" height="100%">
</nav>
<nav class="bg-Main">
<img src="http://www.suttontrust.com/wp-content/uploads/2016/08/Coding.jpg" width="100%" height="100%">
</nav>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
I thought z-index 1,2 and 3 would work cause they work like layers but they didn't if anyone knows the issue please let me know :D
As you can see the png img (the motorbike is on top of the page) and the tech jpg img is underneath it , i want the background of the motorbike to be the tech pretty much
Kind regards
Zefrolity
Negative z-index doesn't really work, but you can achieve the desired effect with some minimal reordering.
/* Drop Down Menu */
body {
margin: 0;
}
.navClass {
z-index: 3;
padding-right: 5px;
position: absolute;
top: 0; right: 0;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
position: absolute;
z-index: 2;
text-align: center;
}
/* Background */
.bg-main {
position:absolute;
z-index: 1;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>ZeFrolity</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
<nav class="zeefro">
<img src="http://ambebajaj.com/app/webroot/img/uploads/Homeslider/1458125292bikeprod-img.png" width="100%" height="100%">
</nav>
<nav class="bg-Main">
<img src="http://www.suttontrust.com/wp-content/uploads/2016/08/Coding.jpg" width="100%" height="100%">
</nav>
</body>
</html>
I'm a total newbie to CSS and HTML but I'm slowly constructing a website for uni. One thing that's bugging me: I can't figure out how to align the dropdown options. They're slightly off-centre, as shown in the screenshot
here. I'll paste the actual CSS below too (the preview doesn't work so don't bother with that. The code actually does work when run in Brackets, however):
ul {
list-style: none;
padding: 0px;
margin: 0px;
position: absolute;
padding-left: 0px;
}
ul li {
display: block;
position: relative;
float: left;
border:1px solid #ed85c4;
text-align:center;
}
li ul {
display: none;
}
ul li a {
display: block;
background: #ffeff8;
padding: 4px 20px 2px 25px;
text-decoration: none;
white-space: nowrap;
color: #ed85c4;
font-family: Luna;
font-size: 14px;
}
ul li a:hover {
background: #f1dae8;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #ffeff8;
color: #ed85c4
}
li:hover li a:hover {
background: #f1dae8;
color: #d771ae
}
li:hover li {
color:#d771ae
}
#drop-nav li ul li {
border-top: 0px;
}
ul {
display:table;
margin:auto;}
}
And here's the html (ignore that the links are currently empty):
<!DOCTYPE html>
<html>
<head><meta charset="UF-8">
<title>Happea Organic Restaurant</title>
<link href="style.css" rel ="stylesheet" type ="text/css">
</head>
<body>
<center><img src="images/eskimoo.png" width="600"></center>
<ul id="drop-nav">
<li>home</li>
<li>about
<ul>
<li>history</li>
<li>values</li>
<li>the truck</li>
<li>produce info.</li>
</ul>
</li>
<li>menus
<li>events
<ul>
<li>upcoming</li>
<li>past</li>
<li>booking/hiring</li>
</ul>
</li>
<li>find us
<ul>
<li>truck tracker</li>
<li>offices</li>
</ul>
</li>
<li>contact
<ul>
<li>message us</li>
<li>newsletter</li>
</ul>
</li>
<li>extras
<ul>
<li>gallery</li>
<li>competitions</li>
<li>mascot</li>
</ul>
</li>
</ul>
<br><br>
<c><img src="images/pad.png" width=1000></c>
</body>
<br><br><br>
</html>
Thanks in advance!
I'm trying to create a basic drop down menu. I'm having issues with the alignment. How can I get sub menu items to be directly underneath one another? For example, I am trying to get twitter, instagram, and facebook underneath "Social".
Thanks.
https://jsfiddle.net/xalxnder/ostaqgyk/
HTML
<body>
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
</body>
CSS
body {
background: #000000;
color: white;
}
.main-nav {
float: left;
}
.main-nav li {
font-size: 10px;
display: inline;
padding-right: 10px;
}
.main-nav .sub {
color: pink;
float: none;
z-index: -200;
}
//** .sub{display: none;
}
.dropdown:hover > .sub {
display: block;
position: absolute;
}
Here's the basics of it.
JSFiddle
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
ul {
list-style-type: none;
color: white;
}
.main-nav >li {
display: inline-block;
position: relative;
padding-right: 10px;
}
.sub {
position: absolute;
top: 100%;
left: 0;
color: pink;
/* display:none */ /* disabled for demo */
}
.dropdown:hover .sub {
display:block;
}
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
Since block-level elements take up their own line, this rule should hold you:
.sub li {
display: block;
}
Add to .main-nav .sub:
position: absolute;
padding: 0;
body {
background: #000000;
color: white;
}
.main-nav {
float: left;
}
.main-nav li {
font-size: 10px;
display: inline-block;
padding-right: 10px;
}
.main-nav .sub {
position: absolute;
padding: 0;
color: pink;
float: none;
z-index: -200;
}
.sub li {
display: block;
}
<body>
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
</body>