asp:Menu in master page pushes the content below on hover

Question

I’m working on asp.net web site in .net 4.0 framework (VS 2010) in Win XP SP2.

In site.master page I have a control and it is populated dynamically. All is well in populating the control, but when mouse is hover on this menu item, it displays correct, but it pushes the content of page below (in my example, the content of “MainContent” is pushed below).

I tried changing the property of div, but no joy.. any help will be much appreciated.

Content of Site.Master

     **<div class="title">
     <h1>
     My ASP.NET Application
     </h1>
     </div>
<div class="clear hideSkiplink">
    <asp:Menu ID="mnuMain" runat="server" BackColor="#FFFFCC" CssClass="menu">
        <DynamicItemTemplate>
                  <%# Eval("Text") %>
        </DynamicItemTemplate>
    </asp:Menu>
</div>
<div class="main">
    <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="footer">

   </div>**

Sample code to add it dynamically

    **MenuItem item = new MenuItem();
    MenuItem item1 = new MenuItem();
    item.Text = "Main Menu";
    item1.Text = "sub menu1";
    item.ChildItems.Add(item1);
    mnuMain.Items.Add(item);**

Answer 1

You have got a clear on the div that wraps the menu. Instead of clear the wrapper should be floated.

Is there any CSS relate to the mark up above?