While working on my CSS drop down menu, I noticed that it was generating unwanted line breaks before and after the dropdown. Below is the HTML code:
<body>
<!--nav class="navi"-->
<div class="navi" id="navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Company Profile</a></li>
<li><a href="#">Core Values And Mission</a></li>
<li><a href="#">Strategy</a></li>
</ul>
</li>
<li><a href="#">Our Brands</a>
<ul>
<li><a href="#">HAMARA GLUCOSE D</a></li>
<li><a href="#">HAMARA HEALTH CARE PATENT PRODUCTS</a></li>
<li><a href="#">WAHT'S NEW</a></li>
</ul>
</li>
<li><a href="#">Nutrition Space</a>
<ul>
<li><a href="#">Product FAQ</a></li>
<li><a href="#">Health & Wellness</a></li>
</ul>
</li>
<li><a href="#">Media</a>
<ul>
<li><a href="#">News Paper Clippings</a></li>
<li><a href="#">Product Photos</a></li>
<li><a href="#">Founder which...</a></li>
</ul>
</li>
<li><a href="#">HSS</a></li>
<li><a href="#">Copackers & Investors</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Communities</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!--/nav-->
</body>
Here is the corresponding CSS code:
<style>
.navi ul li
{
float:left;
}
.navi ul li a
{
display:block;
padding: 10px;
text-decoration:none;
}
.navi ul li:hover > a
{
color:white;
}
.navi ul
{
display:inline-table;
list-style:none;
padding: 0 0px;
position:relative;
background:#C93;
}
.navi ul ul
{
display: none;
position:absolute;
}
.navi ul ul li
{
/*display:block;*/
float:none;
}
.navi ul li:hover > ul
{
display:block;
background:#FC0707;
}
</style>
I need help fixing this issue so that no line breaks are generated.