I'm building a website but for some reason my text align is not working. When i type it, it has no affect on it. I need some help. I want the content in my dropdown menu to be aligned to the left.
HTML Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Cycle - Home</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<header>
<div id="heading">
<img src="http://i.imgsafe.org/5d32881.png" id="image_symbol"></img>
</div>
<div id="navbar">
<ul id="main_navbar">
<li>
Home
</li>
<li class="dropdown">
<a class="dropbtn" style="z-index: -1">Rent</a>
<div class="dropdown-content">
Mountain Bikes
Hybrid Bikes
Road Bikes
City Bikes
</div>
</li>
<li>
FAQ's
</li>
<li>
About
</li>
</ul>
<ul id="sub_navbar">
<li>
Contact Us
</li>
<li>
Log In
</li>
<li>
Sign Up
</li>
</ul>
</div>
</header>
<section>
</section>
<footer>
</footer>
</body>
</html>
CSS Code:
body {
font-family: 'Open-sans', sans-serif, Helvetica;
text-align: center;
box-sizing: border-box;
}
#main_navbar {
text-align: center;
margin-top: 7px;
float: left;
padding-left: 0;
}
#main_navbar li, #sub_navbar li {
list-style-type: none;
display: inline-block;
min-width: 5em;
}
#main_navbar li a, #sub_navbar li a {
text-decoration: none;
font-size: 1em;
text-align: center;
color: black;
font-weight: normal;
}
#sub_navbar {
float: right;
position: relative;
right: 15px;
bottom: 10px;
}
.dropdown {
position: relative;
}
.dropdown:active {
color: #32673f;
}
.dropdown-content {
display: none;
min-width: 150px;
right: 50%;
transform: translate(90%,0);
position: absolute;
padding: 10px 0;
border-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
display: block;
font-weight: normal;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
background-color: #f9f9f9;
}
#image_symbol {
position: relative;
float: left;
bottom: 10px;
left: 0px;
}
header {
height: 40px;
width: 100%;
padding-right: 30px;
margin-left: -20px;
margin-top: -20px;
padding-top: 20px;
}
#sub_navbar li a:hover, #main_navbar li a:hover {
color: #FFCC00;
}
#sub_navbar li .active, #main_navbar li .active {
color: #09c;
}
header {
background-color: #f6f6f6;
}
Thank you in advance!
remove
text-align: center;
from here
#main_navbar li a, #sub_navbar li a {
text-decoration: none;
font-size: 1em;
text-align: center;
color: black;
font-weight: normal;
}
As #Violetluna said, remove text-align: center; from #main_navbar li a, #sub_navbar li a
#main_navbar li a, #sub_navbar li a {
text-decoration: none;
font-size: 1em;
text-align: center;
color: black;
font-weight: normal;
}
You don't have to put text-align: left; on it because it is the default property.
Also, the syntax of the <img> is incorrect, it is not :
<img src="http://i.imgsafe.org/5d32881.png" id="image_symbol"></img>
It is :
<img src="http://i.imgsafe.org/5d32881.png" id="image_symbol" />
See this fiddle
Related
There I am having a problem with the size of the link.
I have no idea how to make it smaller, and whenever I do. I end up making it move or disappear.
I followed the tutorial off of Danni Crossing, on how to make a drop-down menu. But the problem is... The button clicking range is way too big and I just want to make it smaller.
#font-face {
font-family: atlantis;
src: url(FONTS/AtlantisInternational-jen0.ttf);
}
#font-face {
font-family: WHY;
src: url(FONTS/seguisb.ttf);
}
.WOW {
font-family: WHY;
font-size: 55px;
position: relative; right: 255px; bottom: 20px;
}
.WHAT {
font-size: 55px;
position: relative; left: 555px; bottom: 20px;
}
.HOW {
font-family: atlantis;
color: black;
position: relative; left: 1369px; top: 60px;
}
/*font separation*/
*{
margin: 0;
padding: 0;
}
body {
background-color: #fbfbfb;
}
nav {
width: 100%;
height: 100px;
background-color: #b5a371;
}
nav p {
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 25px;
line-height: 55px;
float: left;
padding: 0px 20px;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style-type: none;
position: relative;
}
nav ul li a {
display: block;
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 20px;
padding: 22px 320px;
}
nav ul li ul {
display: none;
position: absolute; top: 99px;
background-color: #370d02;
padding: 10px;
border-radius: 9px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 150px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
padding: 8px 14px;
background-color: #98652c;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}
<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="style.css">
</head>
<body>
<nav>
<ul>
<li><a class="WOW" href="index.html">Home!</a><ul>
<li>ADD IMAGE</li>
<li>ADD IDLE </li>
<li>APPEARENCE</li>
<li>SETTINGS</li>
</ul>
</li>
<li><a class="WHAT" href="#">Log in</a></li>
<li><a class="HOW" href="#">Make a pocket!</a></li>
</ul>
</nav>
</body>
</html>
You need to change in .Nav change height: 60px; padding-bottom: 15px; and change line-height: 23px; in .ul li
change the .WOW and .WHAT
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 23px;
}
.WOW {
font-family: WHY;
font-size: 55px;
position: relative; right: 255px; bottom: 38px;
padding-top: 55px;
line-height: 95% !important;
}
.WHAT {
font-size: 55px;
position: relative;
left: 555px;
bottom: 31px;
padding-top: 65px;
line-height: 10% !important;
#font-face {
font-family: atlantis;
src: url(FONTS/AtlantisInternational-jen0.ttf);
}
#font-face {
font-family: WHY;
src: url(FONTS/seguisb.ttf);
}
.WOW {
font-family: WHY;
font-size: 55px;
position: relative; right: 255px; bottom: 38px;
padding-top: 55px;
line-height: 95% !important;
}
.WHAT {
font-size: 55px;
position: relative;
left: 555px;
bottom: 31px;
padding-top: 65px;
line-height: 10% !important;
}
.HOW {
font-family: atlantis;
color: black;
position: relative; left: 1369px; top: 60px;
}
/*font separation*/
*{
margin: 0;
padding: 0;
}
body {
background-color: #fbfbfb;
}
nav {
width: 100%;
height: 60px;
background-color: #b5a371;
padding-bottom: 15px;
}
nav p {
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 25px;
line-height: 55px;
float: left;
padding: 0px 20px;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style-type: none;
position: relative;
}
nav ul li a {
display: block;
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 20px;
padding: 22px 320px;
}
nav ul li ul {
display: none;
position: absolute; top: 99px;
background-color: #370d02;
padding: 10px;
border-radius: 9px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 150px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
padding: 8px 14px;
background-color: #98652c;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 23px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}
<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="style.css">
</head>
<body>
<nav>
<ul>
<li><a class="WOW" href="index.html">Home!</a><ul>
<li>ADD IMAGE</li>
<li>ADD IDLE </li>
<li>APPEARENCE</li>
<li>SETTINGS</li>
</ul>
</li>
<li><a class="WHAT" href="#">Log in</a></li>
<li><a class="HOW" href="#">Make a pocket!</a></li>
</ul>
</nav>
</body>
</html>
Removed position: relative; right: 255px; bottom: 20px; from .WOW .WHAT .HOW and padding: 22px 320px; from nav ul li a and now it looks nicer. The rest of your CSS is very messy though.
#font-face {
font-family: atlantis;
src: url(FONTS/AtlantisInternational-jen0.ttf);
}
#font-face {
font-family: WHY;
src: url(FONTS/seguisb.ttf);
}
.WOW {
font-family: WHY;
font-size: 55px;
}
.WHAT {
font-size: 55px;
}
.HOW {
font-family: atlantis;
color: black;
}
/*font separation*/
*{
margin: 0;
padding: 0;
}
body {
background-color: #fbfbfb;
}
nav {
width: 100%;
height: 100px;
background-color: #b5a371;
}
nav p {
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 25px;
line-height: 55px;
float: left;
padding: 0px 20px;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style-type: none;
position: relative;
}
nav ul li a {
display: block;
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 20px;
}
nav ul li ul {
display: none;
position: absolute; top: 99px;
background-color: #370d02;
padding: 10px;
border-radius: 9px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 150px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
padding: 8px 14px;
background-color: #98652c;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}
<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="style.css">
</head>
<body>
<nav>
<ul>
<li><a class="WOW" href="index.html">Home!</a><ul>
<li>ADD IMAGE</li>
<li>ADD IDLE </li>
<li>APPEARENCE</li>
<li>SETTINGS</li>
</ul>
</li>
<li><a class="WHAT" href="#">Log in</a></li>
<li><a class="HOW" href="#">Make a pocket!</a></li>
</ul>
</nav>
</body>
</html>
The dropdown menu appeared just fine. But the when hovering over the "Mobile" and "Email" link the submenu got shifted to the right. Here is a CodePen link
and below the code snippet :
div > ul > li {
list-style: none;
display: inline-block;
margin: 0 20px;
font-weight: bolder;
font-size: large;
font-variant: small-caps;
position: relative;
}
ul > li > a {
text-decoration: none;
color: white;
}
.sub-menu {
position: absolute;
display: none;
}
ul > li:hover > .sub-menu {
display: block;
background-color: white;
margin: 0px;
padding-left: 10px;
width: 400px;
height: 200px;
box-shadow: 0 0 10px;
border-radius: 10px;
list-style-type: none;
text-align: left;
}
.sub-menu > li > a {
color: orangered;
padding: 0 10px;
}
.sub-menu > li:hover > a:hover {
color: white;
background-color: orangered;
padding: 0 200px;
margin: 0 200px;
border-radius: 10px;
float: left;
}
ul > li > a:hover {
color: yellow;
}
div {
background-color: orangered;
height: 100px;
text-align: center;
line-height: 100px;
}
<div>
<ul>
<li>Home </li>
<li>Intro </li>
<li>
Contact
<ul class="sub-menu">
<li>Mobile</li>
<li>Email</li>
</ul>
</li>
<li>Help </li>
<li>Q&A </li>
</ul>
</div>
I did try to put the submenu in another <div\> but the result was still the same (or maybe I'm just stupid).
the issue come from the selector .sub-menu > li:hover > a:hover
where you put padding and margin on hover
i also delete the float but i let you give item your expected design
.sub-menu > li:hover > a:hover {
color: white;
background-color: orangered;
border-radius: 10px;
}
div > ul > li {
list-style: none;
display: inline-block;
margin: 0 20px;
font-weight: bolder;
font-size: large;
font-variant: small-caps;
position: relative;
}
ul > li > a {
text-decoration: none;
color: white;
}
.sub-menu {
position: absolute;
display: none;
}
ul > li:hover > .sub-menu:hover {
background: orange;
}
ul > li:hover > .sub-menu {
display: block;
background-color: white;
margin: 0px;
padding-left: 10px;
width: 400px;
height: 200px;
box-shadow: 0 0 10px;
border-radius: 10px;
list-style-type: none;
text-align: left;
}
.sub-menu > li > a {
color: orangered;
padding: 0 10px;
}
.sub-menu > li:hover > a:hover {
color: white;
background-color: orangered;
border-radius: 10px;
}
ul > li > a:hover {
color: yellow;
}
div {
background-color: orangered;
height: 100px;
text-align: center;
line-height: 100px;
}
<!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="CSS/Bai2.css" />
</head>
<body>
<div>
<ul>
<li>Home </li>
<li>Intro </li>
<li>
Contact
<ul class="sub-menu">
<li>Mobile</li>
<li>Email</li>
</ul>
</li>
<li>Help </li>
<li>Q&A </li>
</ul>
</div>
</body>
</html>
If you want to have background color on one sub-menu line when you hover <a> one way can be to use selector .sub-menu>li:hover
div>ul>li {
list-style: none;
display: inline-block;
margin: 0 20px;
font-weight: bolder;
font-size: large;
font-variant: small-caps;
position: relative;
}
ul>li>a {
text-decoration: none;
color: white;
}
.sub-menu {
position: absolute;
display: none;
}
ul>li:hover>.sub-menu:hover {
background: orange;
}
ul>li:hover>.sub-menu {
display: block;
background-color: white;
margin: 0px;
padding-left: 0;
z-index: 9;
width: 400px;
height: 200px;
box-shadow: 0 0 10px;
border-radius: 10px;
list-style-type: none;
text-align: left;
}
.sub-menu>li>a {
color: orangered;
padding: 0 10px;
}
.sub-menu>li:hover {
background-color: orangered;
color: yellow;
border-radius: 10px;
border: solid 1px;
}
.sub-menu>li:hover>a {
color: white;
}
ul>li>a:hover {
color: yellow;
}
div {
background-color: orangered;
height: 100px;
text-align: center;
line-height: 100px;
}
<!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="CSS/Bai2.css" />
</head>
<body>
<div>
<ul>
<li>Home </li>
<li>Intro </li>
<li>
Contact
<ul class="sub-menu">
<li>Mobile</li>
<li>Email</li>
</ul>
</li>
<li>Help </li>
<li>Q&A </li>
</ul>
</div>
</body>
</html>
I am new to css. I tried to follow a tutorial and implement it with slight changes. I tried to add a drop down menu using list. but instead of going down, the menu goes sideways. Help please!
I am new to css. I tried to follow a tutorial and implement it with slight changes. I tried to add a drop down menu using list. but instead of going down, the menu goes sideways. Help please!
I want a collapsible menu.
I would be helpful if you suggest some good sources to learn css
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
background-image:url("background.png")
}
nav{
background: #179942;
height: 80px;
width: 100%;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background:white;
color: #179942;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
nav ul li ul li{
display:none;
}
nav ul li:hover ul li{
display: inline-block;
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #179942;
}
#check:checked ~ ul{
left: 0;
}
}
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Saving Solutions :: Tisaso</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div id="header">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Tisaso.</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Products
<ul>
<li><a href="#" > IT Statement Preperer</a></li>
<li><a href="#" > IT Statement Preperer</a></li>
</ul>
</li>
<li>Contact</li>
<li>Feedback</li>
</ul>
</nav>
<section></section>
</div>
</body>
</html>
like this. beacuse of "display:inline-block" use in dropdown's li tag.i modify & add some css regarding dropdown.
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
background-image:url("background.png")
}
nav{
background: #179942;
height: 80px;
width: 100%;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background:white;
color: #179942;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
nav ul li ul li{
display:none;
}
nav ul li:hover ul li{
display: inline-block;
}
/*CSS FOR DROPDOWN*/
nav ul li > ul {
float: unset;
position: absolute;
top: 80px;
margin: 0;
display: none;
background-color: #179942;
}
nav ul li ul li {
display: block !important;
line-height: 44px;
}
nav ul li:hover > ul {
display: block;
padding: 15px 10px;
}
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #179942;
}
#check:checked ~ ul{
left: 0;
}
nav ul li > ul {
position: relative;
top: 0;
left: 0;
background: #2c3e50;
}
nav ul li > ul li {
display: block !important;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Saving Solutions :: Tisaso</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div id="header">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Tisaso.</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Products
<ul>
<li><a href="#" > IT Statement Preperer</a></li>
<li><a href="#" > IT Statement Preperer</a></li>
</ul>
</li>
<li>Contact</li>
<li>Feedback</li>
</ul>
</nav>
<section></section>
</div>
</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>
I'm having problems where my dropdown menu made with CSS and HTML will force a linebreak and the dropdown menu will glitch out. You can see this problem by running my code.
/* HEADER/NAVBAR */
.main-nav {
text-decoration: none;
list-style-type: none;
display: inline;
text-align: center;
}
li {
display: inline-flex;
margin-left: 70px;
padding-bottom: 0px;
position: inherit;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-size: 14px;
}
.nav {
display: inline-block;
padding-bottom: 45px;
margin-top: 65px;
margin-left: 150px;
}
img {
height: 80px;
padding: 20px 0px 0px 20px;
margin: 0px 0px 20px 9%;
display: inline-flex;
float: left;
}
a {
color: #6b6b6b !important;
text-decoration: none;
font-weight: 600;
}
.wrapper {
margin: 0px 9%;
background-color: #f0f0f0;
size: 100vh;
height: 100vh
}
body {
background-color: #f7f7f7 !important;
margin: 0px;
}
.sticky {
background-color: #fff;
}
/* DROP DOWN MENUS */
ul li a:hover {
color: #fff;
;
}
ul li ul.dropdown {
min-width: 10px;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: static;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown,
ul.dropdown:hover {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
/* LEGAL STUFF */
.legal {
background-color: #444444;
height: 20vh;
text-align: center;
}
.copy {
padding: 4%;
color: #fff;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<nav class="sticky">
<div class="row">
<img src="logocopla.Jpg" alt="Copla Logo" class="logo">
<div class="nav">
<ul class="main-nav">
<li>
Home
</li>
<li>
About Us <i class="fa fa-angle-down" aria-hidden="true"></i>
</li>
<li>
Bolivia
</li>
<li>
Products <i class="fa fa-angle-down" `aria-hidden="true"></i>`
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
</div>
<div class="legal">
<p class="copy">. All rights reserved.</p>
</div>
Whenever you hover over "products" the code glitches out and forces a line break. I want to make it so that it doesnt affect the flow of the document. I've already tried to set the float to left and that didn't work.
Thank you!
Instead of position: static; on .dropdown I would go with position:absolute
You will need to iron out some padding and margin of your ul and li tags for proper fit
add position:relative to .dropdown li
See snippet below (I took out some menu items to ensure proper inspection of your product sub-menu where the issue lies)
/* HEADER/NAVBAR */
.main-nav {
text-decoration: none;
list-style-type: none;
display: inline;
text-align: center;
}
li {
display: inline-flex;
margin-left: 70px;
padding-bottom: 0px;
position: inherit;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-size: 14px;
}
.nav {
display: inline-block;
padding-bottom: 45px;
margin-top: 65px;
margin-left: 150px;
}
img {
height: 80px;
padding: 20px 0px 0px 20px;
margin: 0px 0px 20px 9%;
display: inline-flex;
float: left;
}
a {
color: #6b6b6b !important;
text-decoration: none;
font-weight: 600;
}
.wrapper {
margin: 0px 9%;
background-color: #f0f0f0;
size: 100vh;
height: 100vh
}
body {
background-color: #f7f7f7 !important;
margin: 0px;
}
.sticky {
background-color: #fff;
}
/* DROP DOWN MENUS */
ul li a:hover {
color: #fff;
;
}
ul li ul.dropdown {
min-width: 10px;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
padding: 0;
}
.dropdown li {
margin: 0px;
list-style-type: none;
position: relative;
left: 0px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 40px;
padding-left: 40px;
background: #f2f2f2;
}
.main-nav {
position: relative;
}
ul li:hover ul.dropdown,
ul.dropdown:hover {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
/* LEGAL STUFF */
.legal {
background-color: #444444;
height: 20vh;
text-align: center;
}
.copy {
padding: 4%;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Hind:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="copla.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Copla</title>
</head>
<body>
<nav class="sticky">
<div class="row">
<img src="logocopla.Jpg" alt="Copla Logo" class="logo">
<div class="nav">
<ul class="main-nav">
<li>
Products <i class="fa fa-angle-down" `aria-hidden="true"></i>`
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
</div>
<div class="legal">
<p class="copy">. All rights reserved.</p>
</div>
</body>
</html>