html - Including a header page changes menu position

Question

I am incluing header page in to few pages. Problem is menu position is changing in one page I am including snapshot here

I am including header page in two different page. In bottom image menu bar is shifed to left side. I want first one which is properly displaying in another page.

in header.jsp

 <div class="header_menu">
            <ul id="menu" >
                <li><a href="tohome">Home</a></li>
                <li> <a href="showcontacts">Contacts</a></li>
                <li><a href="settings">Settings</a></li>
            </ul>
        </div>

In css

.header_menu{
    position: absolute;
    top: 22px;
    right:110px;
    padding-top: 5px;
}


#menu
{
    padding:2px;
}

#menu li
{
    display:inline;
}



#menu li a
{
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    text-decoration: none;
    float:left;
    padding:10px;
    background-color:#264171;
    color:#FFF;
    border-bottom:2px;
    border-bottom-color:#69C;
    border-bottom-style:solid;
}