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>
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>
I've been trying to figure out what is why the dropdown menu isnt changing from display: none; into display: block; when i hover over it.
I briefly looked at a dropdown menu CSS tutorial just to get a basic understanding on how it works but after watching it a few times i have no clue what is not working
P.S i am relatively new to this stuff
Code:
<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>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
}
.navbar ul li{
display: inline-flex;
margin-left: 8rem;
list-style: none;
color: white;
padding: .5rem;
border-radius: 1rem;
}
.navbar{
background: rgb(0, 120, 0);
padding: 1.25rem;
font-size: larger;
text-decoration: none;
}
.navbar:link{
text-decoration: none;
}
a{
text-decoration: none;
color: white;
font-family: sans-serif;
}
.navbar ul li:hover{
background: rgba(0, 0, 0, 0.7);
}
.drop-1{
display: none;
background-color: darkgreen;
position: absolute;
left: 6rem;
}
.drop-1 a{
color: lightgreen;
}
.drop-1 ul li{
border-bottom: 1px solid black;
padding-bottom: .5rem;
padding-top: .5rem;
padding-left: 1rem;
padding-right: 1rem;
display: block;
}
.drop-1 ul li:last-child{
border: none;
}
.drop-1 ul li:first-child{
border-top: 1px solid black;
}
.navbar ul li:hover .drop-1{
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
<div class="drop-1">
<ul>
<li>dropdown1</li>
<li>dropdown2</li>
<li>dropdown3</li>
<li>dropdown4</li>
<li>dropdown5</li>
</ul>
</div>
</body>
</html>```
The dropdown must be in the structure of your styles. You have this style:
.navbar ul li:hover .drop-1{
display: block;
}
Which means that you have a class navbar, and then ul with some li and, "inside" an element with a drop-1 class. When you are hover that li, then your drop-1 element will be visible.
If you put a dropdown inside some li of your navbar, you can see the dropdown.
<div class="navbar">
<ul>
<li>
Test1
<div class="drop-1">
<ul>
<li>dropdown1</li>
<li>dropdown2</li>
<li>dropdown3</li>
<li>dropdown4</li>
<li>dropdown5</li>
</ul>
</div>
</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
You need one dropdown for each menú in your navbar.
UPDATE
Well, maybe a bit difficult at first but the concept is always the same. Check this:
a span {
// Any span inside a link will be hidden by default
display: none;
}
a:hover span {
// but when you are hover the link, the span will be visible
display: block;
}
<a>Always visible <span>Visible only on hover</span></a>
The CSS it's applied to the span but the "hover" of the link it's who change the display of the span.
Here your code fixed. Besides Victor clarification there are a few more things you could solve about the code. I paste it here if you want to copy it.
* {
margin: 0;
padding: 0;
border: 0;
}
.navbar ul li {
display: inline-flex;
position: relative;
margin-left: 8rem;
list-style: none;
color: white;
padding: .5rem;
border-radius: 1rem;
}
.navbar {
background: rgb(0, 120, 0);
padding: 1.25rem;
font-size: larger;
text-decoration: none;
}
.navbar:link {
text-decoration: none;
}
a {
text-decoration: none;
color: white;
font-family: sans-serif;
}
.navbar ul li:hover {
background: rgba(0, 0, 0, 0.7);
}
.drop-1 {
display: none;
background-color: darkgreen;
position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%);
z-index: 1;
}
.drop-1 a {
color: lightgreen;
}
.drop-1 ul li {
border-bottom: 1px solid black;
padding-bottom: .5rem;
padding-top: .5rem;
padding-left: 1rem;
padding-right: 1rem;
display: block;
}
.drop-1 ul li:last-child {
border: none;
}
.drop-1 ul li:first-child {
border-top: 1px solid black;
}
.navbar ul li:hover .drop-1 {
display: block;
}
<!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>
<div class="navbar">
<ul>
<li>
Test1
<div class="drop-1">
<ul>
<li>dropdown1</li>
<li>dropdown2</li>
<li>dropdown3</li>
<li>dropdown4</li>
<li>dropdown5</li>
</ul>
</div>
</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</body>
</html>
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>
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