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.
Related
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 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