I am learning html and css for front-end web development. While writing code for drop-down box in navigation-menu, i am not getting the desired output. In the navigation menu drop down is opening at the left corner but the navigation link is somewhere else. Please help.
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper" ></div>
<div id="name"> <!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu"> <!
========================Navigation Menu================= >
<ul>
<li>Home</li>
<li>About
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul></li>
<li>Courses
<ul>
<li>Java</li>
<li>Python</li>
<li>Data Base Management System</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</ul></li>
<li>Settings
<ul>
<li>Your Profile</li>
<li>Your Cart</li>
<li>Mode</li>
</ul></li>
</ul>
</div>
<div> <!
========================Content=========================== >
<ul >Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li></ul>
</div>
</body>
</html>
CSS code:
body {
font-family: lucida console;
font-size: 14px;
color: white;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
#name {
position: relative;
top: 0;
left: 0;
}
.prince {
color: white;
text-align: center;
padding: 5px;
background-color: rgba(65, 15, 0, 0.5);
}
#wpback {
background-color: black;
position: absolute;
width: 100%;
height: 100%;
}
#wallpaper {
background-image: url('tech.jpg');
opacity: 0.1;
position: absolute;
width: 100%;
height: 100%;
}
#menu {
margin-top: 10px;
background-color: rgba(65, 15, 0, 1);
height: 50px;
position: relative;
}
#menu ul {
padding: 0;
margin: 0;
}
#menu ul li {
list-style: none;
display: inline;
}
#menu ul li a {
margin: 10px;
padding: 16px;
text-decoration: none;
color: white;
line-height: 50px;
}
#menu ul li a:hover {
background-color: gray;
color: black;
transition: ease-in-out 0.2s;
}
#menu ul li ul li {
display: none;
}
#menu ul li:hover ul li {
background-color: silver;
display: block;
width: 220px;
}
#menu ul li:hover ul li a {
margin: 10px;
padding: 15px;
text-decoration: none;
line-height: 50px;
color: black;
}
#menu ul li ul li a:hover {
background-color: gray;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper"></div>
<div id="name">
<!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu">
<!
========================Navigation Menu================= >
<ul>
<li>Home</li>
<li>About
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
</li>
<li>Courses
<ul>
<li>Java</li>
<li>Python</li>
<li>Data Base Management System</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</ul>
</li>
<li>Settings
<ul>
<li>Your Profile</li>
<li>Your Cart</li>
<li>Mode</li>
</ul>
</li>
</ul>
</div>
<div>
<!
========================Content=========================== >
<ul>Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li>
</ul>
</div>
</body>
</html>
When i am putting no options in the navigation menu then the options Home, About, Couses & Settings are in line but when i am adding options in the menu in dropdown the individual options come downward.
Aligned Dropdown Content
Determine whether the dropdown content should go from left to right or
right to left with the left and right properties.
CSS code
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
And HTML code is
<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">Right</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Related
So I was trying to make a Super sub-menu and for some reason, the super sub-menu appears when I hover above the main menus, not the sub-menus. and I thought something is wrong with the display: none; but I don't know how to fix it. I already tried to put it with the class it still didn't work and I already double-check the HTML to ensure not typo and none so I'm so confused and stuck right now, PLEASE HELP.
The code :
* {
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: 2.3px 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 ul {
display: none;
position: absolute;
top: 0;
right: 0;
-ms-transform: translate(100%,0);
-webkit-transform: translate(100%,0);
transform:translate(100%,0);
list-style: none;
}
.subMenu li:hover>.SuperSubMenu{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Wall of nothing</title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<nav id="navbar">
<form name="" method="" action="BUTTON%20TEST.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
<ul class="subMenu">
<li>
Numbers
<ul class="SuperSubMenu">
<li>
Person1
</li>
<li>
Person2
</li>
</ul>
</li>
<li>
Fax
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
It's not working because
nav ul li:hover ul {
display: block;
}
is overwriting
.SuperSubMenu {
display: none;
}
property.
To fix it you can add !important to both css for SuperSubMenu. This isn't probably the best way, but it works.
* {
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: 2.3px 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;
}
.SuperSubMenu {
display: none !important;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li ul {
display: none;
position: absolute;
top: 0;
right: 0;
-ms-transform: translate(100%,0);
-webkit-transform: translate(100%,0);
transform:translate(100%,0);
list-style: none;
}
.subMenu li:hover>.SuperSubMenu{
display: block !important;
}
<!DOCTYPE html>
<html>
<head>
<title>Wall of nothing</title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<nav id="navbar">
<form name="" method="" action="BUTTON%20TEST.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
<ul class="subMenu">
<li>
Numbers
<ul class="SuperSubMenu">
<li>
Person1
</li>
<li>
Person2
</li>
</ul>
</li>
<li>
Fax
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
You need to use direct descendant operators in your third-to-last CSS rule - the one which makes regular sub menus appear when hovering the main menu items. Otherwise this rule will also affect (i.e. make visible) the ul of the SuperSubMenus on hover of the main menu items. So change this selector:
nav ul li:hover ul {
display: block;
}
...to the following:
nav > ul > li:hover > ul {
display: block;
}
* {
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: 2.3px 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 ul {
display: none;
position: absolute;
top: 0;
right: 0;
-ms-transform: translate(100%,0);
-webkit-transform: translate(100%,0);
transform:translate(100%,0);
list-style: none;
}
.subMenu li:hover>.SuperSubMenu{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Wall of nothing</title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<nav id="navbar">
<form name="" method="" action="BUTTON%20TEST.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
<ul class="subMenu">
<li>
Numbers
<ul class="SuperSubMenu">
<li>
Person1
</li>
<li>
Person2
</li>
</ul>
</li>
<li>
Fax
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
you can do with simple CSS
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<div class="dropdown">
<button class="dropbtn">Dropdown Menu</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
My Dropdown menu opens up but it goes down under behind the screen like unless I increase the navbar height it isn't visible.
here is my code.
I want it to come on top of everything so the user can actually see it.
It goes underneath the nav section, so is not visible.
.sub-menu {
display: none;
margin-top: 0 !important;
}
.navbar-header .navbar-ul .main-menu-items .about-us-menu #about-sub-menu {
z-index: 100;
position: relative;
}
.navbar-header .navbar-ul .about-us-menu .sub-menu {
width: 150px;
}
.navbar-header .navbar-ul .about-us-menu .sub-menu ul li a {
padding-top: 10px;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.sub-menu ul li {
margin: 15px;
width: 120px;
position: relative;
/* padding: 15px; */
}
.navbar-header .navbar-ul .courses-sub-menu:hover .sub-menu ul li a {
width: 150px;
margin: 0 !important;
padding-top: 10px;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.navbar-header .navbar-ul .about-us-menu .sub-menu {
width: 180px;
}
.navbar-header ul li:hover .sub-menu {
display: block !important;
position: absolute;
background: #333333;
margin-top: 15px;
}
.sub-menu ul:hover {
display: block !important;
}
.navbar-header ul li:hover .sub-menu ul {
display: block;
/* margin: 10px; */
}
.sub-menu ul li:hover {
display: block;
background: #f5f5f7;
color: black !important;
}
.sub-menu ul li a {
color: #f5f5f7;
}
.navbar-header ul li:hover .sub-menu ul li {
display: block !important;
color: black;
width: 150px;
padding: 0 !important;
border-radius: 0;
text-align: center;
}
.sub-menu ul li a:hover {
color: black;
}
<div class="navbar-header" style="padding: 0; margin: 0; ">
<ul class="navbar-ul">
<div class="main-menu-items">
<li>
<a routerLink="/home"><img src="../../../assets/xyz" class="navbar-logo" alt=""></a>
</li>
<!-- logo -->
<!-- <li><a routerLink="/home">Home</a></li> -->
<!-- <li><a routerLink="/aboutus">About Us</a></li> -->
<li class="about-us-menu"><a routerLink="#">About Us</a>
<div class="sub-menu">
<ul id="about-sub-menu">
<li>
Gallery
</li>
<li>
Testimonials
</li>
<li>
Blogs
</li>
</ul>
</div>
</li>
<li class="courses-sub-menu"><a routerLink="/courses">Courses</a>
<div class="sub-menu">
<ul>
<li>
Science
</li>
<li>
Physics
</li>
<li>
Biology
</li>
<li>
Mathematics
</li>
<li>
Chemistry
</li>
<li>
Business Studies
</li>
<li>
Accountancy
</li>
<li>
Economics
</li>
<li>
Psychology
</li>
<li>
SAT/ACT
</li>
</ul>
</div>
</li>
Here you go.
Check out these CSS properties to achieve your desired result.
.main-menu-items {
background: none;
color: Black;
padding: 12px 26px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
min-width: 160px;
}
.sub-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.sub-menu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.sub-menu a:hover {background-color: #f1f1f1}
.dropdown:hover .sub-menu {
display: block;
position: absolute;
left: 100%;
top: 0;
}
.nav-wrapper {
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>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="navbar-header">
<div class="nav-wrapper">
<div class="dropdown">
<button class="main-menu-items">About Us</button>
<div class="sub-menu">
Gallery
Testimonials
Blogs
</div>
</div>
</div>
<div class="nav-wrapper">
<div class="dropdown">
<button class="main-menu-items">Courses</button>
<div class="sub-menu">
Science
Physics
Biology
Mathematics
Chemistry
Business Studies
Accountancy
Economics
Psychology
SAT/ACT
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to make the drop down menu stay top right with the image behind it if anyone could help would be greatly appreciated i tried using z-index but that didn't work out for me !
( using a img off google so u guys can see what im talking about! )
/* Drop Down Menu */
.navClass {
z-index: 999;
float: right;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>STREAMER // DESIGNER // YOUTUBER</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="bg-Main">
<img src="">
</nav>
<nav class="zeefro">
<img src="https://i.ytimg.com/vi/d-zKJCKsoWw/maxresdefault.jpg" text-align: center; >
</nav>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Either i did something wrong within the z-index unless i don't know whats happening :P
Kind regards
ZeFrolity
You need to put position: absolute to the div with background.
but
if a image is for background, you will usually want to use css background-image attribute instead of <img> tag.
you will also only need one nav tag only
/* Drop Down Menu */
.navClass {
z-index: 999;
float: right;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
position: absolute;
width:100%;
height:100%;
background-image: url("https://i.ytimg.com/vi/d-zKJCKsoWw/maxresdefault.jpg")
}
<!DOCTYPE html>
<html>
<head>
<title>STREAMER // DESIGNER // YOUTUBER</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="zeefro">
</div>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
You can absolutely position the menu instead. I also removed the margin from body.
/* Drop Down Menu */
body {
margin: 0;
}
.navClass {
position: absolute;
top: 0; right: 0;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>STREAMER // DESIGNER // YOUTUBER</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="bg-Main">
<img src="">
</nav>
<nav class="zeefro">
<img src="https://i.ytimg.com/vi/d-zKJCKsoWw/maxresdefault.jpg" text-align: center; >
</nav>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
I am trying to created a drop down menu with HTML/CSS with hover effect.Below is my HTML code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
body {
background-color:#181818;
margin: 0px;
}
ul li {
display: inline-block;
font-size: 140%;
color: orange;
width: 150px;
background-color: #505050;
height: 50px;
border-radius: 150px;
position: relative;
}
p {
margin-top: 10px;
text-align: center;
margin-bottom: 20px;
}
ul li:hover {
color: #505050;
background-color: orange;
}
/*ul li ul {
visibility: hidden;
}*/
#id2 {
display: none;
position: absolute;
z-index: 999;
left: 0;
}
#id1:hover #id2 {
display: block; /* display the dropdown */
}
</style>
<body>
<ul id="topMenu">
<li><p>Home</p></li>
<li><p id="id1">Projects</p></li>
<ul id="id2">
<li><p>Project 1</p></li>
<li><p>Project 2</p></li>
<li><p>Project 3</p></li>
</ul>
<li><p>About Us</p></li>
<li><p>contact us</p></li>
</ul>
</body>
</html>
I am not sure what I am doing wrong in css code here. Can anyone please help me with the code and How I can implement the hover drop down menu correctly.?
Thanks,
Bhavik
you wrong markup for a drop-down menu
instead
<ul id="topMenu">
<li><p>Home</p></li>
<li><p id="id1">Projects</p></li>
<ul id="id2">
<li><p>Project 1</p></li>
<li><p>Project 2</p></li>
<li><p>Project 3</p></li>
</ul>
<li><p>About Us</p></li>
<li><p>contact us</p></li>
</ul>
to
<ul id="topMenu">
<li><p>Home</p></li>
<li><p>Projects</p>
<ul>
<li><p>Project 1</p></li>
<li><p>Project 2</p></li>
<li><p>Project 3</p></li>
</ul>
</li>
<li><p>About Us</p></li>
<li><p>contact us</p></li>
</ul>
Example:
body {
background-color:#181818;
margin: 0px;
}
ul li {
display: inline-block;
font-size: 140%;
color: orange;
width: 150px;
background-color: #505050;
height: 50px;
border-radius: 150px;
position: relative;
}
p {
margin-top: 10px;
text-align: center;
margin-bottom: 20px;
}
ul li:hover {
color: #505050;
background-color: orange;
}
ul li ul{
display: none;
padding-left: 0;
}
ul li:hover ul{
display: block;
position: absolute; top: 100%; left: 0;
}
<ul id="topMenu">
<li>
<p>Home</p>
</li>
<li>
<p id="id1">Projects</p>
<ul id="id2">
<li>
<p>Project 1</p>
</li>
<li>
<p>Project 2</p>
</li>
<li>
<p>Project 3</p>
</li>
</ul>
</li>
<li>
<p>About Us</p>
</li>
<li>
<p>contact us</p>
</li>
</ul>
look this:
http://jsfiddle.net/412cosa7/
HTML:
the #id1 is not the ancestor of the #id2, so, first ,you can remove #id2 from <p> and add it to <li>, then put #id2's element in #id1's.
In fact,<p> in your source is not necessary.
CSS:
use parent selector ">" .
e.g: #id1:hover > #id2
My problem: I want to position the menu bar next to the logo image and make both of them (logo and menu) to align to the center of the page (#wrapper). I have tried using tables, but it didn't work. This web page uses css media queries.
#charset "utf-8";
#wrapper {
margin: 0 auto;
margin-top: -15px;
max-width: 1020px;
width: 97%;
background-color: #FFF;
border: 1px solid #000;
border-radius: 2px;
box-shadow: 0 0 10px 0px rgba(12, 3, 25, 1.8);
}
#slider {
overflow: hidden;
text-align: center;
min-width: 320px;
height: auto;
width: 100%;
}
#slider img {
width: inherit;
}
#header {
min-height: 150px;
overflow: hidden;
z-index: 5;
background-color: #fff;
width: 100%;
display: inline;
}
#header img {
width: 218px;
height: 139px;
}
nav {
width: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/*Create a horizontal list with spacing*/
li {
display: inline-block;
float: left;
margin-right: #CF0;
}
/*Style for menu links*/
li a {
display: block;
min-width: 150px;
height: 100px;
text-align: center;
line-height: 100px;
color: #fff;
background: #34D675;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #99D829;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
/*Responsive Styles*/
#media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NFF - Sri Lanka</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<nav>
<a href="#">
<img src="file:///E|/NFF -Website/images/nfflogo.jpg" alt="NFF Sri Lanka Logo" width="218" height="139" title="NFF Sri Lanka Logo">
</a>
<label for="show-menu" class="show-menu">Show</br>Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>HOME
</li>
<li>INFO ￬
<ul class="hidden">
<li>National Rainforests
</li>
<li>Aninmals & Plants
</li>
<li>Nature Convservation
</li>
</ul>
</li>
<li>BLOG
</li>
<li>ABOUT ￬
<ul class="hidden">
<li>Our Mission & Vision
</li>
<li>Membership
</li>
<li>Donate us
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="slider">
<img src="images/slider.jpg" alt="NFF Sri Lanka slider" title="NFF Sri Lanka Slider">
</div>
</div>
<p style="text-align:center; padding:0px;">© Copyright 2014 - Damitha N. Wanniarachchi</p>
</body>
</html>
Try like it,
Html code:-
<nav>
<h1>
<a href="#">
<img src="contectIcon.png" alt="NFF Sri Lanka Logo" width="218" height="139" title="NFF Sri Lanka Logo">
</a>
</h1>
<label for="show-menu" class="show-menu">Show</br>Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>HOME
</li>
<li>INFO ￬
<ul class="hidden">
<li>National Rainforests
</li>
<li>Aninmals & Plants
</li>
<li>Nature Convservation
</li>
</ul>
</li>
<li>BLOG
</li>
<li>ABOUT ￬
<ul class="hidden">
<li>Our Mission & Vision
</li>
<li>Membership
</li>
<li>Donate us
</li>
</ul>
</li>
</ul>
</nav>
Add class in CSS
Css:-
nav h1{
float: left;
}
nav ul{
float: left;
margin: 40px 0 0 10px;
}
Media:-
#media screen and (max-width: 760px) {
nav ul , nav h1{
float: none;
}
#header img{
display: block;
margin: 0 auto;
}
}
Hope it will help you !