Question

At this Test Link I seek to install header and main site navigation on to the top of a blog script. The drop down menu has wide gaps appearing between each of the page links! This does not render like this on the main site which has the same code! What is required to close the gaps?

The dropnav styling is like this:

/*////////////////STYLING TO DROPDOWN MENU//////////////////////*/

.dropnav li ol  {
      display: none; 
      width: 13em; }  /*Define width of dropdown button*/
.dropnav li:hover ol {
      display: block;
      position: absolute;
      margin: 0;
      padding: 0; }
.dropnav li:hover li {
      float: none; }
.dropnav li:hover li a {
      background-color: #3b3b44;      /*Navigation Active Background*/
      border-bottom: 1px solid #ccf;
      border-top: 1px solid #ccf;
      border-right: 1px solid #ccf;
      border-left: 1px solid #ccf;
      font-size: 16px;
      color: #fff; }                /*Text Color*/
.dropnav li li a:hover {
      color: #000;
      background-color: #8db3ff;  /*Navigation Hover Background*/
}

Answer 1

you have li padding bottom and li padding top try to removing them (or remove one of them and decrease padding for one of them) and also you have same class dropnav for the div and also the ol try changing one of them to a different class and remove border-style: solid; this should fix your issue.