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;
}
Related
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{
I'm new to html and css. I follow a tutorial in youtube. This is all about navigational bar and drop down in html and css.
The name Ria, Kezia, and Gelia should be display when I hover my mouse in Support option.
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
<div id="container">
<ul>
<li>Support</li>
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
Add CSS styles to dropdown button and try this code.
<head>
<style>
*{
margin:0px;
padding:0px;
}
#container ul{
list-style:none; /*This will remove the bullet*/
}
#container ul li{
background-color:#3C4794; /*Adds a back-color.*/
width:150px;
border:1px solid white;
height:50px;
line-height:50px;
text-align:center; /*Show the text in the middle*/
float:left;
color:white; /*Font color*/
font-size:18px;
}
#container ul li:hover {
background-color:#388222; /*Change the color when hovering the mouse.*/
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top:50px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>
<div class="dropdown">
<ul>
<li>Support</li>
</ul>
<div class="dropdown-content">
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</div>
</div>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</body>
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
#container ul li ul {
display: none;
z-index: 100;
position: relative;
}
#container ul li:hover ul {
display: block;
}
<div id="container">
<ul>
<li>Support
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</div>
You can do it this way:
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
position:absolute;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
#sub {
display: none;
}
#container ul li:hover #sub {
display: block;
}
<div id="container">
<ul>
<li>Support
<ol id="sub">
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ol>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</div>
JSFiddle
Old JSFiddle (with JS)
You have to add some css property for dropdown. Here you code has been edited
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the
mouse.*/
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div id="container">
<ul>
<li class="dropdown">Support
<ul class="dropdown-content">
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
here i added some css code in your style and added some clss in your html elements
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
You need to place your submenu in li element and hide it by CSS, then you can write styles for pseudo-class if you want that submenu to appear on hover
So, first that you need, move inner ul element in li, like that:
<li>Support
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
Further you need set right styles.
li need to have position: relative, this is let inner ul element take the right position
Inner ul should be hidden by default state and be appearing on hover on parent element;
This styles should help:
ul > li {
position: relative;
}
li > ul {
display: none;
bottom: 0;
left: 0;
}
li:hover > ul {
display: block
}
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
I have noticed my nav bar is transparent and I would like it to not be. I have no previous opacity/transparency set that would cause it to be inheriting the property. I would like to make my nav bar non transparent.
Here is the CSS:
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
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 {
background: black;
}
nav ul li:hover a {
opacity: 1;
color: white;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
}
Here is the corresponding HTML:
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
<li>Starter Kits</li>
<li>Rebuildables
<ul>
<li>Genesis</li>
<li>Dripper</li>
<li>Silica/Cotton</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical</li>
<li>Variable Voltage</li>
</ul>
</li>
<li>Accessories</li>
</ul>
</nav>
<p id="welcome_paragraph">
Welcome, blah blah (this text shows through the nav bar)<br />
</p>
HTML
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
<li>Starter Kits
</li>
<li>Rebuildables
<ul>
<li>Genesis
</li>
<li>Dripper
</li>
<li>Silica/Cotton
</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical
</li>
<li>Variable Voltage
</li>
</ul>
</li>
<li>Accessories
</li>
</ul>
</nav>
<p id="welcome_paragraph">Welcome, blah blah (this text shows through the nav bar)
<br />
</p>
CSS
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
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 {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
color:white;
}
body
{
background-color:blue;
}
Updated CSS of yours
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
Updated Fiddle
Have you tried;
nav {
background: white;
}
Elements are transparent unless you set a background on them or its inherited.
EDIT: If this doesn't help set up a fiddle for us jsfiddle.net.
In your css
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
background is white.
If you change background to other colour may be your problem will go off. Hope it will help
Cheers !!