Css hover effect for sub menu is not working
and i also have one more problem why i cant directly use ul li tag... when i put #header #menu ul then it's working
sub menu is not working on hover
i am trying to open a submenu on menu hover but it's not working, any one have idea why that is behaving like that ? submenu also display upon a menu. and submenu should be open in right side of menu on hover.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
#header {
border: 2px solid black;
display: flex;
height: 50px;
}
#logo {
border: 2px solid red;
width: 30%;
}
#header {
margin: 5px;
}
#menu {
border: 2px solid blue;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
#header #menu ul {
border: 2px solid springgreen;
list-style: none;
display: flex;
}
#header #menu ul li {
padding: 10px;
margin-right: 5px;
margin-left: 20px;
color: slategrey;
font-weight: bold;
border: 1px solid pink;
position: relative;
}
#header #menu ul li:hover {
color: rgb(51, 61, 199);
}
i {
margin-left: 5px;
position: relative;
top: 2px;
}
#header #menu ul li ul {
display: none;
}
#headr #menu ul li:hover ul {
display: grid;
grid-template-columns: 1fr;
position: absolute;
left: 0px;
top: 30px;
background-color: white;
}
#hero {
border: 2px solid tomato;
height: 100%;
background-position: center;
background-size: cover;
background-image: url(a.jpg);
}
#overl {
width: 100%;
height: 100%;
background-color: rgba(10, 7, 7, 0.479);
}
<html>
<head>
<script src="https://kit.fontawesome.com/6c49b6f825.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="logo"><img src="logo.png" style="position: relative; left: 20px;"></div>
<div id="menu">
<ul>
<li>Home</li>
<li>Course<i class="fas fa-angle-down"></i>
<ul>
<li>AI</li>
<li>Python</li>
<li>IoT</li>
<li>Cyber Security</li>
<li>React</li>
<li>Angular</li>
</ul>
</li>
<li>Blog</li>
<li>Q&A</li>
<li>About Us</li>
<li>Contact</li>
<li>Login & Registration</li>
</ul>
</div>
</div>
<div id="hero">
<div id="overl">
</div>
</div>
</body>
</html>
there is little typo error in your css.
#headr #menu ul li:hover ul {
line should be
#header #menu ul li:hover ul{
Related
I'm trying to mimic this website (but with my own images): https://www.w3schools.com/w3css/tryw3css_templates_band.htm#
Every time I click on more to try to go down to "merchandise", "Extras" or "media" it closes (unless I do it very quickly). How can I fix this?
I know there's probably a better way of doing the drop-down menu in HTML/CSS but this is the only way I know how.
nav {
background-color: black;
height: 3rem;
widows: 100%;
}
.navbar {
height: 100%;
display: flex;
flex-flow: row wrap;
border: 1px solid hotpink;
justify-content: flex-start;
align-items: center;
}
.navbar li {
border: 2px solid green;
list-style-type: none;
height: 100%;
}
.navbar li a {
border: 1px solid orange;
color: white;
text-decoration: none;
padding: 0 20px;
text-transform: uppercase;
display: block;
height: 100%;
line-height: 2rem;
}
.navbar li a:hover {
background-color: #CCCCCC;
color: black;
display: block;
height: 100%;
}
section#header-image {
background-image: url('images/sky.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 60vh;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;
color: white;
}
.moreArrow{
height: 6px;
width: 8px;
margin-left: 5px;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
ul li:hover ul li a {
color: white;
background-color: black;
text-decoration: none;
padding: 0 20px;
height: 100%;
}
<header>
<nav>
<ul class="navbar">
<li>home</li>
<li>band</li>
<li>tour</li>
<li>contact</li>
<li>more<img src="images/arrow.png" alt="x" class="moreArrow">
<ul>
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
</ul>
</nav> <!--end of nav-->
<section id="header-image">
<div class="header-text">
<h2>London</h2>
<p>We killing it up in 'ere </p>
</div>
</section>
</header>
So, i made a lil change on your HTML, in order to persist ':hover' state you need to put anything that it has to stay visible inside the hovered item, in this case, a 'span' tag (i did changed from an 'a' tag because you cant nest 'a' tags)
The css is pretty simple from this point, you hide the sub menu and display on hover, anything that its inside the span tag belongs to ':hover' state as well
body {
margin: 0px;
}
nav {
width: 100vw;
height: auto;
border: 1px solid red;
}
nav ul.navbar {
display: flex;
margin: 0;
padding: 0;
}
nav ul.navbar > li {
width: auto;
display: inline-block;
vertical-align: top;
}
nav ul.navbar > li a {
display: inline-block;
text-decoration: none;
color: black;
border: 1px solid red;
padding: 10px 30px;
box-sizing: border-box;
width: auto;
}
nav ul.navbar > li span {
display: inline-block;
text-decoration: none;
color: black;
border: 1px solid red;
position: relative;
padding: 10px 30px;
}
nav ul.navbar > li span:hover ul {
display: inline-block;
}
nav ul.navbar > li span ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 38px;
left: 0px;
width: auto;
border: 1px solid blue;
}
nav ul.navbar > li span ul li {
display: inline-block;
list-style: none;
width: 100%;
}
nav ul.navbar > li span ul li a {
width: 100%;
display: inline-block;
}
<header>
<nav>
<ul class="navbar">
<li>home</li>
<li>band</li>
<li>tour</li>
<li>contact</li>
<li>
<span class="more">more
<ul rel=":D">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</span>
</li>
</ul>
</nav> <!--end of nav-->
</header>
Hope this helps
why is my drop down menu not working?
attaching image with the code.
what additions do i need to add in oder to make the dropdown menu work
the output is somewhat like this
exams
java c c++
the is not drop down menu.
html code :
<html>
<head>
<title> Website Design </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="nav">
<ul class="menu">
<li>Home</li>
<li>
Exams
<ul>
<li>
JAVA
</li>
<li>
C
</li>
<li>
C++
</li>
</ul>
</li>
<li>Login</li>
<li>Review</li>
<li>Contact</li>
</ul>
</div>
</header>
</body>
</html>
and css code
header{
background: rgba(0,0,100,0.5);
height: 100vh;
}
.nav{
background: rgba(0,0,0,.5);
height: 80px;
}
.menu{
float: right;
list-style: none;
margin: 20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border-bottom: 1px solid #fff;
}
.menu li a:hover{
background: coral;
border-bottom: 1px solid coral;
transition: .4s;
}
.
--> Please update following code in your existing file
header{
background: rgba(0,0,100,0.5);
height: 100vh;
}
.nav{
background: rgba(0,0,0,.5);
height: 80px;
}
.menu{
float: right;
list-style: none;
margin: 20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
position: relative;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border-bottom: 1px solid #fff;
}
.menu li a:hover{
background: coral;
border-bottom: 1px solid coral;
transition: .4s;
}
ul.menu ul {
visibility: hidden;
opacity: 0;
position: absolute;
padding: 0;
top: 26px;
transition: 0.3s ease-in-out;
}
ul.menu ul li {
margin-left: 0;
margin-right: 0;
width: 100%;
}
ul.menu > li:hover ul {
visibility: visible;
opacity: 1;
}
<html>
<head>
<title> Website Design </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="nav">
<ul class="menu">
<li>Home</li>
<li>
Exams
<ul>
<li>
JAVA
</li>
<li>
C
</li>
<li>
C++
</li>
</ul>
</li>
<li>Login</li>
<li>Review</li>
<li>Contact</li>
</ul>
</div>
</header>
</body>
</html>
You have not yet added the css code to make the dropdown work. Try this css code with your html to make it work.
header{
background: rgba(0,0,100,0.5);
height: 100vh;
}
.nav{
background: rgba(0,0,0,.5);
height: 80px;
}
.menu{
float: right;
list-style: none;
margin: 20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border-bottom: 1px solid #fff;
}
.menu li a:hover{
background: coral;
border-bottom: 1px solid coral;
transition: .4s;
}
.menu > li {
position: relative;
}
.menu > li > ul {
display: none;
position: absolute;
left: 0;
top: 100%;
background: red;
width: 120px;
}
.menu > li > ul > li {
display: block;
width: 100%;
}
.menu > li:hover > ul {
display: block;
}
i'm new with css. i'm trying to make a navigation menu with sub items, but i think i'm missing something. the sub items are over lapping with the main items.
so the way i see it that the top list items are floated so are removed from the normal content flow. Which means i need to clear the float after so that the sub items display under the main items.
But its not working for me..Any ideas
https://jsfiddle.net/madubuko/szqk5be9/
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>
News
<ul>
<li><a>Football News</a></li>
<li><a>Team News</a></li>
<li><a>Players News</a></li>
<li><a>Other News</a></li>
</ul>
</li>
<li>Contact</li>
<li>About us</li>
</ul>
</nav>
</div>
</body>
Please Replace this code with your old code :
* {
padding: 0px;
margin: 0px;
}
body {
background-image: url("../images/background.jpeg");
}
#container {
width: 100%;
}
nav {}
#container nav ul {
list-style: none;
}
#container nav ul li {
float: left;
width: 100px;
height: 40px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
padding-top: 7px;
opacity: 0.8;
position: relative;
}
#container nav ul li a {
color: white;
text-decoration: none;
display: block;
}
#container nav ul li ul li {
clear: both;
}
#container nav ul li ul {
position: absolute;
top: 100%;
display: none;
}
#container nav ul li:hover ul{
display:block;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/corecss.css" type="text/css">
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>
News
<ul>
<li><a>Football News</a></li>
<li><a>Team News</a></li>
<li><a>Players News</a></li>
<li><a>Other News</a></li>
</ul>
</li>
<li>Contact</li>
<li>About us</li>
</ul>
</nav>
</div>
</body>
</html>
Add Some CSS
#container nav ul li {
float: left;
width: 100px;
height: 40px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
padding-top: 7px;
opacity: 0.8;
position: relative;/*Add This Property*/
}
#container nav ul li ul {
position: absolute;
top: 100%;
display: none;
}
#container nav ul li:hover ul{
display:block;
}
https://jsfiddle.net/szqk5be9/2/
You can set it using position, check updated snippet below
* {
padding: 0px;
margin: 0px;
}
body {
background-image: url("../images/background.jpeg");
}
#container {
width: 100%;
}
nav {}
#container nav ul {
list-style: none;
}
#container nav ul li {
float: left;
width: 100px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
padding: 7px 5px;
opacity: 0.8;
position: relative;
}
#container nav ul li a {
color: white;
text-decoration: none;
display: block;
}
#container nav ul li ul li {
clear: both;
}
#container nav ul li ul {
position: absolute;
top: 100%;
display: none;
}
#container nav ul li:hover ul{
display:block;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>
News
<ul>
<li><a>Football News</a></li>
<li><a>Team News</a></li>
<li><a>Players News</a></li>
<li><a>Other News</a></li>
</ul>
</li>
<li>Contact</li>
<li>About us</li>
</ul>
</nav>
</div>
You can select only the first ul with direct children selector >, then it works.
#container nav > ul li {
float: left;
width: 100px;
height: 40px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
line-height: 40px;
opacity: 0.8;
}
I am new in CSS and developing a dropdown menu. But when I add drop down list into main list it floats left. But I want float towards bottom Like thisCan anyone please help me that how to make list which drops Down
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body
{
margin: 0;}
#Header
{
position: fixed;
border: 1px solid black;
width: 100%;
height: 150px;
margin: 0%;
}
#logo
{
position: absolute;
border: 1px solid black;
width: 20%;
height: 150px;
margin: 0%;
}
#nav
{
position: absolute;
border: 1px solid black;
width: 79.5%;
height: 50px;
top: 65%;
margin-left: 20.2%;
background: transparent;
}
#nav ul
{
margin: 0;
padding: 0;
}
#nav ul li
{
list-style: none;
position:relative;
float: left;
margin:5px;
}
#nav ul li a{
text-decoration: none;
display: block;
padding: 10px 20px;
color: black;
font-size: 120%;
}
a:hover {
background: gray;
color:white;
height: 30px;
}
#subList
{
margin: 0;
padding: 0;
}
#subList li
{
list-style: none;
position:absolute;
margin:5px;
}
/* #nav ul li ul
{
display: block;
margin: 0px;
padding: 0px;
}
#nav ul li ul li
{
list-style: none;
position:relative;
float: bottom;
}
#nav ul li ul li a
{
position:absolute;
dispay:block;
color: black;
font-size: 120%;
}
/* #nav ul li:hover>ul
{
display: block;
}
*/
</style>
</head>
<body>
<div id="Header">
<div id="logo"></div>
<div id="nav">
<ul>
<li>Home</li>
<li>News
<ul id="subList">
<li>news1</li>
<li>news2</li>
<li>news3</li>
<li>news4</li>
</ul>
</li>
<li>About us</li>
<li>Sign in</li>
</ul>
</div>
</div>
</body>
</html>
You need to define specificity for direct child of nav. In your case this is setting all the ul li to float left.
try this.
#nav > ul > li
{
list-style: none;
position:relative;
float: left;
margin:5px;
}
Hope this help you!
This should get you started.
#nav {
border: 1px solid black;
width: 79.5%;
height: 50px;
top: 65%;
margin-left: 20.2%;
background: transparent;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav ul li {
list-style: none;
position: relative;
float: left;
margin: 5px;
}
#nav ul li a {
text-decoration: none;
display: block;
padding: 10px 20px;
color: black;
font-size: 120%;
}
a:hover {
background: gray;
color: white;
}
#subList {
margin: 0;
padding: 0;
position: absolute;
display: none;
background: #fff;
border: 1px solid #000;
}
#subList li {
list-style: none;
margin: 5px;
}
#nav ul li:hover > #subList {
display: block;
left: 0;
}
<div id="nav">
<ul>
<li>Home
</li>
<li>News
<ul id="subList">
<li>news1
</li>
<li>news2
</li>
<li>news3
</li>
<li>news4
</li>
</ul>
</li>
<li>About us
</li>
<li>Sign in
</li>
</ul>
</div>
I am working on a menu bar for a web site and the dropdown menu's work fine, the only problem is they will only display when my mouse is right at the edge of where they come out. Can anyone help, would be much appreciated. The part that you have to hover over is the very bottom of the red areas, and on dropdown 1 another submenu at the bottom to the right.
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="shortcut icon" href="#"/>
</head>
<body>
<div id="banner">
<p id="title">Code Works</p>
</div>
<center>
<div style="background-color: #FFFF00" id="display">=</div>
</center>
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Setting Up +
<ul>
<li>Programs</li>
<li>Files</li>
</ul>
</li>
</ul>
</li>
<li>Templates +
<ul>
<li>Web Page</li>
<li>Clocks</li>
<li>Calendars</li>
<li>Maps</li>
<li>Transitions</li>
<li>Video</li>
<li>Audio</li>
<li>Search</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
**CSS**
html {
height: 100%;
}
body {
background: linear-gradient(#C0C0C0, #E0E0E0);
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
#banner
{
width: 1376px;
margin-left: -10px;
margin-right: -10px;
margin-top: -32px;
padding-top: 0px;
background-color: #3366CC;
background-size: 100%;
height: 80px;
border-bottom: 4px inset #254A93;
background: linear-gradient(#3366CC, #2952A3);
}
#title
{
padding-top: 0.7em;
color: #FFFF00;
text-align: center;
font-size: 32px;
}
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: block;
}
nav ul
{
opacity: 0;
margin-top: -1px;
margin-left: -10px;
background: linear-gradient(#FFFF66, #FFFF00);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after
{
content: ""; clear: both; display: block;
}
nav ul li
{
float: left;
}
nav ul li:hover
{
border-bottom: 4px solid #FF0000;
background: linear-gradient (#FFFF66, #FFFF00);
border-top: 2px solid #FFFF66;
}
nav ul li:hover a
{
color: #3366CC;
}
nav ul li a
{
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul
{
width: 200px;
background: #FFFF00; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li
{
border: 2px outset #FFFF00;
background: linear-gradient(#FFFF66, #FFFF00);
float: none;
position: relative;
}
nav ul ul li a
{
padding: 15px 40px;
color: #757575;
}
nav ul ul li a:hover
{
border-top: #E0E0E0;
border-bottom: #E0E0E0;
background: linear-gradient(#FFFF00, #FFFF66);
}
nav ul ul ul
{
position: absolute; left: 100%; top:0;
}
p:hover ul
{
display: none;
}
nav ul:hover
{
opacity: 0.7;
}
nav ul:hover nav ul li
{
opacity: 0.7;
}
#display
{
opacity: 0.7;
height: 30px;
background: linear-gradient(#FFFF00, #FFFF66);
}
#display a
{
size: 32px;
text-decoration: none;
}
nav ul ul li:hover
{
border-top: 1px solid #E0E0E0;
border-bottom: 1px solid #E0E0E0;
}
I think there are some redundant CSS in your code, but to make it work, you just need to add the line opacity:0.7 to this CSS:
nav ul li:hover > ul {
display:block;
opacity:0.7;
}
Here is the working fiddle