hop of those help? In IE8, when you adjust the margin-top: -15px, it pushes the UL box top to fit, instead of letting the LI go outside the UL box. So all the other tabs move up to fit the new UL box. I suggest setting the non-hover LI to margin-top: 15px and hover LIs to margin-top: 0--reverse it.
#mainmenu UL LI
#mainmenu UL LI:hover
Why is active hover CSS only working on a few of these list items
it should still fix some issue The theme uses the :before pseudo-element of the lis to display the icon, while FontAwesome uses the :before of the anchor to do it. You need to move the content (and apply the font-family) from the li element to the anchor, so the theme styles apply. Here's the fix (I also added some rules for the height difference between the two fonts):
wish of those help I would make a Task component. You don't want to set the state of the text in the ListView component, because then this.state.text is shared by each task in the map. Each task should be aware of its own hover, and not the hover of the other children.