So, I was trying to make a dropdown menu, it works. But when I hover above it, it just appears in front of my Parents menu
I've tried some things like making an inline-block inside the parent's menu and still didn't work, I tried one thing that work that is adding a top: 100% code but it just didn't feel right cuz basically you add space to it and it just didn't feel right
Code:
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
nav {
/* this is a tag */
width: 100%;
height: 60px;
background-color: white;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
float: left;
padding: 0px 14px;
text-decoration: none;
text-align: center;
}
nav form {
float: left;
max-width: 100%;
height: 60px;
}
nav ul {
float: left;
text-align: center
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
padding: 0px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
background-color: #69696969
}
<nav id="navbar">
<form Name="" Method="" action="BUTTON TEST.html">
<input type="Image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
</form>
<ul>
<li>About
<ul>
<li>Expectations</li>
<li>FAQ</li>
<li>Laptop Program</li>
</ul>
</li>
<li>Why?
<ul>
<li>What?</li>
<li>Events & Activities</li>
<li>Meet The Grads</li>
</ul>
</li>
<li>Events
<ul>
<li>Opportunities</li>
<li>asd</li>
</ul>
</li>
<a href="" target="_blank">
<li>assd</li>
</a>
<a href="contact.php">
<li>Contact</li>
</a>
</ul>
</nav>
Just add top: 100% for the submenus:
nav ul li ul {
display: none;
position: absolute;
top: 100%;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
This will position it 100% from the top of the relative positioned parent - 100% referring to the height of that parent, so that it will start directly below it.
I have prepared a possible solution to your problem. With some modifications in the HTML, I added some separate classes to make the code more transparent.
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
.sub-menu {
position: absolute;
top: 55px;
flex-direction: column;
display: none;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
.about:hover .sub-menu {
left: 70px;
}
.why:hover .sub-menu {
left: 145px;
}
nav {
/* this is a tag */
width: 100%;
height: 60px;
background-color: white;
display: flex;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
float: left;
padding: 0px 14px;
text-decoration: none;
text-align: center;
}
nav form {
float: left;
max-width: 100%;
height: 60px;
}
nav ul {
float: left;
text-align: center
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li {
float: left;
list-style: none;
}
nav ul li a {
display: block;
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
padding: 0px 14px;
text-decoration: none;
}
nav ul li:hover ul {
display: flex;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
background-color: #69696969
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<nav id="navbar">
<form Name="" Method="" action="BUTTON TEST.html">
<input type="Image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
</form>
<ul class="main-menu">
<li class="about">About
<ul class="sub-menu">
<li>Expectations</li>
<li>FAQ</li>
<li>Laptop Program</li>
</ul>
</li>
<li class="why">Why?
<ul class="sub-menu">
<li>What?</li>
<li>Events & Activities</li>
<li>Meet The Grads</li>
</ul>
</li>
<li>Events
<ul class="sub-menu">
<li>Opportunities</li>
<li>asd</li>
</ul>
</li>
<a href="" target="_blank">
<li>assd</li>
</a>
<a href="contact.php">
<li>Contact</li>
</a>
</ul>
</nav>
</body>
</html>
There are some points:
In HTML nested tag you should close the inner tag before the outer tag
<li> <a> link tag </a> </li>
Position property can't be used with float. if an element was floated, can't take position and left , top , bottom , right properties.
The better way for layout, is to use display: flex, a powerful feature with less code. (you can read this and this)
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
nav {
/* this is a tag */
height: 60px;
background-color: white;
display:flex;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
padding: 0px 14px;
text-decoration: none;
text-align: center;
display: block;
}
nav form {
max-width: 100%;
height: 60px;
}
nav ul {
display:flex;
list-style: none;
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
background-color: #69696969
}
<nav id="navbar">
<form name="" method="" action="BUTTON TEST.html">
<input
type="Image"
name="IB1"
src="gradient-coding-logo-template_23-2148809439.jpg"
width="70"
height="60"
/>
</form>
<ul>
<li>
About
<ul>
<li>Expectations</li>
<li>FAQ</li>
<li>Laptop Program</li>
</ul>
</li>
<li>
Why?
<ul>
<li>What?</li>
<li>Events & Activities</li>
<li>Meet The Grads</li>
</ul>
</li>
<li>
Events
<ul>
<li>Opportunities</li>
<li>asd</li>
</ul>
</li>
<li>assd</li>
<li>Contact</li>
</ul>
</nav>
Related
My intention is to make a top navigation bar, in which the list item PROJECTS is supposed to be a dropdown. So far the dropdown is working, but it takes as much width as the parent element. I want to dissociate the dropdown content from the navigation item without changing formatting properties, such that it occupies just as much space needed by its items and is also positioned right below PROJECTS.
My code:
body{
margin: 0;
padding: 0;
}
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
}
nav li{
float: left;
}
nav li a{
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
}
nav li a:hover:not(.active){
background-color: #444;
}
nav li a.active{
background-color: rgba(0, 150, 0, 1);
}
main{
padding-top: 30px;
}
.dropdown_content{
display: none;
width: auto;
}
.dropbtn:hover .dropdown_content{
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li> Home </li>
<li> About </li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li> Contact </li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
How the result looks now:
How I want it to look(image edited)
Thank you in advance.
Just add position: fixed and background-color: #666666 for dropdown_content. Like that:
.dropdown_content {
...
position: fixed;
background-color: #666666;
}
This will not break the positioning of the dropdown menu, because the ul tag also has a fixed positioning.
body {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
}
nav li {
float: left;
}
nav li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
}
nav li a:hover:not(.active) {
background-color: #444;
}
nav li a.active {
background-color: rgba(0, 150, 0, 1);
}
main {
padding-top: 30px;
}
.dropdown_content {
display: none;
width: auto;
position: fixed;
background-color: #666666;
}
.dropbtn:hover .dropdown_content {
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main></main>
<footer></footer>
</body>
You can try absolute positioning.
body {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
font-size: 0;
}
nav li {
display: inline-block;
}
nav li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
font-size: 16px;
}
nav li a:hover:not(.active) {
background-color: #444;
}
nav li a.active {
background-color: rgba(0, 150, 0, 1);
}
main {
padding-top: 30px;
}
.dropdown_content {
position: absolute;
display: none;
background-color: #666666;
}
.dropbtn:hover .dropdown_content {
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li> Home </li>
<li> About </li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li> Contact </li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
I am trying to get the hover to extend all the way across to both sides of the sub-menu. I've tried to rewrite a bunch of elements to no avail. I also used chrome developer tools to try and pin-point the issue. After using chrome dev tools, it seemed like the issue regarding the hover not covering the entire text was with the padding in nav ul li a{. I tried to alter the padding and margin but without success. I've just started coding within the past year and I am a complete loss here.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>WEBSITE</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="logo">
WEBSITE</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>
<label for="btn-1" class="show">ABOUT +</label>
ABOUT
<input type="checkbox" id="btn-1">
<ul>
<li>OUR STORY</li>
<li>OUR COMMITMENT TO YOU</li>
</ul>
</li>
<li>LOCATIONS</li>
<li>
<label for="btn-2" class="show">PRODUCTS +</label>
PRODUCTS
<input type="checkbox" id="btn-2">
<ul>
<li>NEW ARRIVALS</li>
<li>FEATURED</li>
<li>TOP RATED</li>
<li>HIS</li>
<li>HERS</li>
<li>KIDS</li>
<li>ACCESSORIES</li>
<li>SPRING CATALOG</li>
<li>THE ESSENTIALS</li>
<li>SALE</li>
</ul>
</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
<hr class="hr">
<div class="content">
<section>
<img class="image"src="Vibrant.jpg" alt="Human Jumping In Converses">
</section>
</div>
</body>
</html>
*{
font-family: sans-serif;
margin: 0;
padding: 0;
user-select: none;
}
body{
background: #f2f2f2;
}
nav{
background: white;
}
nav:after{
clear: both;
content: '';
display: table;
}
nav .logo{
color: black;
float: left;
font-family: sans-serif;
font-size: 30px;
font-weight: 500;
line-height: 70px;
padding-left: 120px;
}
nav ul{
float: right;
list-style: none;
margin-right: 60px;
position: relative;
}
nav ul li{
background: white;
display: inline-block;
text-align: center;
}
nav ul li a{
color: rgb(77, 77, 77);
display: inline-block;
font-size: 15px;
line-height: 70px;
margin: 1px;
padding: 0 20px;
text-decoration: none;
}
nav ul li a:hover{
background-color: rgb(0, 153, 102);
color: black;
}
nav ul ul li a:hover{
background: rgb(0, 92, 61);
color: white;
}
nav ul ul{
background-color: rgb(0, 153, 102);
opacity: 0;
position: absolute;
visibility: hidden;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
opacity: 1;
top: 70px;
visibility: visible;
}
nav ul ul li{
background-color: rgb(0, 153, 102);
display: list-item;
font-weight: lighter;
float: none;
position: relative;
width: 100%;
padding: 0;
}
nav ul ul li a{
color: white;
line-height: 50px;
}
nav ul ul ul li{
left: 150px;
position: relative;
top: -60px;
width: 100%;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
.image{
height: 1100px;
width: 2200px;
}
.hr{
background-color: rgb(0, 153, 102);
border: none;
height: 9px;
}
#media all and (max-width: 968px) {
nav ul{
float: left;
margin-right: 0px;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
width: 100%;
}
.show{
color: rgb(0, 153, 102);
cursor: pointer;
display: block;
font-size: 18px;
line-height: 70px;
padding: 0 10px;
}
.show:hover{
color: black;
}
.icon{
background-color: black;
color: rgb(0, 153, 102);
cursor: pointer;
display: block;
font-size: 25px;
line-height: 70px;
position: absolute;
right: 40px;
top: 0;
}
nav ul ul{
border-top: 0px;
top: 70px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul li{
position: static;
}
.content{
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
These two values were conflicting with eachother so I re-wrote them:
nav ul li a:hover{
background-color: rgb(0, 153, 102);
color: black;
}
nav ul ul li a:hover{
background: rgb(0, 92, 61);
color: white;
Into this:
nav ul li a.light:hover{
background-color: rgb(0, 153, 102);
color: black;
}
nav ul ul li:hover{
background: rgb(0, 92, 61);
color: white;
}
I assigned the main header links a class of .light, and changed the next css code to just call the list and not the individual link which allows the entire background to change color all the way across.
*{
font-family: sans-serif;
margin: 0;
padding: 0;
user-select: none;
}
body{
background: #f2f2f2;
}
nav{
background: white;
}
nav:after{
clear: both;
content: '';
display: table;
}
nav .logo{
color: black;
float: left;
font-family: sans-serif;
font-size: 30px;
font-weight: 500;
line-height: 70px;
padding-left: 120px;
}
nav ul{
float: right;
list-style: none;
margin-right: 60px;
position: relative;
}
nav ul li{
background: white;
display: inline-block;
text-align: center;
}
nav ul li a{
color: rgb(77, 77, 77);
display: inline-block;
font-size: 15px;
line-height: 70px;
margin: 1px;
padding: 0 20px;
text-decoration: none;
}
nav ul li a.light:hover{
background-color: rgb(0, 153, 102);
color: black;
}
nav ul ul li:hover{
background: rgb(0, 92, 61);
color: white;
}
nav ul ul{
background-color: rgb(0, 153, 102);
opacity: 0;
position: absolute;
visibility: hidden;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
opacity: 1;
top: 70px;
visibility: visible;
}
nav ul ul li{
background-color: rgb(0, 153, 102);
display: list-item;
font-weight: lighter;
float: none;
position: relative;
width: 100%;
padding: 0;
}
nav ul ul li a{
color: white;
line-height: 50px;
}
nav ul ul ul li{
left: 150px;
position: relative;
top: -60px;
width: 100%;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
.image{
height: 1100px;
width: 2200px;
}
.hr{
background-color: rgb(0, 153, 102);
border: none;
height: 9px;
}
#media all and (max-width: 968px) {
nav ul{
float: left;
margin-right: 0px;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
width: 100%;
}
.show{
color: rgb(0, 153, 102);
cursor: pointer;
display: block;
font-size: 18px;
line-height: 70px;
padding: 0 10px;
}
.show:hover{
color: black;
}
.icon{
background-color: black;
color: rgb(0, 153, 102);
cursor: pointer;
display: block;
font-size: 25px;
line-height: 70px;
position: absolute;
right: 40px;
top: 0;
}
nav ul ul{
border-top: 0px;
top: 70px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul li{
position: static;
}
.content{
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>WEBSITE</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="logo">
WEBSITE
</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn" />
<ul>
<li>
<label for="btn-1" class="show">ABOUT +</label>
<a class="light" href="#">ABOUT</a>
<input type="checkbox" id="btn-1" />
<ul>
<li>OUR STORY</li>
<li>OUR COMMITMENT TO YOU</li>
</ul>
</li>
<li><a class="light" href="#">LOCATIONS</a></li>
<li>
<label for="btn-2" class="show">PRODUCTS +</label>
<a class="light" href="#">PRODUCTS</a>
<input type="checkbox" id="btn-2" />
<ul>
<li>NEW ARRIVALS</li>
<li>FEATURED</li>
<li>TOP RATED</li>
<li>HIS</li>
<li>HERS</li>
<li>KIDS</li>
<li>ACCESSORIES</li>
<li>SPRING CATALOG</li>
<li>THE ESSENTIALS</li>
<li>SALE</li>
</ul>
</li>
<li><a class="light" href="#">BLOG</a></li>
<li><a class="light" href="#">CONTACT</a></li>
</ul>
</nav>
<hr class="hr" />
<div class="content">
<section>
<img class="image" src="Vibrant.jpg" alt="Human Jumping In Converses" />
</section>
</div>
</body>
</html>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm stuck creating a navigation bar. I dont know why the text is out of the bar? Can anyone what is the problem?
* {
padding: 0;
margin: 0;
}
/*Menu*/
nav {
width: 100%;
height: 50px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
justify-content: space-between;
line-height: 50px;
width: 100px;
}
nav ul li a {
text-decoration: none;
color: #000;
display: block;
font-size: 16px;
font-family: Arvo;
}
nav ul li a:hover {
background-color: #27D05F;
transition: ease 1s;
color: #fff;
}
/*Dropdownmenu*/
nav ul li ul li {
display: none;
background-color: #fff;
width: 100px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul:hover ul li {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aunty Grocery</title>
<link rel="stylesheet" type="text/css" href="Style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<nav class="w3-container w3-center w3-animate-left">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Grocery
<ul>
<li>Vegetables</li>
<li>Meats</li>
<li>Fish</li>
<li>Fruits</li>
<li>Bakery</li>
<li>Others</li>
</ul>
</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<a class="Register" href="Register.html"><button>Sign Up</button></a>
<a class="Login" href="Login.html"><button>Sign In</button></a>
</body>
</html>
The issue is because the sub-level ul is making all the li taller. To keep the alignment to the top of the ul you need to set vertical-align: top:
nav ul li {
/* other properties... */
vertical-align: top;
}
* {
padding: 0;
margin: 0;
}
/*Menu*/
nav {
width: 100%;
height: 50px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
justify-content: space-between;
line-height: 50px;
width: 100px;
vertical-align: top;
}
nav ul li a {
text-decoration: none;
color: #000;
display: block;
font-size: 16px;
font-family: Arvo;
}
nav ul li a:hover {
background-color: #27D05F;
transition: ease 1s;
color: #fff;
}
/*Dropdownmenu*/
nav ul li ul li {
display: none;
background-color: #fff;
width: 100px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul:hover ul li {
display: block;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<nav class="w3-container w3-center w3-animate-left">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
Grocery
<ul>
<li>Vegetables</li>
<li>Meats</li>
<li>Fish</li>
<li>Fruits</li>
<li>Bakery</li>
<li>Others</li>
</ul>
</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<a class="Register" href="Register.html"><button>Sign Up</button></a>
<a class="Login" href="Login.html"><button>Sign In</button></a>
This question already has answers here:
How to style the parent element when hovering a child element?
(8 answers)
Closed 3 years ago.
I have a navigation bar that is outputs a border-bottom when i hover over the li but when i hover over the child elements of that li, the :hover stops, how do i make it so that the :hover remains even when i hover over the child elements.
I would like to add some parts of the code. This is the HTML file.
* {
margin: 0;
padding: 0;
border: 0;
}
` header {
background: #fff;
width: 100%;
}
.navbar {
padding: 0;
}
.navbar nav {
width: 100%;
height: 115px;
}
.navbar nav ul {
float: right;
margin: 0;
}
.navbar nav ul li {
text-decoration: none;
float: left;
list-style: none;
position: relative;
}
.navbar nav ul li a {
color: black;
display: block;
padding: 45.5px 14px;
text-decoration: none;
}
.parent-a:hover {
border-bottom: #aa312c 4px solid;
padding: 25.5px 14px;
margin: 18px 0;
}
.level2-ul:hover .parent-a {
border-bottom: #aa312c 4px solid;
padding: 25.5px 14px;
margin: 18px 0;
}
.navbar nav ul li ul {
display: none;
position: absolute;
background-color: white;
padding: 0;
border-radius: 0px 0px 4px 4px;
}
.navbar nav ul li:hover ul {
display: block;
background-color: rgb(234, 236, 237);
z-index: 100;
}
.navbar nav ul li ul li {
width: 180px;
border-radius: 4px;
}
.navbar nav ul li ul li a {
color: black;
padding: 8px 14px;
border-bottom: 1px solid #dedfe1;
}
.navbar nav ul li ul li a:hover {
background: #dedfe1;
}
#headline {
color: #fff;
padding: 4px;
font-size: 1.5rem;
margin: 0;
text-align: center;
font-weight: bold;
}
#headline-wrapper {
background: #aa312c;
}
<header>
<div id="header-wrapper">
<div class="body" id="logo-wrapper">
<!-- Navigation start -->
<div class="navbar">
<nav>
<ul>
<li>
<a class="parent-a" href="#">Online Activities</a>
<ul>
<li class="level2-ul">Google</li>
<li class="level2-ul">Youtube</li>
<li class="level2-ul">Reddit</li>
</ul>
</li>
<li>
<a class="parent-a" href="#">Social Media</a>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
</li>
<li>
<a class="parent-a" href="#">Online Shopping</a>
<ul>
<li>Shopee</li>
<li>Lazada</li>
<li>Carousell</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div id="headline-wrapper">
<h2 id="headline" class="text-center text-uppercase">
Software Quotation Tool
</h2>
</div>
</div>
</header>
By doing this, I can hover over the 3 nav lis and :hover would be activated. However, as soon as I hover over the inner li, the :hover stopped, I tried using .level2-ul but unable to do so. Thank you for the help.
Put parent-a on the li rather than on the a.
* {
margin: 0;
padding: 0;
border: 0;
}
` header {
background: #fff;
width: 100%;
}
.navbar {
padding: 0;
}
.navbar nav {
width: 100%;
height: 115px;
}
.navbar nav ul {
float: right;
margin: 0;
}
.navbar nav ul li {
text-decoration: none;
float: left;
list-style: none;
position: relative;
}
.navbar nav ul li a {
color: black;
display: block;
padding: 45.5px 14px;
text-decoration: none;
}
.parent-a:hover > a {
border-bottom: #aa312c 4px solid;
padding: 25.5px 14px;
margin: 18px 0;
}
.level2-ul:hover .parent-a {
border-bottom: #aa312c 4px solid;
padding: 25.5px 14px;
margin: 18px 0;
}
.navbar nav ul li ul {
display: none;
position: absolute;
background-color: white;
padding: 0;
border-radius: 0px 0px 4px 4px;
}
.navbar nav ul li:hover ul {
display: block;
background-color: rgb(234, 236, 237);
z-index: 100;
}
.navbar nav ul li ul li {
width: 180px;
border-radius: 4px;
}
.navbar nav ul li ul li a {
color: black;
padding: 8px 14px;
border-bottom: 1px solid #dedfe1;
}
.navbar nav ul li ul li a:hover {
background: #dedfe1;
}
#headline {
color: #fff;
padding: 4px;
font-size: 1.5rem;
margin: 0;
text-align: center;
font-weight: bold;
}
#headline-wrapper {
background: #aa312c;
}
<header>
<div id="header-wrapper">
<div class="body" id="logo-wrapper">
<!-- Navigation start -->
<div class="navbar">
<nav>
<ul>
<li class="parent-a" >
Online Activities
<ul>
<li class="level2-ul">Google</li>
<li class="level2-ul">Youtube</li>
<li class="level2-ul">Reddit</li>
</ul>
</li>
<li class="parent-a">
Social Media
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
</li>
<li class="parent-a">
Online Shopping
<ul>
<li>Shopee</li>
<li>Lazada</li>
<li>Carousell</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
I need help to implement my logo image into the navigation bar. I tried many various ways to try and do this, however I never managed. The logo ends up being on top of my menu instead being in line with it.
<head>
<link rel="stylesheet" type="text/css" href="Homestyle.css">
<meta charset="UTF-8">
</head>
<body>
<div>
<img class="left" src="logo.png" alt="logo">
<ul class="nav">
<li><a class="active" href="Homepage.html"> Home</a></li>
<li> About</li>
<li> Our Work</li>
<li> Services</li>
<li> Contact</li>
</ul>
</div>
</div>
</body>
</html>
.nav{
list-style-type: none;
margin: 0px;
padding: 0;
background-color: #3399ff;
border: 1px solid #555;
overflow: hidden;
width:100%;
top:0;
padding-left: 200px;
}
.nav li a{
display: block;
color: #fff;
padding: 16px 10px;;
text-decoration: none;
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.nav li{
float: left;
}
.nav li a.active{
background-color: #3399ff;
color: white;
}
.nav li a:hover.active{
background-color: #4da6ff;
}
.nav li a:hover:not(.active){
background-color: #4da6ff;
color: white;
}
body{
margin: 0;
background: url("backtest3.jpg");
background-size: 100%;
}
.nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
display:inline;
vertical-align:top;
}
.left { float: left; }
Put the logo in the navaber and give it some padding as follows:
.nav{
list-style-type: none;
margin: 0px;
padding: 0;
background-color: #3399ff;
border: 1px solid #555;
overflow: hidden;
width:100%;
top:0;
padding-left: 200px;
}
.nav li a{
display: block;
color: #fff;
padding: 16px 10px;;
text-decoration: none;
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.nav li{
float: left;
}
.nav li a.active{
background-color: #3399ff;
color: white;
}
.nav li a:hover.active{
background-color: #4da6ff;
}
.nav li a:hover:not(.active){
background-color: #4da6ff;
color: white;
}
body{
margin: 0;
background: url("backtest3.jpg");
background-size: 100%;
}
.nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
display:inline;
vertical-align:top;
}
.left { float: left; padding: 16px 10px; }
<div>
<ul class="nav">
<img class="left" src="logo.png" alt="logo">
<li><a class="active" href="Homepage.html"> Home</a></li>
<li> About</li>
<li> Our Work</li>
<li> Services</li>
<li> Contact</li>
</ul>
</div>
Try the following:
.nav {
float:left;
width: calc(100% - 100px) /* apply the logo width instead of 100px */
}