I've just started out with the basics of CSS and HTML, there's this problem that I am facing, In my Navbar , when I click on the Hamburger button , The properties that I had added to my text get reverted back to the default one , like the text-decoration changes to underline , How Do I Fix this?
HTML code
<html lang="en">
<head>
<title>My CSS Website</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<nav>
<ul class="top-nav" id="dropdownMenu">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="right-nav">Sign Up</li>
<li class="right-nav">Sign in</li>
<li class="dropdownIcon"><a href="javascript:void(0)" onclick="Hamburger()">☰</li>
</ul>
</nav>
<script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
if(x.className==="top-nav"){
x.className+="responsive";
}
else{
x.className="top-nav";
}
}
</script>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
nav,header,footer{
display: block;
}
body{
line-height: 1.5;
}
/* Navbar */
nav{
width:100%;
}
nav ul{
background-color: #eee;
overflow:hidden;
}
ul.top-nav li{
list-style:none;
float: left;
}
ul.top-nav li.right-nav{
min-height: 16px;
float: right;
}
ul.top-nav li a{
text-decoration: none;
padding: 1.25rem;
min-height:16px;
text-align: center;
text-transform: uppercase;
color:rgb(54, 49, 49);
display:block;
}
ul.top-nav li a:hover{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li.dropdownIcon{
display: none;
}
/* Mobile Version */
#media screen and (max-width:680px){
ul.top-nav li:not(:nth-child(1)){
display:none;
}
ul.top-nav li.dropdownIcon{
display: block;
float:right;
}
ul.top-nav.responsive{
position:relative;
}
ul.top-nav.responsive li{
display: inline;
float:none;
}
ul.top-nav.responsive li a {
display:block;
text-align:left;
text-decoration: none;
}
} ```
Because you don't add class in the right way also change onclick, don't wrap function into the string "Hamburger()" use this Hamburger()
<li class="dropdownIcon"><a href="javascript:void(0)" onclick=Hamburger()>☰</li>
</ul>
*{
margin:0;
padding:0;
}
nav,header,footer{
display: block;
}
body{
line-height: 1.5;
}
/* Navbar */
nav{
width:100%;
}
nav ul{
background-color: #eee;
overflow:hidden;
}
ul.top-nav li{
list-style:none;
float: left;
}
ul.top-nav li.right-nav{
min-height: 16px;
float: right;
}
ul.top-nav li a{
text-decoration: none;
padding: 1.25rem;
min-height:16px;
text-align: center;
text-transform: uppercase;
color:rgb(54, 49, 49);
display:block;
}
ul.top-nav li a:hover{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li.dropdownIcon{
display: none;
}
/* Mobile Version */
#media screen and (max-width:680px){
ul.top-nav li:not(:nth-child(1)){
display:none;
}
ul.top-nav li.dropdownIcon{
display: block;
float:right;
}
ul.top-nav.responsive{
position:relative;
}
ul.top-nav.responsive li{
display: inline;
float:none;
}
ul.top-nav.responsive li a {
display:block;
text-align:left !important;
text-decoration: none !important;
}
}
<nav>
<ul class="top-nav" id="dropdownMenu">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="right-nav">Sign Up</li>
<li class="right-nav">Sign in</li>
<li class="dropdownIcon"><a href="javascript:void(0)" onclick={Hamburger()}>☰</li>
</ul>
</nav>
<script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
if(x.className==="top-nav"){
x.classList.add("responsive")
// x.className+=" "+"responsive";
}
else{
x.className="top-nav";
}
}
</script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
if(x.className==="top-nav"){
//add class like this
x.className+=" "+"responsive";
or
x.classList.add("responsive");
}
else{
x.className="top-nav";
}
}
JavaScript Class
if you want get class list then use classList and classList return list
const list = element.classList
if you want to add class then.
element.classList.add("class_name");
if you want to remove class then.
element.classList.remove("class_name");
if you want to toggle class then. (toggle check if class exist then remove class and else add class).
element.classList.toggle("class_name");
*{
margin:0;
padding:0;
}
nav,header,footer{
display: block;
}
body{
line-height: 1.5;
}
/* Navbar */
nav{
width:100%;
}
nav ul{
background-color: #eee;
overflow:hidden;
}
ul.top-nav li{
list-style:none;
float: left;
}
ul.top-nav li.right-nav{
min-height: 16px;
float: right;
}
ul.top-nav li a{
text-decoration: none;
padding: 1.25rem;
min-height:16px;
text-align: center;
text-transform: uppercase;
color:rgb(54, 49, 49);
display:block;
}
ul.top-nav li a:hover{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li a:active{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li.dropdownIcon{
display: none;
}
/* Mobile Version */
#media screen and (max-width:680px){
ul.top-nav li:not(:nth-child(1)){
display:none;
}
ul.top-nav li.dropdownIcon{
display: block;
float:right;
}
ul.top-nav.responsive{
position:relative;
}
ul.top-nav.responsive li{
display: inline;
float:none;
}
ul.top-nav.responsive li a {
display:block;
text-align:left;
text-decoration: none;
}
}
<head>
<title>My CSS Website</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<nav>
<ul class="top-nav" id="dropdownMenu">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="right-nav">Sign Up</li>
<li class="right-nav">Sign in</li>
<li class="dropdownIcon"><a href="javascript:void(0)" onclick="Hamburger()">☰</li>
</ul>
</nav>
<script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
x.classList.toggle("responsive");
}
</script>
</body>
I think this code is help you! thank you!
Related
I want to get my nav bar to stick at the top when scrolling on the web page.
I have tried searching on here for a solution but am struggling as it is causing more errors.
When using position:fixed, I find that it causes issues with the original postion which I want to be below my banner logo.
My code for HTML and CSS is below.
Thank you
/* ******************* */
/* Navigiation */
/* ******************* */
#sitenav a {
text-decoration: none;
color: white;
padding: inherit;
}
#sitenav ul {
background: black;
padding: 15px;
}
#sitenav ul li {
padding: 15px;
background: black;
display: block;
text-align: center;
font-family: 'Montserrat', sans-serif;
display: inline;
}
#sitenav ul li:hover {
background: rgb(43, 78, 89);
color:white;
cursor:pointer;
}
<header class="clearfix">
<div id="banner" class="middlecontent">
<img src="images/logobanner.png">
</div>
<nav>
<div id="sitenav">
<ul >
<li>Home</li>
<li>Events</li>
<li>Curriculum</li>
<li>About</li>
<li>Student</li>
<li>Staff</li>
</ul>
</div>
</nav>
</header>
If you don't need to support older browsers, you can use position: sticky
https://developer.mozilla.org/pl/docs/Web/CSS/position#Sticky_positioning
Please try this I have added some code.
JQuery:
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= ($("header").height())) {
$("#sitenav").addClass("fix-header");
} else {
$("#sitenav").removeClass("fix-header");
}
});
Css:
body{
margin:0;
}
section{
background:#ccc;
height:800px;
}
#sitenav.fix-header {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
margin:0;
}
#sitenav.fix-header ul{
margin:0;
}
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= ($("header").height())) {
$("#sitenav").addClass("fix-header");
} else {
$("#sitenav").removeClass("fix-header");
}
});
/* ******************* */
/* Navigiation */
/* ******************* */
#sitenav a {
text-decoration: none;
color: white;
padding: inherit;
}
#sitenav ul {
background: black;
padding: 15px;
}
#sitenav ul li {
padding: 15px;
background: black;
display: block;
text-align: center;
font-family: 'Montserrat', sans-serif;
display: inline;
}
#sitenav ul li:hover {
background: rgb(43, 78, 89);
color:white;
cursor:pointer;
}
body{
margin:0;
}
section{
background:#ccc;
height:1000px;
}
#sitenav.fix-header {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
margin:0;
}
#sitenav.fix-header ul{
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="clearfix">
<div id="banner" class="middlecontent">
<img src="images/logobanner.png">
</div>
<nav>
<div id="sitenav">
<ul>
<li>Home</li>
<li>Events</li>
<li>Curriculum</li>
<li>About</li>
<li>Student</li>
<li>Staff</li>
</ul>
</div>
</nav>
</header>
<!--this for demo for checking scroll-->
<section>
</section>
You should try this code.
$(window).ready(function() {
var header = $('nav').innerHeight();
var window_scroll = $(window).scrollTop();
if (window_scroll >= header) $("nav").addClass("sticky");
else $("header").removeClass("nav");
})
$(window).on("scroll", function() {
var header = $('nav').innerHeight();
var scroll = $(window).scrollTop();
if (scroll >= header) $("nav").addClass("sticky");
else $("nav").removeClass("sticky");
});
nav{
position:absolute;
width:100%;
height:50px;
top:0;
left:0;
}
nav.sticky{
position:fixed;
width:100%;
z-index:99;
top:0;
left:0;
}
#sitenav a {
text-decoration: none;
color: white;
padding: inherit;
}
#sitenav ul {
background: black;
padding: 15px;
}
#sitenav ul li {
padding: 15px;
background: black;
display: block;
text-align: center;
font-family: 'Montserrat', sans-serif;
display: inline;
}
#sitenav ul li:hover {
background: rgb(43, 78, 89);
color:white;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header class="clearfix">
<div id="banner" class="middlecontent">
<img src="images/logobanner.png">
</div>
<nav>
<div id="sitenav">
<ul >
<li>Home</li>
<li>Events</li>
<li>Curriculum</li>
<li>About</li>
<li>Student</li>
<li>Staff</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
I need some help. I am working on this navigation bra that has a list of menu in it, and one of them is Award. Award has submenu that is hidden, and if I hover it, it submenu should be visible to the user. However, when I hover over the Award, it submenu not being visible to the user. I don't what I am doing wrong. I was hopping that someone could help me here, Please.
Here is my code
function openNav() {
document.getElementById("nav_sidebar").style.width = "142px";
document.getElementById("main").style.height = "142px";
}
function closeNav() {
document.getElementById("nav_sidebar").style.width = "0";
document.getElementById("main").style.height= "0";
}
.sidebar {
width: 0;
list-style: none;
position: absolute;
height: 100%;
z-index: 0;
left: 2px;
background: #38424f;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}
.sidebar ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
.sidebar ul li:hover {
background:#f6f6f6
}
.sidebar ul {
display:none;
position: absolute;
left: 5%;
background: #fff;
padding:0
}
.sidebar ul li {
float:none;
width:200px
}
.sidebar li ul:hover
{
display: block;
}
.sidebar li a {
padding: 5px 8px 8px 15px;
text-decoration: none;
font-size: 22px;
color: #4ba6c1;
display: block;
transition: 0.3s
}
.sidebar a:hover, .offcanvas a:focus{
color: #ffffff;
}
.sidebar .close {
position: absolute;
top: 0;
right: 10px;
font-size: 20px;
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin</title>
<meta charset="utf-8">
<script src="../src//jquery/jquery.min.js"></script>
<link href="../css/Main.css" rel="stylesheet">
<script src="../javascript/Scritp.js"></script>
</head>
<body>
<div class ="side_nave">
<label class = "nav" onclick="openNav()">☰ Menu</label>
<div class="main_panel" id = "main">
<div class="sidebar" id = "nav_sidebar">
<li><a href="javascript:void(0)" class="close" onclick=
"closeNav()">×</a></li>
<li><a class ="active" href="#">Employee</a></li>
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Certificate</li>
<li>Update</li>
<li>Sent Email</li>
<li>Settings</li>
<li>Logout</li>
</div>
</div>
</div>
</body>
</html>
You're targeting .sidebar li ul:hover to show the hidden ul. That won't work because the ul you want to hover is hidden - you can't hover the element if it's hidden. Instead, you need to target .sidebar li:hover > ul which means that when you hover a li it will show any direct child ul's
function openNav() {
document.getElementById("nav_sidebar").style.width = "142px";
document.getElementById("main").style.height = "142px";
}
function closeNav() {
document.getElementById("nav_sidebar").style.width = "0";
document.getElementById("main").style.height= "0";
}
.sidebar {
width: 0;
list-style: none;
position: absolute;
height: 100%;
z-index: 0;
left: 2px;
background: #38424f;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}
.sidebar ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
.sidebar ul li:hover {
background:#f6f6f6
}
.sidebar ul {
display:none;
position: absolute;
left: 5%;
background: #fff;
padding:0
}
.sidebar ul li {
float:none;
width:200px
}
.sidebar li:hover > ul
{
display: block;
}
.sidebar li a {
padding: 5px 8px 8px 15px;
text-decoration: none;
font-size: 22px;
color: #4ba6c1;
display: block;
transition: 0.3s
}
.sidebar a:hover, .offcanvas a:focus{
color: #ffffff;
}
.sidebar .close {
position: absolute;
top: 0;
right: 10px;
font-size: 20px;
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin</title>
<meta charset="utf-8">
<script src="../src//jquery/jquery.min.js"></script>
<link href="../css/Main.css" rel="stylesheet">
<script src="../javascript/Scritp.js"></script>
</head>
<body>
<div class ="side_nave">
<label class = "nav" onclick="openNav()">☰ Menu</label>
<div class="main_panel" id = "main">
<div class="sidebar" id = "nav_sidebar">
<li><a href="javascript:void(0)" class="close" onclick=
"closeNav()">×</a></li>
<li><a class ="active" href="#">Employee</a></li>
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Certificate</li>
<li>Update</li>
<li>Sent Email</li>
<li>Settings</li>
<li>Logout</li>
</div>
</div>
</div>
</body>
</html>
You can even solve this without JavaScript:
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
#awards ul{
display:none;
}
#awards:hover ul{
display:block;
}
I'm brand new to HTML and CSS, and right now I'm following this tutorial. My problem see picture is that the items in my drop-down list are not in a vertical line, but all cluttered together.
I'm sure it's a simple problem with a simple solution but I am not making any progress finding one...
I would be so grateful for some suggestions! :)
* {
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 10px;
}
/* ----- NAVIGATION BAR ----- */
#nav {
width:500px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
background-color: none;
}
#nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
#nav ul:after{
content: "";
clear: both;
display: block;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: block;
padding: 10px 20px;
color: black;
text-decoration: none;
font-family: "Trocchi", serif;
}
#nav ul li:hover {
background: #76C5CF;
}
#nav ul li:hover a {
color: white;
}
#nav ul ul {
display: none;
background: none;
position: absolute;
top: 100%;
}
#nav ul li:hover > ul {
display: block;
}
/* ----- HEADER ----- */
#header {
width: 340px
margin: auto;
margin-top: 10px;
text-align: center;
}
#header h1 {
height: 50px;
font-family: "Trocchi", serif;
background-color:
}
#header h2 {
font-family: "Trocchi", serif;
position: relative;
display: inline;
}
/* ----- BACKGROUND ----- */
body {
background-color: #A6D7F3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> Harley's Haunts </title>
<link rel="stylesheet" type="text/css" href="harleysHaunts.css">
<style>
#import url('https://fonts.googleapis.com/css?family=Trocchi');
</style>
</head>
<body>
<div id="header">
<h1> HARLEY'S HAUNTS </h1>
<h2> It's a dog's world after all </h2>
</div>
<div id="nav">
<ul>
<li> About </li>
<li> Pet-Friendly Venues
<ul>
<li> Cafes </li>
<li> Restaurants </li>
<li> Pubs/Bars </li>
<li> Shops </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
</body>
</html>
All you have to do is add position:relative to #nav ul li :
#nav ul li {
float: left;
position: relative;
}
but you should use this only for the li parent and you shouldn't use float:left in the li of the ul child.
So your css will become like this
#nav > ul > li {
float: left;
position: relative;
}
Add a specific width to #nav ul ul, gave it 200px as example considering parent ul width
* {
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 10px;
}
/* ----- NAVIGATION BAR ----- */
#nav {
width:500px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
background-color: none;
}
#nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
#nav ul:after{
content: "";
clear: both;
display: block;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: block;
padding: 10px 20px;
color: black;
text-decoration: none;
font-family: "Trocchi", serif;
}
#nav ul li:hover {
background: #76C5CF;
}
#nav ul li:hover a {
color: white;
}
#nav ul ul {
display: none;
background: none;
position: absolute;
top: 100%;
width: 200px;
}
#nav ul li:hover > ul {
display: block;
}
/* ----- HEADER ----- */
#header {
width: 340px
margin: auto;
margin-top: 10px;
text-align: center;
}
#header h1 {
height: 50px;
font-family: "Trocchi", serif;
background-color:
}
#header h2 {
font-family: "Trocchi", serif;
position: relative;
display: inline;
}
/* ----- BACKGROUND ----- */
body {
background-color: #A6D7F3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> Harley's Haunts </title>
<link rel="stylesheet" type="text/css" href="harleysHaunts.css">
<style>
#import url('https://fonts.googleapis.com/css?family=Trocchi');
</style>
</head>
<body>
<div id="header">
<h1> HARLEY'S HAUNTS </h1>
<h2> It's a dog's world after all </h2>
</div>
<div id="nav">
<ul>
<li> About </li>
<li> Pet-Friendly Venues
<ul>
<li> Cafes </li>
<li> Restaurants </li>
<li> Pubs/Bars </li>
<li> Shops </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
</body>
</html>
You have applied rules CSS for all children of the ul parent, so all chidren of ul ul they will be inherited the rule of parent CSS.
Try to use selector reference '>' when you want to target only parent element
For this exemple you just change
#nav ul li {
float: left;
}
by
#nav > ul >li {
float: left;
}
I'm having trouble getting the a:hover element to work. I am an amateur, so please be easy... I've tried using the #menubar:hover as well but that doesn't seem to work either.
This code is going into the header of another program. The only reason I got into this was to make the header of this program look identical to the website. Below is my code for the header.
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Please Help!
check this
#menubar li a:hover {
color: yellow;
}
full code :
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
#menubar li a:hover{
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow !important;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Here the style of a tag is overriding the hover. So if you place it as !important, that style will be given priority than other styles and it will override all other styles. Just place !important at color:yellow and it works.
I wanted to see if I could get this working without an !importance. The issue is that the CSS selector which sets the text to white is using a greater specificity than the hover style. The best way to do this is to set a better level of specificity to the hover which will allow it to work. Use this in the hover.
#menubar li a:hover {
color: yellow;
}
It is because #menubar>li>a{background-color: #303432;} will overlap your css. a:hover{color:yellow;} So, make it important on hover like in answer.
a:hover {color: yellow !important;}
Or
#menubar>li>a:hover{color: yellow;}
Will solve your issue.
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow !important;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Hope it helps.
I have an existing website with the menu code below and I want to add more stuff to my site but users need to nevigate to those pages please help me to add a sub menu to the code I have. Please help?
HTML
<div id="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>FAQ</li>
<li class="active">About</li>
<li>Contact Us</li>
</ul>
</div>
CSS
/** HEADER */
#header-wrapper
{
overflow: none;
height: 100px;
margin-bottom: 20px;
background: rgba(0,0,0,0.70);
}
#header {
overflow: none;
}
/** LOGO */
#logo {
float: left;
width: 10px;
height: 100px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
}
#logo h1 a {
padding-left: 1px;
text-decoration: none;
font-size: 1.50em;
font-weight: 600;
font-family: 'Archivo Narrow', sans-serif;
color: #FFFFFF
}
/** MENU */
#menu {
float: right;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
display: block;
height: 100px;
padding: 0px 30px;
line-height: 100px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: none;
background: rgba(0,0,0,0.70);
}
#menu .active
{
background: rgba(0,0,0,0.70);
}
Working menu:
a quick fiddle for you
//HTML
<div id="menu">
<ul>
<li>Home
</li>
<li>Services
<ul>
<li>Something You do
</li>
<li>TODO
</li>
</ul>
</li>
<li>FAQ
</li>
<li class="active">About
</li>
<li>Contact Us
</li>
</ul>
</div>
//CSS
/** MENU */
#menu {
position:relative;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
float:left;
line-height: 110px;
}
#menu li {
list-style:none;
}
#menu>ul>li {
float: left;
margin-right: 1px;
position:relative;
}
#menu>ul>li ul {
height:100%;
position:absolute;
bottom:-100%
}
#menu>ul>li ul>li {
bottom:0px;
display:none;
width:15em;
float:left;
}
#menu>ul>li:hover ul>li {
display:block
}
#menu a {
display:block;
padding: 0px 30px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
background:rgba(200, 200, 200, 0.5);
}
#menu a:hover {
text-decoration: none;
cursor:pointer;
background:rgba(200, 200, 200, 1);
}
#menu .active {
}
Better to use jQuery plugin like Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
//link to the CSS files for this menu type
<link rel="stylesheet" media="screen" href="superfish.css">
// link to the JavaScript files (hoverIntent is optional)
// if you use hoverIntent, use the updated r7 version (see FAQ)
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>
// initialise Superfish
<script>
jQuery(document).ready(function(){
jQuery('#menu ul').superfish();
});
</script>
Well, first add your submenu in the markup, for example:
<li>Services
<ul>
<li> sub menu item 1 </li>
<li> sub menu item 2 </li>
</ul>
</li>
....
Position your list items:
#menu li{
position: relative;
}
Style your sub menu:
#menu ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display: none; /* hide it */
}
#menu li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Try http://jsfiddle.net/9LcfX/