Here is my HTML code:

HTML Code:
<header>
	<div class="container clearfix" id="header_wrap">		
		<a href="#"><img src="images/logo.png" alt="logo" id="logo"></a>

		<div id="tel">
			<p>Contact us by the telephone number below</p>
			<p class="tel_no">01657 049 865</p>
		</div>

		<nav id="pages" class="clearfix">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Donate</a></li>
				<li><a href="#">Video</a></li>
				<li class="last"><a href="#" class="last">Contact</a></li>
			</ul>
		</nav>	<!-- end pages -->

		<nav id="menu" class="clearfix">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Donate</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Tour</a></li>
				<li><a href="#">Nature</a></li>
				<li><a href="#">Tips</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>	<!-- end menu -->
	</div>
</header> <!-- end header -->
CSS code
Code:
#header_wrap{
	position: relative;

	#tel{
		position: absolute;
		right: 0;
		top: 10px;

		p{

		}
	}
}

#logo{
	float: left;
	display: block;
}

/* Navigation */

#pages{
	float: right;

	ul{
		margin-top: 70px;

		li{
			float: left;
			margin-right: 5px;

			a{
				color: @link-color;
				display: block;
				padding: 0 10px;
				font-weight: bold;
				.transition();

				&:hover{
					background: @border ;
					color: @light-color;
					.round();
				}			
			}
		}
	}
}

#menu{
	ul{
		margin-top: 107px;
		.round();
		background: white;
		border: 1px solid #0c932f;

		li{
			float: left;
		}
	}
}
Why pages and logo work with float very well but if i setting float for menu, it will like this:
Untitled.jpg

Otherwise:
1.jpg