please look at this link
http://sudhakargolakaram.co.in/files...ontallist.html

i have created 2 lists and what i want is list2 should behave like list1


i am using a cms and due to this in list2 the cms is generating list like
<ul id="nav-sub">
<li class="here"><a href="#">Homepage</a>
<ul>
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Living &amp; Care Options</a></li>
<li><a href="#">Social Activities</a></li>
<li><a href="#">Location &amp; Local Amenities</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</li>
</ul>

and i cannot manually change this ul li code that the cms is generating so i have to using the code that is being generated and change the ul li code


initially only the 1st list item Homepage was occupying the entire width and the links from Lifestyle onwards were appearing in a new line so i used
ul#nav-sub {
float: left;
}

ul#nav-sub li.here ul {
float: left !important;
}

so that both will appear beside each other also i have used negative margins as i did not know any otherway to make the links from Lifestyle to appear beside Homepage

what i need is when i hover over Homepage in list2 the repeating background is occupying the entire width whereas it should only appear like the one in List1


please advice how i can get this working also the left margin value i have given is only an approximate value to get it closer to Homepage link is this the right way to go about

thanks

The HTML being output by the CMS isn't correct. A ul inside a li will create a drop. This is your problem. If you can get that fixed you should be able to get them matched no problem. If you can not fix it manually, consider a new CMS.