I am having trouble with the drop down menu. It works fine on its own but when I try and incorporate it into an existing project it leaves a gap between the header and the drop down options and can't seem to work out why its happening.

I have included the html and css. Any help would be appreciated.

<div class="wrapper3">

<ul class="navigation">

<li><a href="" title="Home">Home</a></li>

<li><a href="" title="Information">Information</a>

<ul>

    <li><a href="#" title="Private Lessons">Private Lessons</a></li>

    <li><a href="#" title="Competitions">Competitions</a></li>

    <li><a href="#" title="Upcoming Events">Upcoming Events</a></li>

  </ul>

</li>

<li><a href="#" title="Photo Gallery">Photo Gallery</a></li>

<li><a href="#" title="About Us">About Us</a>

<ul>

    <li><a href="" title="Our Philosophy">Our Philosophy</a></li>

    <li><a href="" title="Our Staff">Our Staff</a></li>

  </ul>

</li>


<li><a href="contact-us.html" title="Contact">Contact</a></li>

<div class="clear"></div>

</ul>

</div>

Here is the CSS

h1 { font-size: 1.75em; }

h2 { font-size: 1.00em; color: #59417B; }

finallogo {

position: absolute;
right: 0px;
display: inline-block;
padding: 0 0 0 5%;
width: 120px;
height: 102px;

}

logo {

color: white;
padding: 0 5%;
width: 400px;
display: inline-block;

}

header { background-color: #59417B; max-width:100%; color: white; height: 125px; }

@import url(http://fonts.googleapis.com/css?family=Monda:400,700);

body {

background: #fff;

font-family: 'Monda', sans-serif;

font-weight: 400;

font-size: 14px;

line-height: 26px;

color: #666;

}

.clear {

clear: both;

}

.wrapper3 {

width: 100%;

margin: 0px auto;

border-radius: 1px;

border: solid 0px #fff;

box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);

}

.top {

min-height: 0px;

background: #59417B;

border-radius: 0 0;

}

.navigation {

font-family: 'Monda', sans-serif;

list-style: none;

padding: 0;

margin: 0;

background: #59417B;

border-top: solid 1px #8267A6;

border-bottom: solid 1px #8267A6;

box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 1);

}

.navigation li {

float: left;

}

.navigation li:hover {

background: #8267A6;

}

.navigation li:first-child {

-webkit-border-radius: 5px 5px 0 0;

border-radius: 5px 0 0 5px;

}

.navigation li a {

display: block;

padding: 0 20px;

text-decoration: none;

line-height: 40px;

color: #fff;

}

.navigation ul {

display: none;

position: absolute;

list-style: none;

margin-left: -3px;

padding: 0;

overflow: hidden;

}

.navigation ul li {

float: none;

}

.navigation li:hover > ul {

display: block;

background: #8267A6;

border: solid 1px #fff;

border-top: 0;

-webkit-border-radius: 0 0 0px 0px;

border-radius: 0 0 0px 0px;

-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);

box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);

}

.navigation li:hover > ul li:hover {

-webkit-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

}

.navigation li li a:hover {

background: #59417B;

}

.navigation ul li:last-child a,

.navigation ul li:last-child a:hover {

-webkit-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

}

wrapper {

max-width: 940px;
margin: 0 auto;
padding: 0 5%;

}