How To Fix This White-dot Border Issue In A Drop Down Menu?

In my website's drop down menu, an element's top, left and right borders are set to gray and bottom border is set to white. This works perfectly in FF3, Chrome to achieve a beautif

Solution 1:

Try:

• Remove the bottom border
• Set 1px bottom padding (or add 1px to the existing bottom padding)
• Set background color to white

This should extend the left and right borders to the bottom of the element, while the white background color should cover the sub-menu top border.

Solution 2:

I found this issue is because border-bottom is set to #FFF in:

.hover-menu
{
    ...
    border-bottom: solid 1px#FFF!important;
    ...
}

I resolved changing to:

.hover-menu
{
    ...
    border-bottom: solid 0#FFF!important;
    ...
}

or

.hover-menu
{
    ...
    border-bottom: none !important;
    ...
}