I'm new to html and css. I follow a tutorial in youtube. This is all about navigational bar and drop down in html and css.
The name Ria, Kezia, and Gelia should be display when I hover my mouse in Support option.
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
<div id="container">
<ul>
<li>Support</li>
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
Add CSS styles to dropdown button and try this code.
<head>
<style>
*{
margin:0px;
padding:0px;
}
#container ul{
list-style:none; /*This will remove the bullet*/
}
#container ul li{
background-color:#3C4794; /*Adds a back-color.*/
width:150px;
border:1px solid white;
height:50px;
line-height:50px;
text-align:center; /*Show the text in the middle*/
float:left;
color:white; /*Font color*/
font-size:18px;
}
#container ul li:hover {
background-color:#388222; /*Change the color when hovering the mouse.*/
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top:50px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>
<div class="dropdown">
<ul>
<li>Support</li>
</ul>
<div class="dropdown-content">
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</div>
</div>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</body>
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
#container ul li ul {
display: none;
z-index: 100;
position: relative;
}
#container ul li:hover ul {
display: block;
}
<div id="container">
<ul>
<li>Support
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</div>
You can do it this way:
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
position:absolute;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
#sub {
display: none;
}
#container ul li:hover #sub {
display: block;
}
<div id="container">
<ul>
<li>Support
<ol id="sub">
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ol>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</div>
JSFiddle
Old JSFiddle (with JS)
You have to add some css property for dropdown. Here you code has been edited
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the
mouse.*/
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div id="container">
<ul>
<li class="dropdown">Support
<ul class="dropdown-content">
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
here i added some css code in your style and added some clss in your html elements
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
You need to place your submenu in li element and hide it by CSS, then you can write styles for pseudo-class if you want that submenu to appear on hover
So, first that you need, move inner ul element in li, like that:
<li>Support
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
Further you need set right styles.
li need to have position: relative, this is let inner ul element take the right position
Inner ul should be hidden by default state and be appearing on hover on parent element;
This styles should help:
ul > li {
position: relative;
}
li > ul {
display: none;
bottom: 0;
left: 0;
}
li:hover > ul {
display: block
}
Related
i'm new with css. i'm trying to make a navigation menu with sub items, but i think i'm missing something. the sub items are over lapping with the main items.
so the way i see it that the top list items are floated so are removed from the normal content flow. Which means i need to clear the float after so that the sub items display under the main items.
But its not working for me..Any ideas
https://jsfiddle.net/madubuko/szqk5be9/
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>
News
<ul>
<li><a>Football News</a></li>
<li><a>Team News</a></li>
<li><a>Players News</a></li>
<li><a>Other News</a></li>
</ul>
</li>
<li>Contact</li>
<li>About us</li>
</ul>
</nav>
</div>
</body>
Please Replace this code with your old code :
* {
padding: 0px;
margin: 0px;
}
body {
background-image: url("../images/background.jpeg");
}
#container {
width: 100%;
}
nav {}
#container nav ul {
list-style: none;
}
#container nav ul li {
float: left;
width: 100px;
height: 40px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
padding-top: 7px;
opacity: 0.8;
position: relative;
}
#container nav ul li a {
color: white;
text-decoration: none;
display: block;
}
#container nav ul li ul li {
clear: both;
}
#container nav ul li ul {
position: absolute;
top: 100%;
display: none;
}
#container nav ul li:hover ul{
display:block;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/corecss.css" type="text/css">
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>
News
<ul>
<li><a>Football News</a></li>
<li><a>Team News</a></li>
<li><a>Players News</a></li>
<li><a>Other News</a></li>
</ul>
</li>
<li>Contact</li>
<li>About us</li>
</ul>
</nav>
</div>
</body>
</html>
Add Some CSS
#container nav ul li {
float: left;
width: 100px;
height: 40px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
padding-top: 7px;
opacity: 0.8;
position: relative;/*Add This Property*/
}
#container nav ul li ul {
position: absolute;
top: 100%;
display: none;
}
#container nav ul li:hover ul{
display:block;
}
https://jsfiddle.net/szqk5be9/2/
You can set it using position, check updated snippet below
* {
padding: 0px;
margin: 0px;
}
body {
background-image: url("../images/background.jpeg");
}
#container {
width: 100%;
}
nav {}
#container nav ul {
list-style: none;
}
#container nav ul li {
float: left;
width: 100px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
padding: 7px 5px;
opacity: 0.8;
position: relative;
}
#container nav ul li a {
color: white;
text-decoration: none;
display: block;
}
#container nav ul li ul li {
clear: both;
}
#container nav ul li ul {
position: absolute;
top: 100%;
display: none;
}
#container nav ul li:hover ul{
display:block;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>
News
<ul>
<li><a>Football News</a></li>
<li><a>Team News</a></li>
<li><a>Players News</a></li>
<li><a>Other News</a></li>
</ul>
</li>
<li>Contact</li>
<li>About us</li>
</ul>
</nav>
</div>
You can select only the first ul with direct children selector >, then it works.
#container nav > ul li {
float: left;
width: 100px;
height: 40px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
line-height: 40px;
opacity: 0.8;
}
I have a CSS Menu which i have had some help with getting sorted, it nearly works as i would like.
i just want to be able to change the text colour on LI hover and also the sub menu seems to be displaying more to the right when it should be directly underneath
CSS:
.menu-my-integra-container {
border:1px solid black;
display:block;
float:left;
}
#menu-my-integra, ul.sub-menu {
list-style: none;
padding: 0;
margin: 0;
}
#menu-my-integra > li {
float:left;
display: block;
margin-right:0px;
position:relative;
background:#F36F25;
padding:8px;
color:#FFFFFF;
text-decoration:none;
}
#menu-my-integra > li:hover {
background:#FFFFFF;
color:#F36F25;
}
ul.sub-menu {
display:none;
width:200px;
position:absolute;
z-index:1;
}
#menu-my-integra li:hover ul.sub-menu {
display: block;
max-height: 200px;
background:#F36F25;
}
ul.sub-menu li {
color:#FFFFFF;
float:none;
padding:5px;
}
ul.sub-menu li:hover {
color:#F36F25;
background:#FFFFFF;
float:none;
padding:5px;
}
http://jsfiddle.net/c2u21366/
This will change the texts color to the parents:
#menu-my-integra li > a {
color: inherit;
}
Add left: 0; to ul.sub-menu to align your sub-menu to the left.
ul.sub-menu {
left: 0;
}
You color attribute needs to point to the anchor tag rather than the list tag. The colour choice is being overwritten by the default browser style. You need a more direct style path. The following CSS will colour your list as
.menu-item a{
color:#FFFFFF;
}
.menu-item a:hover {
color:#F36F25;
}
css file
<body class="news">
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a></li>
<li class="news">Newsletter
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
</body>
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
Your submenu is not properly positioned. You're missing left: 0;. That should fix the positioning.
ul.sub-menu {
display: none;
width: 200px;
position: absolute;
z-index: 1;
left: 0;
}
In regards to hover color
a:hover {
color: #000 !important;
}
Ofcourse I used !important cause I don't understand which color you actually want to change.
hey i was learning how to use the drop down menu with css, but i faced two problems:
The length of my first drop down menu changes, even though i kept playing with their percentages.
I am not able to bring my second drop down menu, i guess i don't know how to call the second drop down menu in css even though i gave it a different class name.
Here is the HTML code just for the drop down menu:
<div class="list">
<ul class="style">
<li class="international">International
<ul class="sub1">
<li class> Top 10</li>
<li> All</li>
</ul>
</li>
<li class="pop">Pop
<ul class="sub1" >
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li class="electronic">Electronic
<ul class="sub1">
<li> Top 10</li>
<li> All
<ul class="sub2">
<li> English</li>
<li> European</li>
<li> International</li>
</ul>
</li>
</ul>
</li>
</div>
and here is the CSS code:
div ul li {
display:inline-block;
background-color:#B2B28F;
float:right;
text-align: center;
width: 22%;
position: relative;
z-index: 1;
bottom: 19px;
padding-top: 5px;
font-size: 18px;
padding-bottom: 3px;
font-weight: bold;
font-family: harrington;
margin-right: 12px;
border-bottom:5px;
margin-bottom: 10px;
text-align: center;
margin-top: 2px;
}
div ul li a {
display: block;
height: 30px;
text-align: center;
border-bottom:5px;
position: relative;
font-size: 20;
z-index: 1;
margin-top: 2px;
}
.sub1 li {
display: none;
position:relative;
width:100%;
height: 20px;
margin-bottom:-8px;
margin-top:12px ;
float: right;
font-size: 17;
margin-right: 4px;
padding: 2px;
text-align: center;
left:-20px;
}
.sub1 li a {
text-align: left;
margin-right: 15px;
}
.sub2 li {
position: relative;
left: 15px;
top: -30px;
width: 100%;
text-align: left;
margin-top: -3px;
margin-bottom: 4px;
display: none;
float: left;
}
div ul li:hover ul li{
display: block;
position: absolute;
top: 27px;
float: left;
width: 97%;
left: 0px;
height: 23px;
border-top: 5px;
text-align: center;
}
div ul li :hover ul li ul li {
display: block;
position: absolute;
text-align: center;
}
a:link {
text-decoration: none;
}
a:visited {
color:#520029;
}
a:hover {
color: #293D66;
}
also any comments on how i did would be appreciated!
Hope you like this..
Just made some changes on your html and css.
HTML:
<div class="nav">
<ul>
<li>International
<ul>
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li>Pop
<ul>
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li>Electronic
<ul>
<li> Top 10</li>
<li> All
<ul>
<li> English</li>
<li> European</li>
<li> International</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
.nav {
margin: 50px auto;
text-align: center;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background: #C0C0C0;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
.nav ul:after {
content: ""; clear: both; display: block;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
background: #4b545f;
}
.nav ul li:hover a {
color: #fff;
}
.nav ul li a {
display: block; padding: 10px 20px;
color: #757575; text-decoration: none;
}
.nav ul ul {
background: #5f6975; padding: 0;
position: absolute; top: 100%;
}
.nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
.nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
.nav ul ul li a:hover {
background: #4b545f;
}
.nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Also Here is the fiddle, Check this working here
I would recommend not using absolute positioning and floats to elements that don't need it..
regarding your second sub, I got it working in this example..
div > ul > li {
display:inline-block;
background-color:#B2B28F;
float:right;
text-align: center;
width: 22%;
position: relative;
z-index: 1;
bottom: 19px;
padding-top: 5px;
font-size: 18px;
padding-bottom: 3px;
font-weight: bold;
font-family: harrington;
margin-right: 12px;
border-bottom:5px;
margin-bottom: 10px;
text-align: center;
margin-top: 2px;
}
div ul li a {
display: block;
text-align: center;
padding:5px 0;
position: relative;
font-size: 20px;
z-index: 1;
color:#212121;
padding-left:10px; box-sizing:border-box;
}
ul { padding:0;}
ul li { list-style:none;}
.sub1 { display:none; width:100%;}
.sub1 li {
position:relative;
width:100%;
clear:both;
font-size: 17px;
text-align: center;
}
.sub1 li a {
text-align: left;
}
.sub2 { display:none; position: relative; background:#B2B28F;}
.sub2 li {
width: 100%;
text-align: left;
margin-bottom: 4px;
padding-left:20px;
box-sizing:border-box;
}
.sub2 li a { font-size:14px;}
div ul li:hover ul li{
width: 100%;
left: 0px;
border-top: 5px solid;
text-align: center;
}
div ul li:hover > ._sub { display:block;}
a:link {
text-decoration: none;
}
a:visited {
color:#520029;
}
a:hover {
color: #293D66;
}
http://jsfiddle.net/2mSzr/
notice I make more specific rules with the '>' option in css, so the styling rules will not
apply to the wrong elements..
Also in the HTML I've added _sub class to all sub menus, and changed the behavior so the display:none/block will be on the actual ul._sub elements and not on their li's.. it just
makes more sense..
go over the example above, let me know if you have any questions.
I have noticed my nav bar is transparent and I would like it to not be. I have no previous opacity/transparency set that would cause it to be inheriting the property. I would like to make my nav bar non transparent.
Here is the CSS:
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
}
nav ul li:hover a {
opacity: 1;
color: white;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
}
Here is the corresponding HTML:
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
<li>Starter Kits</li>
<li>Rebuildables
<ul>
<li>Genesis</li>
<li>Dripper</li>
<li>Silica/Cotton</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical</li>
<li>Variable Voltage</li>
</ul>
</li>
<li>Accessories</li>
</ul>
</nav>
<p id="welcome_paragraph">
Welcome, blah blah (this text shows through the nav bar)<br />
</p>
HTML
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
<li>Starter Kits
</li>
<li>Rebuildables
<ul>
<li>Genesis
</li>
<li>Dripper
</li>
<li>Silica/Cotton
</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical
</li>
<li>Variable Voltage
</li>
</ul>
</li>
<li>Accessories
</li>
</ul>
</nav>
<p id="welcome_paragraph">Welcome, blah blah (this text shows through the nav bar)
<br />
</p>
CSS
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
color:white;
}
body
{
background-color:blue;
}
Updated CSS of yours
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
Updated Fiddle
Have you tried;
nav {
background: white;
}
Elements are transparent unless you set a background on them or its inherited.
EDIT: If this doesn't help set up a fiddle for us jsfiddle.net.
In your css
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
background is white.
If you change background to other colour may be your problem will go off. Hope it will help
Cheers !!
JSFIDDLE
If you hover over products, a dropdown menu should appear (displaying appliance and other), then when you hover over appliance, another submenu should appear (displaying black and white), however this second submenu appears to be 2-3 pixels lower than the parent menu. What CSS is causing it to be lower?
Here's the CSS:
*{
margin: 0px;
padding: 0px;
}
#navbar{
list-style: none;
float: right;
padding-top: 54px;
position: relative;
}
#navbar li{
float:left;
width: 130px;
text-align: center;
}
#navbar li a{
text-decoration: none;
font-family: "Open Sans", sans-serif;
font-size: 12px;
color: #524F4F;
font-weight: 600;
}
#navbar li a:hover{
color: #f3a82e;
}
#navbar ul{
list-style: none;
display: none;
position: absolute;
top: 100%;
}
.firstnavmenu{
padding-top: 10px;
}
#navbar ul li{
float: none;
position: relative;
background-color:#f9f9f9;
height: 30px;
border-top: 3px solid white;
}
#navbar ul li a{
padding-top: 6px;
width: 100%;
height: 100%;
display: block;
}
#navbar li:hover > ul{
display: block;
}
#navbar li li:hover{
background-color: #edeaea;
}
#navbar ul ul{
position: absolute;
left: 100%;
top:0;
display: none;
}
#navbar ul ul:hover > ul {
display: block;
}
and heres the html:
<ul id="navbar">
<li>
PRODUCTS
<ul class="firstnavmenu">
<li>
APPLIANCE
<ul>
<li>BLACK </li>
<li>WHITE</li>
</ul>
</li>
<li>OTHER</li>
</ul>
</li>
<li>
TECHNOLOGY
</li>
<li>
PARTNERS
</li>
<li>
COMPANY
</li>
</ul>
Your 3 px solid white border.
Remove it from the 2nd ul li:first-child
#navbar ul ul li:first-child {
border-top:none;
}
Add this to your css
ul.firstnavmenu li ul{
margin-top:-3px;
}
Demo