I'm trying to create a CSS pull-down menu for my site using PHP includes. The menu is on the left-hand side of my page, and when you move the mouse over certain categories, a sub-menu is supposed to appear.
I've got pretty much everything coded using <li> elements with special CSS attributes attached to them. Everything works fine in Firefox, but there's one problem in IE. For those menu options which are supposed to have sub-menus, I want there to be an arrow at the edge of the menu option to indicate that sub-menus will appear if the user moves his mouse over them. I achieved this in Firefox by using the 'float: right' property. But in IE8, this enlarges the entire menu option, and the arrow appears a line too low.
If it's not clear what I mean, here's the page I've been testing it on: http://www.heroofcamelot.com/literature/earliest_versions.php
This page displays correctly in Firefox, but not IE. In Firefox, every menu option is exactly the same height, whereas in IE, the arrows have caused those menu options to be too large, and the arrows are only displayed below the text that they're supposed to be on the same line as.
My code for adding the arrows was simple. For the first menu option, for example, this is my code:
<li><a href= "/legend"/>The Legend<font size = "3pt" style = "float: right">→</font>
In Firefox, this causes the arrow to be displayed at the right end of the list element, which is what I want. But in IE, it adds an extra line and displays it there. I was just wondering if anyone has encountered this bug when dealing with CSS lists, and if there are any known fixes for the problem. Thanks in advance.