How to float element only without affecting another element

How to float element only without affecting another element

I have two div. One should be for my menu and the second is just the
title. When I try to make <li> items float next to each others, it goes
its position and affects my title div -- it gets into the title div or in
other words it places itself into my title head.
HTML:
<div class="menu">
<ul>
<li>Home</li>
<li>Query</li>
<li>Reports</li>
</ul>
</div>
<center><h3 class="empbox">Attendnace & Absence</h3></center>
CSS:
.empbox
{
height:30px;
background:-moz-linear-gradient(left, #FFFFFF 0%,#6C8483 50%,#FFFFFF 100%);
background:-webkit-linear-gradient(left, #FFFFFF 0%,#6C8483 50%,#FFFFFF
100%);
background:linear-gradient(left, #FFFFFF 0%,#6C8483 50%,#FFFFFF 100%);
width:100%;
display:block;
color:White;
margin-top:190px;
padding-top:10px;
}
.menu
{
background:white; color:Black;
}
.menu ul
{
list-style:none;
padding-right:20px;
}
.menu li
{
float:left;
}