After reviewing your code, it appears that you are in need of a megamenu. The issue lies in your sub menu ul being positioned absolutely, which is causing it to ignore floating.
To resolve this, you should create a child for your absolute positioned element.
Here is an example of how your HTML should look:
<div class="dropdown">
<ul id="menus"><li>Collections
<ul class="sub">
<ul>
<li><a href="#">ABC/BBC</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Animated</a></li>
<li><a href="#">Children</a></li>
<li><a href="#">Documentary</a></li>
<li><a href="#">Drama</a></li>
<li><a href="#">Cult</a></li>
</ul>
<ul>
<li><a href="#">Family</a></li>
<li><a href="#">Fantasy</a></li>
<li><a href="#">Horror</a></li>
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Mystery</a></li>
<li><a href="#">Reality</a></li>
<li><a href="#">Sciene fiction</a></li>
</ul>
</ul>
</li>
</ul>
</div>
You will also need to update the CSS as follows:
.dropdown
{
font-size:16px;
font-weight:400;
line-height:40px;
text-indent:15px;
padding-right:15px;
vertical-align:middle;
display:inline-block;
}
.dropdown:hover
{
background-color:green;
}
.dropdown li ul.sub {
display: none;
border:black 1px solid;
position:absolute;
background-color:white;
}
.dropdown ul
{
list-style-type:none;
margin:0;
padding:0;
}
.dropdown a
{
display:block;
padding-right:15px;
line-height:30px;
}
.dropdown a:hover {
color: rgb(0,0,0);
text-decoration: underline;
}
.dropdown li:hover
{
background-color:green;
}
#menus ul.sub ul{
float:left
}
By implementing these changes, you can easily add more ul elements as needed.