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>
Related
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 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>
I have a problem with the dropdown menu when I hover in services menu. Here's the problem (on Codepen)
*{
margin: 0;
padding: 0;
}
body{
margin: 0 auto;
width: 800px;
}
a{
font-family: 'Alegreya Sans Regular';
}
#navigation{
height: 113px;
width: 800px;
background-color: #17384D;
}
.weblogo{
margin-top: 34px;
margin-left: 20px;
}
nav{
float: right;
margin-top: 60px;
margin-right: 60px;
}
nav ul ul{
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li{
display: inline-block;
padding-left: 45px;
}
nav ul li a{
text-decoration: none;
list-style: none;
color: #FAD46B;
font-size: 1.3em;
}
.active{
border-bottom: 2px solid #FF972C;
padding-left: 0px;
}
<div id="navigation">
<img class="weblogo"src="weblogo.png"></img>
<nav>
<ul>
<li class="active">home</li>
<li>work</li>
<li>about</li>
<li class="dropdown">services
<ul>
<li>Search</li>
<li>Search</li>
<li>Search</li>
<li>Search</li>
</ul>
</li>
<li>contact</li>
</ul>
</nav>
Better way to create sub menus is this
Replace your html with this
HTML
<div id="navigation">
<img class="weblogo"src="weblogo.png"></img>
<nav>
<ul>
<li class="active">home</li>
<li>work</li>
<li>about</li>
<li class="dropdown"><a onClick="toggleNavPanel('panel')" >services</a>
<div id="panel">
<div>
<ul>
<li>Search</li>
<li>Search</li>
<li>Search</li>
<li>Search</li>
</ul>
</div>
</div>
</li>
<li>contact</li>
</ul>
</nav>
And add this to your css
#panel {
position: absolute;
background-color: red;
height: 0;
width: 100px;
top: 120px;
transition: height 0.3s linear 0s;
overflow:hidden;
}
Add this javascript also
function toggleNavPanel(x) {
var panel = document.getElementById(x), maxH="300px";
if(panel.style.height == maxH) {
panel.style.height = "0px";
}else {
panel.style.height = maxH;
}
}
Also remove this from your css
nav ul li:hover > ul {
display: block;
}
I've been trying to work on this with no success, for some reason the sub list is just not showing up! I've tried: nav > ul > li:hover > ul{} but that seems to break functionality of the code. I'm sure this is a pretty simple issue I'm having.
nav > ul {
list-style: none;
}
nav > ul > li {
padding: 20px;
float: left;
}
nav > ul > li {
background-color: #fff;
}
nav > ul > ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
}
nav > ul > ul > li {
float: none;
width: 200px;
}
nav > ul > li:hover {
color: #4169E1;
display: block;
visibility: visible;
}
body {
background: black;
}
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Secure</li>
<ul>
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
<li>Mad</li>
</ul>
</nav>
Simplify your selectors (nav ul ul) is fine
Make the parent li's position: relative so that the position: absolute dropdowns are positioned in relation to them. Use an appropriate top value
In your example, visibility: visible is not doing anything. display: none and display: block are used to hide / show
Nest your lists properly. This is the correct way:
<ul>
<li>Top Menu Item
<ul>
<li>Sub-menu Item</li>
</ul>
</li>
</ul>
Read more: Nested lists on w3.org
CSS / HTML / Demo
* {
margin: 0;
padding: 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
padding: 20px;
float: left;
background-color: #fff;
position: relative;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
}
nav ul ul li {
width: 200px;
background: #FFF;
padding: 10px;
}
nav ul li:hover ul {
color: #4169E1;
display: block;
}
body {
background: black;
}
<nav>
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>This is us!</li>
<li>This is us!</li>
<li>This is us!</li>
<li>This is us!</li>
</ul>
</li>
<li>Secure
<ul>
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
</li>
<li>Mad</li>
</ul>
</nav>
To Point out one of the Mistakes you have
<ul>
<li>Home</li>
<li>About Us</li>
<li>Secure
<ul> **--> this should be inside li**
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
</li>
<li>Mad</li>
</ul>
and your css
add this
nav > ul > li:hover > ul{
display: block;
opacity: 1;
visibility: visible;
}
check the fiddle
http://jsfiddle.net/ruchan/4fk6y2wu/
Use some more css3 power!
See Demo here
See Fullscreen
<nav>
<ul id="menu">
<li class="category top_level"><a class="selected" href="#">Home</a></li>
<li class="category top_level">About</li>
<li class="category top_level">Secure
<ul class="dropdown">
<li class="item">How secure are we?</li>
<li class="item">We are not secure enough!!</li>
</ul>
</li>
<li class="category top_level last">Mad
</li>
</ul>
</nav>
css
body {
font-family:'Montserrat', sans-serif;
background:#000;
}
ul {
list-style-type: none;
}
#menu a {
text-decoration: none;
white-space: nowrap;
color: #222;
background-color: #fff;
}
#menu li.top_level {
vertical-align: top;
zoom: 1;
display: block;
float: left;
width: 16.5%;
margin-right: 0.2%;
position: relative;
text-align:center;
}
#menu li.last {
margin-right: 0px;
}
#menu .dropdown {
float: none;
z-index: 100;
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
}
#menu .category:hover .dropdown, #menu .category:focus .dropdown {
height:auto;
}
#menu .item a, #menu .category a, #menu .category a:visited, #menu .item a:visited {
line-height:2em;
display:block;
padding:.6em;
border-top: #ffffff 2px solid;
}
#menu .item a:hover, #menu .category a:hover, #menu .item a:focus, #menu .category a:focus {
background:#007dac;
-webkit-transition: background-color 940ms;
-moz-transition: background-color 940ms;
}
#menu a.selected {
color: #ffffff;
background-color: #007dac;
}
I am trying to figure out why the third level of my drop down menu is not stretching to the width of the text that is contained within it. So far the text just automatically indents to the next line but all the other li's do not do this and are on a single line. Can someone help me find out why this is happening? Thank you!
here is the example I have made so far: http://themedwebdesign.com/salmon/
here is the html
<header>
<div class="container clearfix">
<div id="logo"><img src="./img/salmon-logo.png" alt=""></div>
<nav>
<ul>
<li>Home</li>
<li>Pages
<ul>
<li>About</li>
<li>Services</li>
<li>Meet the Team</li>
</ul>
</li>
<li>Features
<ul>
<li>Feature</li>
<li>Level 3
<ul>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio
<li>Blog
<ul>
<li>Single</li>
<li>Large</li>
<li>Medium</li>
<li>Small</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
and here is the css, I apologize its made using sass. If the compiled css file is needed then I will post it.
nav {
float: right;
ul {
list-style: none;
position: relative;
display: inline-block;
margin: 0;
li {
float: left;
text-transform: uppercase;
font-weight: 300;
a {
text-decoration: none;
color: inherit;
padding: 15px 25px;
display: block;
}
&:hover {
color: $colorSite;
}
&:hover > ul {
display: block;
}
}
&:after {
content: "";
clear: both;
display: block;
}
ul {
position: absolute;
top: 100%;
display: none;
padding: 0;
margin: 0;
border: 1px solid $colorSite;
li {
float: none;
position: relative;
a {
color: $colorDark;
text-decoration: none;
display: block;
padding: 15px 25px;
background-color: #fff;
&:hover {
color: #fff;
background-color: $colorSite;
}
}
}
ul {
position: absolute;
left: 100%;
top: 0;
}
}
}
}
If you want to stretch and don't want the 2nd line, you can simply do this in your css
header nav ul ul li a { white-space: nowrap; }
Just make width: 100%; under css header nav ul ul ul
white-space: nowrap; will prevent the text from wrapping.
header nav ul ul li {
float: none;
position: relative;
white-space: nowrap;
}