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>
Related
Hey my navigation bar is not working properly in mobile viewIt is supposed to hide it and also show the empty area first and then when the menu is clicked its supposed to show the things which the code says but its not showing the empty area(the blank website page) first and when menu clicked its also not hiding it
The Code:
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700%display=swap');
*{
margin: 0;
padding:0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
nav{
height: 80px;
background: #1b1b1b;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 50px 0px 100px;;
}
nav .logo{
font-size: 33px;
color: #fff;
font-weight: 600;
}
nav ul{
display: flex;
list-style: none;
}
nav ul li{
margin: 0 5px;
}
nav ul li a{
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
padding: 8px 10px;
border-radius: 5px;
transition: all 0.3s ease;
}
nav ul li a:hover,
nav ul li a.active{
color: #1b1b1b;
background: #fff;
}
nav .menu-btn i{
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
#media (max-width: 940px) {
nav .menu-btn i{
display: block;
}
nav ul{
position: fixed;
top: 80px;
left: 0;
background: #111;
height: 100vh;
width: 100%;
display: block;
text-align: center;
}
#click:checked ~ ul{
left: 0%;
}
nav ul li{
margin: 40px 0;
}
nav ul li a{
font-size: 20px;
}
nav ul li a:hover,
nav ul li a.active{
color: cyan;
background: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="logo">Brand</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Feedback</li>
</ul>
</nav>
</body>
</html>
So yea how should i fix this
Thanks in advance
bro you did a mistake on #click:checked this part if you want select the input tag who checked you should do that from this way input[type=checkbox]
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.
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!
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;
}