issue: https://i.stack.imgur.com/qisVn.jpg
My website appears correctly on IE, Opera, and Chrome, but in Firefox, there is a spacing problem between each image in the dropdown menu. I suspect the issue lies within the CSS code.
The same spacing issue occurs in other browsers when I remove the 'nav ul li { display: inline-table; }' property.
The CSS styles:
nav ul ul{
display:none;
position:absolute;
right:0px;
top:28px;
}
nav ul li:hover > ul{
display:block;
}
nav ul{
z-index:2;
list-style-type:none;
padding:0;
list-style:none;
position:relative;
display:inline-table;
top:-16px;
}
nav ul:after{
clear:both;
}
nav ul li{
display:inline-table;
}
nav ul ul li{
position:relative;
}
nav ul ul ul{
position:absolute;
top:0px;
left:113px;
}
The HTML structure:
<nav>
<ul>
<li>
<a onClick="return true" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Fishing','','buttonsandimgs/fishingover.png',1)">
<img src="buttonsandimgs/fishing.png" alt="Fishing" name="Fishing" width="113" height="28" border="0" id="Fishing" />
</a>
<ul>
<li>
<a href="fishing.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Seasons','','buttonsandimgs/seasonsdropover.png',1)">
<img src="buttonsandimgs/seasonsdrop.png" alt="Seasons" name="Seasons" width="113" height="28" border="0" id="Seasons" />
</a>
</li>
<!-- Additional nested list items -->
</ul>
</li>
</ul>
</nav>