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;
}
Related
I am new to HTML and CSS and was trying to make a random website about astronomy. And I can't figure out what my dropdown menu is not working. I googled a lot and saw many youtube videos, but still cannot find a solution. When I change the display in sub-menu in CSS to block, it shows the submenus but in a horizondal line. Should I rewrite the whole code or is it editable? I am new HTML and CSS so excuse my mistakes and lack of knowledge. Thanks.
*{
margin: 0;
padding: 0;
font-family: Century Gothic;
}
header{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 20px;
}
ul li{
display: inline-block;
}
ul li.active a{
background-color: #fff;
color: #000;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: #000;
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 1%;
left: 1%;
}
.title h1{
font-size: 40px;
color: white;
}
.sub-menu{
display: none;
position: relative;
}
.rocks:hover .sub-menu{
display: block;
position: absolute;
margin: 10px;
}
<header>
<div class="main">
<ul>
<li class="active">Home</li>
<li class="rocks">Planets</li>
<ul class="sub-menu">
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
<li>Major Moons</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="title">
<h1>ASTRONOMY</h1>
</div>
</header>
It's because you have to place your submenu inside the parent <li>.
Here's a working live Codepen.
*{
margin: 0;
padding: 0;
font-family: Century Gothic;
}
header{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 20px;
}
ul li{
display: inline-block;
}
ul li.active a{
background-color: #fff;
color: #000;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: #000;
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 1%;
left: 1%;
}
.title h1{
font-size: 40px;
color: white;
}
.sub-menu{
display: none;
position: relative;
}
.rocks:hover .sub-menu{
display: block;
position: absolute;
margin: 10px;
}
<header>
<div class="main">
<ul>
<li class="active">Home</li>
<li class="rocks">Planets
<ul class="sub-menu">
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
</li>
<li>Major Moons</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="title">
<h1>ASTRONOMY</h1>
</div>
</header>
Let me know in the comment if you need a help styling the dropdown menu.
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'm trying to create a drop-down menu for a webpage, but I don't like how it looks. Here is the link to my page and I posted the code here. Any help is appreciated.
http://scf.usc.edu/~diuguid/itp104/homepage.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Project Homepage</title>
</head>
<style>
#outercontainer{
width:820px;
height:1200px;
background-color:orange;
}
#header{
width: 300px;
height: 60px;
margin: 0 auto;
color:red;
font-size:40pt;
}
#drop-nav{
margin-right: 40px;
display: block;
width: 800px;
height: 30px;
background-color: black;
}
a{
display: block;
margin-right: 80px;
}
ul{
list-style: none;
padding: 0px;
margin-right: 40px;
}
ul li{
display: block;
position: relative;
float: left;
border:1px solid blue;
}
li ul{
display: none;
}
ul li a{
display: block;
background: #000;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover{
background: blue;
}
li:hover ul{
display: block;
position: absolute;
}
li:hover li{
float: none;
}
li:hover a{
background: #f00;
}
li:hover li a:hover{
background: #000;
}
#drop-nav li ul li{
border-top: 0px;
}
</style>
<body>
<div id="outercontainer">
<div id="header">
LA SPORTS
</div>
<div id="navbar">
<ul id="drop-nav">
<li>NBA
<ul>
<li>Lakers</li>
<li>Clippers</li>
</ul>
</li>
<li>MLB
<ul>
<li>Angels</li>
<li>Dodgers</li>
</ul>
</li>
<li>NHL
<ul>
<li>Kings</li>
</ul>
</li>
<li>NFL
<ul>
<li>Past Teams</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Add this is your css:
ul li a {
background: none repeat scroll 0 0 #000;
box-sizing: border-box;
color: #fff;
display: block;
padding: 5px 10px;
text-decoration: none;
white-space: nowrap;
width: 100%;
}
I hope it will helps you.
Just go through this link
http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css
this will be helpful to you for making dropdown.
I am having a problem where when I add padding to the list item "About Us" where it adds a line of background color down when I add padding to the list item. It is hard to explain but if you copy and paste the code into an html document and open it in a browser it will make much more sense. I am too new to these forums for it to let me post an image.
I apologize, but I am just getting into coding and so am struggling a little bit.
Thanks!
<!--Begin HTML-->
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header>
<img src="Bend-oregon-dentist.jpg">
<ul id="nav">
<li>Home</li>
<li>About Us
<ul>
<li>Our Services</li>
<li>Our Office</li>
</ul>
</li>
</ul>
</header>
</body>
</html>
<!--End HTML-->
/*BEGIN CSS*/
body {
margin: 0;
}
header {
background: rgba(8,118,71,1.00);
height: 175px;
}
#nav {
list-style: none;
text-align: center;
padding-bottom: 0px;
margin-bottom: 0px;
}
#nav li {
margin-left: 10px;
display: inline;
color: white;
font-family: verdana;
background: rgba(3, 78, 3, 0.96);
padding: 2px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#nav ul{
list-style: none;
}
#nav ul li {
display: none;
}
#nav li:hover ul {
height: 20px;
}
#nav li:hover ul li {
margin-left: 899px;
display: block;
background: rgba(174,175,185,0.9);
width: 79px;
border: 2px solid black;
border-bottom: 1px solid black;
text-align: left;
color: black;
font-size: 12px;
}
/*END CSS*/
EDIT:
Your menu needs many chages. see this updated Fiddle
#nav {
list-style: none;
text-align: center;
padding-bottom: 0px;
margin-bottom: 0px;
}
#nav li {
margin-left: 10px;
display: block;
color: white;
font-family: verdana;
background: rgba(3, 78, 3, 0.96);
padding: 10px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#nav ul {
list-style: none;
}
#nav li {
position:relative;
float:left;
}
#nav li > ul {
position:absolute;
top: 38px;
left: -50px;
width:200px;
display: none;
}
#nav li:hover > ul {
display: block;
text-align: left;
color: black;
font-size: 12px;
height:auto;
}
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