Responsive Navigation Bar Using HTML and CSS
The navigation bar at the top of this page was built by following the Make Use Of article, How to Build a Responsive Navigation Bar Using HTML and CSS. But the drop down in the menu had a slight disconnect from it's menu item. Increasing the padding on the menu li can remove this disconnect.
The disconnect was caused by spacing from the menu list item and it's dropdown menu. Increasing the menu item's padding from 5px 14px to 10px 16px caused a slight overlap which I did not mind. The padding could be adjusted to have the menu item and it's dropdown menu touching.
Adjusted the position of the dropdown by changing the left from 50% to 40% and the top from 30px to 25px. This left a slight gap between the menu item and the dropdown but there is no disconnect. Settled on 30% for the left setting and 28px for the top. This bridged the gap between the menu item and the dropdown.
The article that the original code was pulled from positioned the dropdown by setting the left to a percentage of the parent block and the top of the dropdown to a pixel count down from the top of the parent block. It may be better to use CSS positioning elements with both relative and absolute positioning. See my first CSS Navigation Example.
If you are interested in viewing the code for this page, just right click on the page and select to view the page source.