How do I remove whitespace from dropdown menus? - html

Question

I am the senior webpage editor at my High School, and per request of the admin, we are working on a new website. I need to remove the white border around the dropdown menus I'm putting on the site.
h1 {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
color: #e60000;
font-family: century gothic;
text-align: center;
color: #FF000;
}
h2 {
font-family: century gothic;
}
h3 {
font-family: century gothic;
}
h5 {
font-family: californian fb;
font-szie: 1.15em;
}
p {
border-top: none;
border-left: none;
border-bottom: none;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
table#sitelinks td {
font-size: 1.15em;
}
table#sitelinks tr:nth-child(odd) {
background-color: #fff
}
table tr:nth-child(even) {
background-color: #fff
}
table tr:nth-child(odd) {
background-color: #eee
}
hr {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
th {
text-align: left;
font-family: century gothic;
padding: 10px 0px 0px 0px;
font-size: 1.15em;
}
td {
font-family: century gothic;
border: 1px solid black;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 1em;
}
.center {
text-align: center;
}
.blue {
color: blue;
}
.bottomborder {
text-align: center;
border-bottom: 5px groove red;
}
a:link {
color: #e60000;
text-decoration: none
}
a:visited {
color: #e60000;
text-decoration: none
}
a:hover {
color: #e60000;
text-decoration: none
}
a:active {
color: #e60000;
text-decoration: none
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
a:hover {
color: #FF0000;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 10px auto;
background: #FF0000;
}
.navigation,
.navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
display: block;
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.navigation:hover a.main {
color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.04);
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.3s;
-o-transition: 0.2s linear 0.3s;
transition: 0.2s linear 0.3s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.1s;
-o-transition: 0.2s linear 0.1s;
transition: 0.2s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n4 {
transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
<html>
<head>
<link rel="shortcut icon" href="images\pantherpaw.png" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="stiglerstylesheet.css" />
</head>
<body style="background-color:black;color:white;padding:5px;" font="century gothic">
<div align="center">
<img src="images\websitelogoother2.png" alt="Stigler Public Schools" style="width:50%;" align="middle">
<table>
<tr>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #1</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #2</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #3</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
And Here is the result I'm getting
I need to remove the white space around the dropdown menus, thank you.

Answer 1

A smart trick will be to remove this css part
table tr:nth-child(odd) {
background-color: #eee;
}
h1 {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
color: #e60000;
font-family: century gothic;
text-align: center;
color: #FF000;
}
h2 {
font-family: century gothic;
}
h3 {
font-family: century gothic;
}
h5 {
font-family: californian fb;
font-szie: 1.15em;
}
p {
border-top: none;
border-left: none;
border-bottom: none;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
table#sitelinks td {
font-size: 1.15em;
}
table#sitelinks tr:nth-child(odd) {
background-color: #fff
}
table tr:nth-child(even) {
background-color: #fff
}
/*table tr:nth-child(odd) {
background-color: #eee
}*/
hr {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
th {
text-align: left;
font-family: century gothic;
padding: 10px 0px 0px 0px;
font-size: 1.15em;
}
td {
font-family: century gothic;
border: 1px solid black;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 1em;
}
.center {
text-align: center;
}
.blue {
color: blue;
}
.bottomborder {
text-align: center;
border-bottom: 5px groove red;
}
a:link {
color: #e60000;
text-decoration: none
}
a:visited {
color: #e60000;
text-decoration: none
}
a:hover {
color: #e60000;
text-decoration: none
}
a:active {
color: #e60000;
text-decoration: none
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
a:hover {
color: #FF0000;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 10px auto;
background: #FF0000;
}
.navigation,
.navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
display: block;
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.navigation:hover a.main {
color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.04);
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.3s;
-o-transition: 0.2s linear 0.3s;
transition: 0.2s linear 0.3s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.1s;
-o-transition: 0.2s linear 0.1s;
transition: 0.2s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n4 {
transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
<html>
<head>
<link rel="shortcut icon" href="images\pantherpaw.png" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="stiglerstylesheet.css" />
</head>
<body style="background-color:black;color:white;padding:5px;" font="century gothic">
<div align="center">
<img src="images\websitelogoother2.png" alt="Stigler Public Schools" style="width:50%;" align="middle">
<table>
<tr>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #1</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #2</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #3</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

Answer 2

I changed your margin in the navigation class to remove the 10px and removed background-color. I applied your desired background color to the td because some of the whitespace is cellpadding generated by the table cells. I also removed the padding because it made your dropdown menu look smaller.
.navigation
{
list-style: none;
padding: 0;
width: 250px;
height: 40px;
/*margin: 10px auto;*/
/*background: #FF0000;*/
margin: 0px auto;
}
td
{
font-family: century gothic;
border: 1px solid black;
/*padding: 5px 5px 5px 5px;*/
text-align: center;
font-size: 1em;
background-color: #FF0000;
}
Note - Portions of your html was red highlighted in my editor, some misspelled styles and naughty html and css in there. I recommend using an editor which will warn you of naughty code.