Greetings! I recently revamped my website to include drop-down menus, but unfortunately, I discovered that in IE 8 and earlier versions, the display is far from ideal. The menus appear correctly on all other browsers except for Internet Explorer. I have been thoroughly debugging the issue without any success so far, and I'm seeking some assistance.
Any guidance or help you can provide would be greatly appreciated!
To further illustrate the problem, here is a link to a jsfiddle containing my HTML and CSS: http://jsfiddle.net/scTqy/
You can also view the live version of the site at:
(The code provided below is from the JS Fiddle)
Below is my HTML/PHP code:
<nav id="hb2_nav">
<ul>
<li><a class="hb2_nav" href="category.php">Categories <span class="arrow-down"></span></a>
<ul class="drop-shadow">
<span class="category_column">
<li><a href="category.php?category=1">U.S.</a></li>
<li><a href="category.php?category=2">World</a></li>
<li><a href="category.php?category=3">Business</a></li>
<li><a href="category.php?category=4">Economy</a></li>
<li><a href="category.php?category=5">Entertainment</a></li>
</span>
<span class="category_column">
<li><a href="category.php?category=6">Health</a></li>
<li><a href="category.php?category=7">History</a></li>
<li><a href="category.php?category=8">Odd News</a></li>
<li><a href="category.php?category=9">Politics</a></li>
<li><a href="category.php?category=10">Science</a></li>
</span>
<span class="category_column_last">
<li><a href="category.php?category=11">Special Reports</a></li>
<li><a href="category.php?category=12">Sports</a></li>
<li><a href="category.php?category=13">Technology</a></li>
</span>
</ul></li>
<li><a class="hb2_nav" href="">Add </a></li>
<li><a class="hb2_nav" href="">Edit </a></li>
</ul>
</nav>
And here is my CSS code:
#hb2_nav
{
font-size:18px;
line-height: 55px;
float:right;
height:55px;
margin:0px;
margin-top:0px;
padding:0px;
display:inline;
}
#hb2_nav ul ul {
display: none;
color: #333;
}
#hb2_nav ul li:hover ul {
display: block;
}
#hb2_nav ul {
list-style: none;
position: relative;
display: inline-table;
}
#hb2_nav ul:after {
content: ""; clear: both; display: block;
}
#hb2_nav ul li {
float: left;
}
#hb2_nav ul li:hover {
background: none;
}
#hb2_nav ul li:hover a {
text-decoration:none;
padding-left: 10px;
padding-right:10px;
}
#hb2_nav ul li a {
text-decoration:none;
display: block; /*padding: 25px 40px;
color: #757575; text-decoration: none;*/
}
#hb2_nav ul ul {
background: #ffffff; /*#FFF8F0;*/
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
width:100%;
min-width:250px;
max-width: 400px;
z-index:10000;
border: 2px solid #999;
}
#hb2_nav ul ul:before {
content:"";
display:block;
width:0;
border:15px solid #999;
border-color:transparent transparent #999 transparent;
position:absolute;
bottom:100%;
left:20px;
margin-left:-10px;
}
#hb2_nav ul ul li {
float: none;
background: #ffffff;
width: 100%;
position: relative;
text-align:left;
font-size: 14px;
line-height: 24px;
}
#hb2_nav ul ul li a {
color: #333;
padding: 10px 20px;
}
#hb2_nav ul ul li:hover a {
background: #e8e8e8;
}