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;
Related
I have a navbar with typical things like home, contact, general, etc. The color of "general" is white and background-color transparent. When I hover on it, it is #333 and the background-color becomes white. "General" has a dropdown menu. When I hover on the dropdown-content, "general" will change back to white color, but I want that it remains the color #333, when i hover on the dropdown-content. I have tried to put it in a div and other things but i didnt work. What must I change in my code?
This is my code:
<ul class="top-level-menu">
<li>Contact</li>
<li>Gallery</li>
<li>Travel</li>
<li>
General
<ul class="second-level-menu">
<li>People</li>
<li>Defense</li>
<li>
Cities
<ul class="third-level-menu">
<li>Moscow</li>
<li>Vladivostok</li>
<li>Kazan</li>
<li>Sochi</li>
</ul>
</li>
<li>History</li>
<li>Demographics</li>
<li>Geographics</li>
<li>Culture</li>
</ul>
</li>
<li>Home</li>
</ul>
And css:
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 30px;
background: #fff;
}
.third-level-menu>li:hover {
background: #f1f1f1;
}
.second-level-menu {
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu>li {
position: relative;
height: 30px;
background: #fff;
}
.second-level-menu>li a {
color: #333;
float: left;
padding-left: 23px;
}
.second-level-menu>li:hover {
background: #f1f1f1;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu>li {
position: relative;
float: right;
height: 30px;
width: 100px;
background: transparent;
margin-top: 20px;
text-align: center;
font-size: 14px;
}
.top-level-menu>li:hover {
background: #fff;
}
.top-level-menu li:hover>ul {
display: inline;
}
.top-level-menu a
{
color: #fff;
text-decoration: none;
display: block;
line-height: 30px;
}
.top-level-menu a:hover {
color: #333;
}
body {
background: rgb(15, 14, 14);
}
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li {
height: 30px;
background: #fff;
}
.third-level-menu > li:hover {
background: #f1f1f1;
}
.second-level-menu {
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li {
position: relative;
height: 30px;
background: #fff;
}
.second-level-menu > li a {
color: #333;
float: left;
padding-left: 23px;
}
.second-level-menu > li:hover {
background: #f1f1f1;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu > li {
position: relative;
float: right;
height: 30px;
width: 100px;
background: transparent;
margin-top: 20px;
text-align: center;
font-size: 14px;
}
.top-level-menu > li:hover {
background: #fff;
}
.top-level-menu li:hover > ul {
display: inline;
}
.top-level-menu a {
color: #fff;
text-decoration: none;
display: block;
line-height: 30px;
}
.top-level-menu a:hover {
color: #333;
}
/* class style add */
.dropdown:hover a {
color: #333;
}
/* end */
<!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>
</head>
<body>
<ul class="top-level-menu">
<li>Contact</li>
<li>Gallery</li>
<li>Travel</li>
<!-- dropdown class added -->
<li class="dropdown">
<!-- end -->
General
<ul class="second-level-menu dropdown-content">
<li>People</li>
<li>Defense</li>
<li>
Cities
<ul class="third-level-menu">
<li>Moscow</li>
<li>Vladivostok</li>
<li>Kazan</li>
<li>Sochi</li>
</ul>
</li>
<li>History</li>
<li>Demographics</li>
<li>Geographics</li>
<li>Culture</li>
</ul>
</li>
<li>Home</li>
</ul>
</body>
</html>
I am a developer in training and I was trying to get this code to show a drop down menu when hovering over the list items "Music" and "Podcasts". But I can't seem to get it to work, what am I doing wrong?
I found some people doing the same thing, but my list never shows, which is logical of course because of the display: none; but I would like it to show after hovering over Music or Podcasts. Sorry, but I am still learning if it is messy/bad.
body {
background-image: url(../images/top.png), url(../images/achtergrond.png);
background-size: cover ;
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
img {
width: 1000px;
height: 400px;
}
.navbar{
margin: auto;
width: 50%;
padding: 10px;
}
.list{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
list-style: none;
font-size: 35px;
}
li:hover .sublist-music a {
display: block;
color: black;
}
li{
background-color: white;
border-radius: 30%;
}
li:hover{
background-color: #A1CCB6;
}
.sublist-music{
display: none;
}
.sublist-podcasts{
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/test.css">
<title>banana split</title>
<link href="https://fonts.googleapis.com/css2?family=Neucha&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="list">
<li> <a>Home</a></li>
<li> <a>Music</a></li>
<div class="sublist-music">
Shows
Live
</div>
<li> <a>Podcasts</a></li>
<div class="sublist-podcasts">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindfull</li>
</div>
<li> <a>Live</a></li>
<li> <a>About us</a></li>
<li> <a>Contact</a></li>
</div>
</div>
</body>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Music
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Shows
Live
</div>
</div>
Live
About us
</div>
Reference link : https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
body {
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
li {
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
border-radius: 30%;
background-color: white;
}
li a {
color: #000;
}
li:hover,
li:focus-within {
background-color: #A1CCB6;
cursor: pointer;
}
li:focus-within a {
outline: none;
}
ul li ul {
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block
}
ul li ul li {
clear: both;
width: 100%;
}
<nav role="navigation">
<ul>
<li>Home</li>
<li>Music
<ul class="dropdown">
<li>Shows</li>
<li>Live</li>
</ul>
</li>
<li>Podcast
<ul class="dropdown">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindful</li>
</ul>
</li>
<li>Live</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
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;
}
I have this code, and it doesn't work.
The sub-menu is not displaying when I hover over the main-menu.
The color changing seems to work but the second list is not showing under main menu on hover.
I can't find the problem...
Please help
<html>
<head>
<title>test</title>
<style type="text/css">
#navigationbar {
position: relative;
padding: 0;
margin: 0;
height: 30px;
width: 90%;
}
#navigationbar ul {
position: absolute;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
list-style-type: none;
background-color: #eeeeee;
overflow: visible;
}
#navigationbar ul>li {
display: block;
float: left;
height: auto;
width: 130px;
}
#navigationbar li>a {
display: block;
height: 100%;
padding: 0 0 0 10px;
width: 115px;
border-right: 1px black solid;
font-size: 17px;
font-family: sans-serif;
background-color: #eeeeee;
color: #5d5636;
line-height: 30px;
text-decoration: none;
}
#navigationbar ul ul {
margin-top: 2px;
display: none;
width: 160px;
height: auto;
background-color: #dddddd;
position: static;
border: 1px #666666 solid;
}
#navigationbar ul ul li {
position: relative;
float: none;
display: block;
height: 28px;
width: 100%;
border: none;
}
#navigationbar ul ul li>a {
height: 100%;
width: 96%;
padding: 0 0 0 4%;
line-height: 28px;
background-color: transparent;
border: none;
color: #000000;
font-size 12px;
font-style: normal;
}
#navigationbar li:hover > a {
color: #220000;
background-color: #eeeabe;
}
#navigationbar li:hover > ul {
display: block;
}
</style>
</head>
<body>
<h1>Nagłówek</h1>
<nav id="navigationbar">
<ul>
<li>Home</li>
<li>A</li>
<ul>
<li><a href=/a.html>aaaaa</a></li>
<li><a href=/b.html>bbbbb</a></li>
<li><a href=/c.html>ccccc</a></li>
</ul>
<li>B</li>
<ul>
<li><a href=/aa.html>AAAA</a></li>
<li><a href=/bb.html>BBBBB</a></li>
<li><a href=/cc.html>CCCCC</a></li>
</ul>
</ul>
</nav>
</body>
</html>
Thanks.
You had the closing tag for the li in the wrong place
<html>
<head>
<title>test</title>
<style type="text/css">
#navigationbar {
position: relative;
padding: 0;
margin: 0;
height: 30px;
width: 90%;
}
#navigationbar ul {
position: absolute;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
list-style-type: none;
background-color: #eeeeee;
overflow: visible;
}
#navigationbar ul>li {
display: block;
float: left;
height: auto;
width: 130px;
}
#navigationbar li>a {
display: block;
height: 100%;
padding: 0 0 0 10px;
width: 115px;
border-right: 1px black solid;
font-size: 17px;
font-family: sans-serif;
background-color: #eeeeee;
color: #5d5636;
line-height: 30px;
text-decoration: none;
}
#navigationbar ul ul {
margin-top: 2px;
display: none;
width: 160px;
height: auto;
background-color: #dddddd;
border: 1px #666666 solid;
}
#navigationbar ul ul li {
position: relative;
float: none;
display: block;
height: 28px;
width: 100%;
border: none;
}
#navigationbar ul ul li>a {
height: 100%;
width: 96%;
padding: 0 0 0 4%;
line-height: 28px;
background-color: transparent;
border: none;
color: #000000;
font-size 12px;
font-style: normal;
}
#navigationbar li:hover > a {
color: #220000;
background-color: #eeeabe;
}
#navigationbar li:hover > ul {
display: block;
}
</style>
</head>
<body>
<h1>Nagłówek</h1>
<nav id="navigationbar">
<ul>
<li>Home
</li>
<li>A
<ul>
<li><a href=/a.html>aaaaa</a>
</li>
<li><a href=/b.html>bbbbb</a>
</li>
<li><a href=/c.html>ccccc</a>
</li>
</ul>
</li>
<li>B
<ul>
<li><a href=/aa.html>AAAA</a>
</li>
<li><a href=/bb.html>BBBBB</a>
</li>
<li><a href=/cc.html>CCCCC</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
I am new in CSS and developing a dropdown menu. But when I add drop down list into main list it floats left. But I want float towards bottom Like thisCan anyone please help me that how to make list which drops Down
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body
{
margin: 0;}
#Header
{
position: fixed;
border: 1px solid black;
width: 100%;
height: 150px;
margin: 0%;
}
#logo
{
position: absolute;
border: 1px solid black;
width: 20%;
height: 150px;
margin: 0%;
}
#nav
{
position: absolute;
border: 1px solid black;
width: 79.5%;
height: 50px;
top: 65%;
margin-left: 20.2%;
background: transparent;
}
#nav ul
{
margin: 0;
padding: 0;
}
#nav ul li
{
list-style: none;
position:relative;
float: left;
margin:5px;
}
#nav ul li a{
text-decoration: none;
display: block;
padding: 10px 20px;
color: black;
font-size: 120%;
}
a:hover {
background: gray;
color:white;
height: 30px;
}
#subList
{
margin: 0;
padding: 0;
}
#subList li
{
list-style: none;
position:absolute;
margin:5px;
}
/* #nav ul li ul
{
display: block;
margin: 0px;
padding: 0px;
}
#nav ul li ul li
{
list-style: none;
position:relative;
float: bottom;
}
#nav ul li ul li a
{
position:absolute;
dispay:block;
color: black;
font-size: 120%;
}
/* #nav ul li:hover>ul
{
display: block;
}
*/
</style>
</head>
<body>
<div id="Header">
<div id="logo"></div>
<div id="nav">
<ul>
<li>Home</li>
<li>News
<ul id="subList">
<li>news1</li>
<li>news2</li>
<li>news3</li>
<li>news4</li>
</ul>
</li>
<li>About us</li>
<li>Sign in</li>
</ul>
</div>
</div>
</body>
</html>
You need to define specificity for direct child of nav. In your case this is setting all the ul li to float left.
try this.
#nav > ul > li
{
list-style: none;
position:relative;
float: left;
margin:5px;
}
Hope this help you!
This should get you started.
#nav {
border: 1px solid black;
width: 79.5%;
height: 50px;
top: 65%;
margin-left: 20.2%;
background: transparent;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav ul li {
list-style: none;
position: relative;
float: left;
margin: 5px;
}
#nav ul li a {
text-decoration: none;
display: block;
padding: 10px 20px;
color: black;
font-size: 120%;
}
a:hover {
background: gray;
color: white;
}
#subList {
margin: 0;
padding: 0;
position: absolute;
display: none;
background: #fff;
border: 1px solid #000;
}
#subList li {
list-style: none;
margin: 5px;
}
#nav ul li:hover > #subList {
display: block;
left: 0;
}
<div id="nav">
<ul>
<li>Home
</li>
<li>News
<ul id="subList">
<li>news1
</li>
<li>news2
</li>
<li>news3
</li>
<li>news4
</li>
</ul>
</li>
<li>About us
</li>
<li>Sign in
</li>
</ul>
</div>