My issue lies with a pop-out menu behaving differently in Chrome compared to IE or Firefox.
Below is the HTML code:
<body>
<ul>
<li><a href="url">Level One</a>
<ul>
<li><a href="url">Level Two Item One</a></li>
<li><a href="url">Level Two Item Two</a>
<ul>
<li><a href="url">Level Three</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
And here is the corresponding CSS code:
ul {
padding: 0px;
list-style-type: none;
}
li {
background-color: blue;
}
a:link {
text-decoration:none;
color: #0000ff;
margin: 5px 0px 5px 0px;
background-color: cyan;
display: inline-block;
width: 200px;
}
li {
position: relative;
}
li > ul {
display: none;
}
li:hover > ul, li.sfhover > ul {
left 100%;
top 0;
position: absolute;
display: inline-block;
}
li:hover > ul li, li.sfhover > ul li {
background-color: #33ff33;
width: 200px;
position: relative;
}
In IE and Firefox, Level Three pops out to the right of Level Two Item Two. But in Chrome, it appears below Level Two Item Two.
I believe it has something to do with the link being set as a block element, but I prefer it to display as an inline-block. Unfortunately, I am unable to modify the HTML as it comes from a CMS (I have simplified it for clarity).
Any suggestions on how to solve this would be greatly appreciated.