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;
}
Related
There I am having a problem with the size of the link.
I have no idea how to make it smaller, and whenever I do. I end up making it move or disappear.
I followed the tutorial off of Danni Crossing, on how to make a drop-down menu. But the problem is... The button clicking range is way too big and I just want to make it smaller.
#font-face {
font-family: atlantis;
src: url(FONTS/AtlantisInternational-jen0.ttf);
}
#font-face {
font-family: WHY;
src: url(FONTS/seguisb.ttf);
}
.WOW {
font-family: WHY;
font-size: 55px;
position: relative; right: 255px; bottom: 20px;
}
.WHAT {
font-size: 55px;
position: relative; left: 555px; bottom: 20px;
}
.HOW {
font-family: atlantis;
color: black;
position: relative; left: 1369px; top: 60px;
}
/*font separation*/
*{
margin: 0;
padding: 0;
}
body {
background-color: #fbfbfb;
}
nav {
width: 100%;
height: 100px;
background-color: #b5a371;
}
nav p {
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 25px;
line-height: 55px;
float: left;
padding: 0px 20px;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style-type: none;
position: relative;
}
nav ul li a {
display: block;
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 20px;
padding: 22px 320px;
}
nav ul li ul {
display: none;
position: absolute; top: 99px;
background-color: #370d02;
padding: 10px;
border-radius: 9px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 150px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
padding: 8px 14px;
background-color: #98652c;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a class="WOW" href="index.html">Home!</a><ul>
<li>ADD IMAGE</li>
<li>ADD IDLE </li>
<li>APPEARENCE</li>
<li>SETTINGS</li>
</ul>
</li>
<li><a class="WHAT" href="#">Log in</a></li>
<li><a class="HOW" href="#">Make a pocket!</a></li>
</ul>
</nav>
</body>
</html>
You need to change in .Nav change height: 60px; padding-bottom: 15px; and change line-height: 23px; in .ul li
change the .WOW and .WHAT
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 23px;
}
.WOW {
font-family: WHY;
font-size: 55px;
position: relative; right: 255px; bottom: 38px;
padding-top: 55px;
line-height: 95% !important;
}
.WHAT {
font-size: 55px;
position: relative;
left: 555px;
bottom: 31px;
padding-top: 65px;
line-height: 10% !important;
#font-face {
font-family: atlantis;
src: url(FONTS/AtlantisInternational-jen0.ttf);
}
#font-face {
font-family: WHY;
src: url(FONTS/seguisb.ttf);
}
.WOW {
font-family: WHY;
font-size: 55px;
position: relative; right: 255px; bottom: 38px;
padding-top: 55px;
line-height: 95% !important;
}
.WHAT {
font-size: 55px;
position: relative;
left: 555px;
bottom: 31px;
padding-top: 65px;
line-height: 10% !important;
}
.HOW {
font-family: atlantis;
color: black;
position: relative; left: 1369px; top: 60px;
}
/*font separation*/
*{
margin: 0;
padding: 0;
}
body {
background-color: #fbfbfb;
}
nav {
width: 100%;
height: 60px;
background-color: #b5a371;
padding-bottom: 15px;
}
nav p {
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 25px;
line-height: 55px;
float: left;
padding: 0px 20px;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style-type: none;
position: relative;
}
nav ul li a {
display: block;
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 20px;
padding: 22px 320px;
}
nav ul li ul {
display: none;
position: absolute; top: 99px;
background-color: #370d02;
padding: 10px;
border-radius: 9px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 150px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
padding: 8px 14px;
background-color: #98652c;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 23px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a class="WOW" href="index.html">Home!</a><ul>
<li>ADD IMAGE</li>
<li>ADD IDLE </li>
<li>APPEARENCE</li>
<li>SETTINGS</li>
</ul>
</li>
<li><a class="WHAT" href="#">Log in</a></li>
<li><a class="HOW" href="#">Make a pocket!</a></li>
</ul>
</nav>
</body>
</html>
Removed position: relative; right: 255px; bottom: 20px; from .WOW .WHAT .HOW and padding: 22px 320px; from nav ul li a and now it looks nicer. The rest of your CSS is very messy though.
#font-face {
font-family: atlantis;
src: url(FONTS/AtlantisInternational-jen0.ttf);
}
#font-face {
font-family: WHY;
src: url(FONTS/seguisb.ttf);
}
.WOW {
font-family: WHY;
font-size: 55px;
}
.WHAT {
font-size: 55px;
}
.HOW {
font-family: atlantis;
color: black;
}
/*font separation*/
*{
margin: 0;
padding: 0;
}
body {
background-color: #fbfbfb;
}
nav {
width: 100%;
height: 100px;
background-color: #b5a371;
}
nav p {
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 25px;
line-height: 55px;
float: left;
padding: 0px 20px;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style-type: none;
position: relative;
}
nav ul li a {
display: block;
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 20px;
}
nav ul li ul {
display: none;
position: absolute; top: 99px;
background-color: #370d02;
padding: 10px;
border-radius: 9px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 150px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
padding: 8px 14px;
background-color: #98652c;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a class="WOW" href="index.html">Home!</a><ul>
<li>ADD IMAGE</li>
<li>ADD IDLE </li>
<li>APPEARENCE</li>
<li>SETTINGS</li>
</ul>
</li>
<li><a class="WHAT" href="#">Log in</a></li>
<li><a class="HOW" href="#">Make a pocket!</a></li>
</ul>
</nav>
</body>
</html>
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>
My hover effects aren't exactly aligned with the nav bar. In fact they are slightly wider and I would like to fix that. I've tried some stuff but to no success.
This is how it looks like now:
Code:
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
background-size: cover;
height: 1000px;
color: #000305;
font-size: 100%;
font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
line-height: 1.5;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #CF5C3F;
}
a:hover, a:active {
background-color: #CF5C3F;
color: #fff;
}
.mainHeader {
width: 90%;
margin: 0 auto;
}
.mainHeader img.Logo {
position: absolute;
right: 5%;
top: 54%;
width: 15%;
height: auto;
}
.mainHeader img.Margrit {
position: absolute;
right: 5%;
top: 15%;
width: 15%;
height: auto;
}
.mainHeader nav {
background-color: #9cb34f;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
overflow: auto;
}
.mainHeader nav ul li {
text-align: center;
float: left;
width: 24%;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color: #fff;
background-color: #CF5C3F;
}
.mainHeader nav a:hover, mainHeader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline-block;
height: 30px;
padding: 10px 130px;
}
.mainHeader p {
}
.mainHeader p.inBearbeitung {
position: absolute;
top: 45%;
left: 5%;
font-size: 150%;
color: #CF5C3F;
font-size: 200%;
}
.mainFooter {
position: absolute;
bottom: 3%;
width: 90%;
left: 5%;
right: 5%;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #9cb34f;
display: table;
}
.mainFooter p {
color: #fff;
display: table-cell;
vertical-align: middle;
padding-left: 1%;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Couture Anni</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="mainHeader">
<img class="Logo" src="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
</ul>
</nav>
<p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p>
</header>
<footer class="mainFooter">
<p>Copyright © couture-anni.ch</p>
</footer>
</body>
</html>
Current Problem:
The text is not in the middle of the nav bar and the spacing is wrong of the hover effects
Your a[tag] needs to be displayed inline-block; and than add height=20px; (your menu height)
.mainHeader nav ul li a {
display: inline-block;
height: 20px;
}
It isn't the hover rule that causes this, but the restriction of the height in the rule for nav. Erase the heightsetting from nav and add overflow: auto; to the ul(to wrap the ul around the floated li s)
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
background-size: cover;
height: 1000px;
color: #000305;
font-size: 100%;
font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
line-height: 1.5;
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: #CF5C3F;
}
a:hover,
a:active {
background-color: #CF5C3F;
color: #fff;
}
.mainHeader {
width: 90%;
margin: 0 auto;
}
.mainHeader img.Logo {
position: absolute;
right: 5%;
top: 59%;
width: 15%;
height: auto;
}
.mainHeader img.Margrit {
position: absolute;
right: 5%;
top: 15%;
width: 15%;
height: auto;
}
.mainHeader nav {
background-color: #9cb34f;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
overflow: auto;
}
.mainHeader nav ul li {
text-align: center;
display: inline-block;
float: left;
width: 24%;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #fff;
}
.mainHeader nav a:hover,
mainHeader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Couture Anni</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="mainHeader">
<img class="Logo" src="resources/img/Content_variation_800_e.png" alt="Logo">
<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
</ul>
</nav>
<p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p>
</header>
<footer class="mainFooter">
<p>Copyright © couture-anni.ch</p>
</footer>
</body>
</html>
I think you got this issue because the height of several elements, like <nav> <ul> and <li> is smaller than the height of your <a>, try to set it to 25px (the actual height of your links) and that should be fine.
Then it should look like this : https://jsfiddle.net/nodedL26/1/
How to change the background-color
as you can see in above image? I want to change color after last li and in ul. I do not want to add a new li, just set the overall background-color for ul, and change the background color as mentioned in the image.
* {
margin: 0;
padding: 0;
}
body {
font: 76% Verdana;
line-height: 1.4em;
}
a {
text-decoration: none;
font-weight: bold;
color: #467aa7;
}
a:hover {
color: #80B0DA;
text-decoration: none;
}
/* Header */
.header {
height: 110px;
width: 758px;
color: white;
margin: 0 1px;
background-color: #4279A5;
}
.header h1 {
font-size: 2.4em;
font-weight:normal;
padding: 35px 0 0 20px;
}
.header h2 {
font-size: 1.4em;
font-weight:normal;
margin: 10px 0 0 40px;
}
/* Navigation */
.nav {
width: 758px;
height: 2.2em;
line-height: 2.06em;
margin: 0 1px;
background-color: #4279A5;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-top: 1px solid white;
}
.nav li {
float: left;
border-right: 1px solid white;
list-style-type: none;
}
.nav li a {
text-decoration: none;
color: white;
font-size: x-small;
padding: 5px 10px 10px 5px;
}
.nav .selected, .nav li:hover {
background-color: #80B0DA;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="kk.css">
</head>
<body>
<div class="header">
<h1>Hello World</h1>
<h2>Slogan!</h2>
</div>
<div class="nav">
<ul>
<li class="selected">FIRST PAGE</li>
<li>SECOND</li>
<li>THIRD</li>
<li>FORTH</li>
<li>FIFTH</li>
<li>AND THE LAST ONE</li>
</ul>
</div>
</body>
</html>
Add a background-color to your .nav ul style (red, for example):
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-top: 1px solid white;
background-color: red;
}
And add this just before your .nav .selected, .nav li:hover style:
.nav li:not(.selected) {
background-color: #4279A5;
}
EXAMPLE:
* {
margin: 0;
padding: 0;
}
body {
font: 76% Verdana;
line-height: 1.4em;
}
a {
text-decoration: none;
font-weight: bold;
color: #467aa7;
}
a:hover {
color: #80B0DA;
text-decoration: none;
}
/* Header */
.header {
height: 110px;
width: 758px;
color: white;
margin: 0 1px;
background-color: #4279A5;
}
.header h1 {
font-size: 2.4em;
font-weight:normal;
padding: 35px 0 0 20px;
}
.header h2 {
font-size: 1.4em;
font-weight:normal;
margin: 10px 0 0 40px;
}
/* Navigation */
.nav {
width: 758px;
height: 2.2em;
line-height: 2.06em;
margin: 0 1px;
background-color: #4279A5;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-top: 1px solid white;
background-color: red;
}
.nav li {
float: left;
border-right: 1px solid white;
list-style-type: none;
}
.nav li a {
text-decoration: none;
color: white;
font-size: x-small;
padding: 5px 10px 10px 5px;
}
.nav li:not(.selected) {
background-color: #4279A5;
}
.nav .selected, .nav li:hover {
background-color: #80B0DA;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="kk.css">
</head>
<body>
<div class="header">
<h1>Hello World</h1>
<h2>Slogan!</h2>
</div>
<div class="nav">
<ul>
<li class="selected">FIRST PAGE</li>
<li>SECOND</li>
<li>THIRD</li>
<li>FORTH</li>
<li>FIFTH</li>
<li>AND THE LAST ONE</li>
</ul>
</div>
</body>
</html>
I understand you want to do something like this:
li:last-child{
background-color: #80B0DA;
}
It is not the best answer but you can solve the problem from here:
* {
margin: 0;
padding: 0;
}
body {
font: 76% Verdana;
line-height: 1.4em;
}
a {
text-decoration: none;
font-weight: bold;
color: #467aa7;
}
a:hover {
color: #80B0DA;
text-decoration: none;
}
/* Header */
.header {
height: 110px;
width: 758px;
color: white;
margin: 0 1px;
background-color: #4279A5;
}
.header h1 {
font-size: 2.4em;
font-weight:normal;
padding: 35px 0 0 20px;
}
.header h2 {
font-size: 1.4em;
font-weight:normal;
margin: 10px 0 0 40px;
}
/* Navigation */
.nav {
width: 758px;
height: 2.2em;
line-height: 2.06em;
margin: 0 1px;
background-color: #4279A5;
}
.nav ul {
width: 758px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-top: 1px solid white;
}
li:last-child {
width: 332px;
height: calc(100%-20px);
background-color: #80B0DA;
}
.nav li {
float: left;
border-right: 1px solid white;
list-style-type: none;
}
.nav li a {
text-decoration: none;
color: white;
font-size: x-small;
padding: 5px 10px 10px 5px;
}
.nav .selected, .nav li:hover {
background-color: #80B0DA;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="kk.css">
</head>
<body>
<div class="header">
<h1>Hello World</h1>
<h2>Slogan!</h2>
</div>
<div class="nav">
<ul>
<li class="selected">FIRST PAGE</li>
<li>SECOND</li>
<li>THIRD</li>
<li>FORTH</li>
<li>FIFTH</li>
<li>AND THE LAST ONE</li>
<li><a></a></li>
</ul>
</div>
</body>
</html>
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;
}