Just dipping my toes into the world of CSS and html5, I followed this tutorial to create a basic pure CSS/html5 drop-down menu. Unfortunately, it's not functioning properly in IE8.
I included the HTML shiv and applied a display:block style to all html5 elements in my stylesheet.
The drop-down feature works and submenus change color when hovered over in IE8, but there is no background color and the submenus don't align correctly or display as inline elements even though this was specified in the CSS.
nav ul li{
display: inline-table; <-- being ignored
float:left; <-- being ignored
}
As for the background color for the list (used colorzilla to generate gradient code below)
nav ul {
background: rgb(87,179,229); Old browsers - doesn't work
/* Gradient code for different browsers */
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table; <-- Not ignored in ie8
}
Any suggestions on how to get it working in IE8? I've heard that IE8 doesn't play well with child elements inheriting styles within the nav/list hierarchy. However, if styles are explicitly defined, shouldn't they apply regardless? Could it be that IE8 still doesn't fully recognize the nav/ul tags?
Appreciate any assistance. Thank you!