body {
background: url('nature.jpg') no-repeat;
background-size: none;
margin-left: 10%;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-top: 7800px;
bottom: 100%;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li{
display: none;
}
ul li:hover ul li {
display: block;
}
body {
background-image:url("hintergrundbild.png"),url("hg2.jpg");
background-attachment: scroll,fixed;
background-repeat:no-repeat,no-repeat;
}
html body {
padding: 0px;
margin: 0px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>
Motorräder
</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li id="navi1">Motorradarten
<ul>
<li id="typen">Chopper</li>
<li id="typen">Supersportler</li>
<li id="typen">Naked Bike</li>
<li id="typen">Tourer</li>
<li id="typen">Enduro</li>
</ul></li>
<li id="navi2">Motorradmarken</li>
<li id="navi3">Gefahren & Sicherheit</li>
</ul>
</body>
</html>
Hello guys,
I am trying to make a website with an "drop-up" menu.
The drop-down is working but I cant get it to got upwards.
The Background image kind of works like an intro, that's why the drop-down menu is that far down.
I also want the background to change when I hover over the different menu-points, is that possible?
I hope you guys can help me and if so
Thank you all for your help!
Try to make use of transform: translateY(-100%); to the dropdown
body {
background: url('nature.jpg') no-repeat;
background-size: none;
margin-left: 10%;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
font: 13px Verdana;
}
ul li {
float: left;
width: 160px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
margin-top: 700px;
bottom: 100%;
position: relative;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul {
position: absolute;
top: 0;
left: 0;
width: 160px;
display: none;
transform: translateY(-100%);
}
ul li ul li {
margin: 0;
}
ul li:hover ul {
display: block;
}
body {
background-image: url("hintergrundbild.png"), url("hg2.jpg");
background-attachment: scroll, fixed;
background-repeat: no-repeat, no-repeat;
}
html body {
padding: 0px;
margin: 0px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>
Motorräder
</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li id="navi1">Motorradarten
<ul>
<li id="typen">Chopper</li>
<li id="typen">Supersportler</li>
<li id="typen">Naked Bike</li>
<li id="typen">Tourer</li>
<li id="typen">Enduro</li>
</ul>
</li>
<li id="navi2">Motorradmarken</li>
<li id="navi3">Gefahren & Sicherheit</li>
</ul>
</body>
</html>
I hope this will help you!
Related
I am new to css. I tried to follow a tutorial and implement it with slight changes. I tried to add a drop down menu using list. but instead of going down, the menu goes sideways. Help please!
I am new to css. I tried to follow a tutorial and implement it with slight changes. I tried to add a drop down menu using list. but instead of going down, the menu goes sideways. Help please!
I want a collapsible menu.
I would be helpful if you suggest some good sources to learn css
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
background-image:url("background.png")
}
nav{
background: #179942;
height: 80px;
width: 100%;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background:white;
color: #179942;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
nav ul li ul li{
display:none;
}
nav ul li:hover ul li{
display: inline-block;
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #179942;
}
#check:checked ~ ul{
left: 0;
}
}
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Saving Solutions :: Tisaso</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div id="header">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Tisaso.</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Products
<ul>
<li><a href="#" > IT Statement Preperer</a></li>
<li><a href="#" > IT Statement Preperer</a></li>
</ul>
</li>
<li>Contact</li>
<li>Feedback</li>
</ul>
</nav>
<section></section>
</div>
</body>
</html>
like this. beacuse of "display:inline-block" use in dropdown's li tag.i modify & add some css regarding dropdown.
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
background-image:url("background.png")
}
nav{
background: #179942;
height: 80px;
width: 100%;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background:white;
color: #179942;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
nav ul li ul li{
display:none;
}
nav ul li:hover ul li{
display: inline-block;
}
/*CSS FOR DROPDOWN*/
nav ul li > ul {
float: unset;
position: absolute;
top: 80px;
margin: 0;
display: none;
background-color: #179942;
}
nav ul li ul li {
display: block !important;
line-height: 44px;
}
nav ul li:hover > ul {
display: block;
padding: 15px 10px;
}
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #179942;
}
#check:checked ~ ul{
left: 0;
}
nav ul li > ul {
position: relative;
top: 0;
left: 0;
background: #2c3e50;
}
nav ul li > ul li {
display: block !important;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Saving Solutions :: Tisaso</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div id="header">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Tisaso.</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Products
<ul>
<li><a href="#" > IT Statement Preperer</a></li>
<li><a href="#" > IT Statement Preperer</a></li>
</ul>
</li>
<li>Contact</li>
<li>Feedback</li>
</ul>
</nav>
<section></section>
</div>
</body>
</html>
I don't know what's wrong with my code, I followed a tutorial on youtube to create a navbar with html and css. But, my design shows a gap between dropdown and the parent ul
I've looking for the answer in StackOverflow, trying the answer I found in StackOverflow, but it doesn't work either.
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
body {
padding: 0px;
margin: 0px;
}
header {
background-color: #217e6a;
height: 66px;
color: white;
}
header * {
color: white;
}
header .logo {
padding-left: 2em;
padding-right: 2em;
float: left;
height: inherit;
background-color: #0f5042;
}
header .logo-text {
margin: 5px;
}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
position: relative;
border: 1px solid red;
vertical-align: top;
}
header ul li ul {
position: absolute;
top: 66px;
right: 0px;
width: 200px;
display: none;
background-color: #217e6a;
border: 1px solid black;
vertical-align: top;
}
header ul li:hover ul {
display: block;
transition: 0.5s;
}
header ul li ul li {
width: 100%;
}
headerulli ul li:hover {
background-color: #0f5042;
}
header ul li a {
display: block;
padding: 21px;
font-size: 1.1em;
text-decoration: none;
}
header ul li a:hover {
background-color: #0f5042;
transition: 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=DM+Sans&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css" rel="stylesheet">
<link rel="stylesheet" href="<?php echo base_url() ?>assets/css/admin.css">
</head>
<body>
<header>
<div class="logo">
<div class="logo-text">
<h1>COVID-19 BJN</h1>
</div>
</div>
<ul>
<li>
Profile
<ul>
<li>
Profile
</li>
<li>
Sign Out
</li>
</ul>
</li>
</ul>
</header>
</body>
</html>
That's my code. Please help me how to fix that. Thanks
The a tag should have the height that is why you don't see full height.
NOTE: If you use a border then you have to decrease a pixel property to height since the border will fill that content, so you have to toggle between that requirement and should decide what is needed.
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
body {
padding: 0px;
margin: 0px;
}
header {
background-color: #217e6a;
height: 65px;
color: red;
}
header * {
color: white;
}
header .logo {
padding-left: 2em;
padding-right: 2em;
float: left;
height: inherit;
background-color: #0f5042;
}
header .logo-text {
margin: 5px;
}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
position: relative;
border: 0px solid red;
vertical-align: top;
}
header ul li ul {
position: absolute;
top: 65px;
right: 0px;
width: 200px;
display: none;
background-color: #217e6a;
border: 1px solid black;
vertical-align: top;
}
header ul li:hover ul {
display: block;
transition: 0.5s;
}
header ul li ul li {
width: 100%;
}
headerulli ul li:hover {
background-color: #0f5042;
}
header ul li a {
display: block;
padding: 21px;
font-size: 1.1em;
text-decoration: none;
height: 65px;
}
header ul li a:hover {
background-color: #0f5042;
transition: 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=DM+Sans&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css" rel="stylesheet">
<link rel="stylesheet" href="<?php echo base_url() ?>assets/css/admin.css">
</head>
<body>
<header>
<div class="logo">
<div class="logo-text">
<h1>COVID-19 BJN</h1>
</div>
</div>
<ul>
<li>
Profile
<ul>
<li>
Profile
</li>
<li>
Sign Out
</li>
</ul>
</li>
</ul>
</header>
</body>
</html>
The issue is here
header ul li ul {
position: absolute;
top: 65px;
right: 0px;
width: 200px;
display: none;
background-color: #217e6a;
border: 1px solid black;
vertical-align: top;
}
You have the absolute positioning too low down, just change the top and make it slightly higher and the gap will be gone.
whenever I zoom in on my webpage my navbar will go out of screen, when zooming out it's fine, is there maybe an attribute that will make it stay still when zooming/out or are there any other alternatives to fixing this?
body, html {
background-size: cover;
font-style: normal;
font-family: "Lato";
font-size-adjust: initial;
font-weight: 400;
line-height: 1,8em;
color: #666;
height: 100%;
margin:0;
}
nav {
width: 100%;
height: 50px;
background:rgba(0, 0, 0, 0.8);
min-width: 1200px;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 210px;
height: 50px;
opacity: 0.8;
line-height: 50px;
text-align: center;
font-size: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
display: block;
z-index: 1;
}
nav ul li:hover {
background-color: skyblue;
cursor:pointer;
}
nav ul li ul li {
display: none;
}
nav ul li:hover ul li {
display: block;
background: #282e34;
z-index: 1;
position: relative;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>Hardware</a></li>
<li><a>Software</a>
<ul>
<li><a>System software</a></li>
<li><a>Application software</a></li>
</ul>
</li>
</li>
<li><a>General Computers</a>
<ul>
<li><a>Types of computers</a></li>
<li><a>History of computers</a></li>
</ul>
</li>
<li><a>Credits</a></li>
</ul>
</nav>
</body>
</html>
Thanks in advance.
.........................................................................
Could be because the nav has min-width:1200px;. If your screen size is less than 1200px then the navbar will bleed off the page and cause horizontal scroll.
I also changed the fixed width of the nav li elements to width:20% so they will shrink and grow with the nav.
body, html {
background-size: cover;
font-style: normal;
font-family: "Lato";
font-size-adjust: initial;
font-weight: 400;
line-height: 1,8em;
color: #666;
height: 100%;
margin:0;
}
nav {
width: 100%;
height: 50px;
background:rgba(0, 0, 0, 0.8);
/* min-width: 1200px; */
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
/* width: 210px; */
width:20%;
height: 50px;
opacity: 0.8;
line-height: 50px;
text-align: center;
font-size: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
display: block;
z-index: 1;
}
nav ul li:hover {
background-color: skyblue;
cursor:pointer;
}
nav ul li ul li {
display: none;
}
nav ul li:hover ul li {
display: block;
background: #282e34;
z-index: 1;
position: relative;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>Hardware</a></li>
<li><a>Software</a>
<ul>
<li><a>System software</a></li>
<li><a>Application software</a></li>
</ul>
</li>
</li>
<li><a>General Computers</a>
<ul>
<li><a>Types of computers</a></li>
<li><a>History of computers</a></li>
</ul>
</li>
<li><a>Credits</a></li>
</ul>
</nav>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My portfolio</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
margin-bottom: 20000px;
}
h1 {
}
#headname {
font-size: 30px;
font-family: sans-serif;
padding-left: 20px;
padding-right: 50px;
color: #356684;
}
#calculator {
text-decoration: none;
padding-right: 500px;
font-family:arial;
}
**#navigation {
position: fixed;
width: 100%;
height: 60px;
background-color: #eee;
}**
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 60px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #1e1e1e;
padding: 0 20px;
}
ul li a:hover {
color: #627f91;
}
**#bodie {
margin-top:80px;
}**</style>
</head>
<body>
<nav id="navigation">
<ul>
<li id="headname">My portfolio</li>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav id="navigation">
<div id="bodie">
<h1>Welcome to my portfolio</h1>
</div id="bodie">
</body>
</html>
I have a navigation bar position:fixed; at the top of my page, in a nav container with the id "navigation".
I have a little piece of text under there, in a seperate div, id'd "bodie", that I have given the attribute: margin-top:80px;. So it would be displayed under the navigation bar.
For some reason, the navigation bar gets this attribute as well. I don't get why. Could someone explain this to me?
You just need to add top: 0; to the navigation with the fixed positioning.
Also, you don't include the id on the closing tag, so </nav id="navigation"> should just be </nav>. This applies to the div tag too.
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
margin-bottom: 20000px;
}
h1 {
}
#headname {
font-size: 30px;
font-family: sans-serif;
padding-left: 20px;
padding-right: 50px;
color: #356684;
}
#calculator {
text-decoration: none;
padding-right: 500px;
font-family:arial;
}
#navigation {
position: fixed;
width: 100%;
height: 60px;
background-color: #eee;
top: 0;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 60px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #1e1e1e;
padding: 0 20px;
}
ul li a:hover {
color: #627f91;
}
#bodie {
margin-top:80px;
}
<nav id="navigation">
<ul>
<li id="headname">My portfolio</li>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div id="bodie">
<h1>Welcome to my portfolio</h1>
</div>
I'm creating a website, and it so far has the navigation bar under "construction." I want it so when I hover over it, the whole nav ul li background to change color, not just the background behind the text. I have this:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<title>Landstown High School and Technology Academy - Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header>
<nav>
<ul>
<li class="active">Home</li>
<li>Contact Us</li>
<li>Sharepoint</li>
<li>Employees</li>
</ul>
</nav>
</header>
<section class="body">
</body>
</html>
and this for the CSS:
body
{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
background: #F8F8F8
}
/****HEADER STUFF****/
header
{
position: fixed;
height: 10%;
width: 200%;
background: #F8F8F8;
box-shadow: -10px 0px 10px #000;
}
nav
{
margin-right: 7%;
margin-left: 7%;
height: 40px;
}
nav a:hover
{
background: #00248F;
}
nav ul
{
width: 40%;
background: #0033CC;
line-height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
nav ul li
{
display: inline;
padding: 8%;
}
nav ul li a:hover
{
text-decoration: none;
}
nav ul li a
{
color: #F8F8F8;
text-decoration: none;
}
nav ul li a:visited
{
text-decoration: none;
}
How can I do it?
Try this: http://jsfiddle.net/3BBe2/2/. I have modified your code around.
New CSS:
body
{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
background: #F8F8F8
}
/****HEADER STUFF****/
header
{
position: fixed;
height: 10%;
width: 200%;
background: #F8F8F8;
box-shadow: -10px 0px 10px #000;
}
nav
{
margin-right: 7%;
margin-left: 7%;
height: 40px;
}
nav ul a{
padding:3px 3px;
}
/* nav li a:hover
{
background: #00248F;
} */
nav ul
{
width: 60%;
background: #0033CC;
line-height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
nav ul li
{
display: inline;
padding: 8%;
padding:5px 5px;
padding:10px 12px 10px;
}
nav ul li:hover
{
background: #00248F;
}
nav ul li a
{
color: #F8F8F8;
text-decoration: none;
}
nav ul li a:visited
{
text-decoration: none;
}
You can't change .nav ul li by hovering over a, because they are abscending. A working method to do it is with Javascript.
I've changed the width of .nav because it was unlogic, header was 200% width and with that you can't center .nav proper.
But anyways, this will work for you:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<title>Landstown High School and Technology Academy - Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<script>
function change() {
document.getElementById("ul").style.backgroundColor="#bbb";
document.getElementById('nav').style.backgroundColor="#ccc";
document.getElementById('li').style.backgroundColor="#333";
document.getElementById('li2').style.backgroundColor="#333";
document.getElementById('li3').style.backgroundColor="#333";
document.getElementById('li4').style.backgroundColor="#333";
}
function changeback() {
document.getElementById('nav').style.backgroundColor="#888";
document.getElementById("ul").style.backgroundColor="#0033CC";
document.getElementById('li').style.backgroundColor="#f00";
document.getElementById('li2').style.backgroundColor="#f00";
document.getElementById('li3').style.backgroundColor="#f00";
document.getElementById('li4').style.backgroundColor="#f00";
}
</script>
<header>
<div id="nav">
<ul id="ul">
<li id="li">Home</li>
<li id="li2">Contact Us</li>
<li id="li3">Sharepoint</li>
<li id="li4">Employees</li>
</ul>
</div>
</header>
<section class="body">
</body>
</html>
The CSS:
body {
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
background: #F8F8F8;
}
/****HEADER STUFF****/
header {
position: fixed;
height: 10%;
width: 100%;
background: #F8F8F8;
box-shadow: -10px 0 10px #000;
}
#nav ul {
width: 70%;
display: block;
margin-left: auto;
margin-right: auto;
line-height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #03C;
}
#nav li {
display: inline;
padding: 0 8%;
background: red;
}
#nav a {
color: #F8F8F8;
text-decoration: none;
}
#nav a:visited {
text-decoration: none;
}