OK, I see. No need to apply the “display:inline” on the links. You can use “display:inline-block” for the main menu LIs instead – e.g. something like this:
#main-menu {
text-align:center;
}
#main-menu ul {
text-align:left;
}
#main-menu > li {
float:none;
display:inline-block;
margin-right:-4px;
}
*:first-child+html #main-menu > li { /* for IE7 */
display:inline;
margin-right:0;
zoom:1;
}
* html #main-menu li { /* for IE6 */
float:none;
display:inline;
zoom:1;
}
/*
Override the above in collapsible mode.
Make sure the break point width is the same as the one in the theme you use.
*/
@media screen and (max-width: 640px) {
#main-menu {
text-align:left;
}
#main-menu > li {
display:block;
margin-right:0;
}
}
This will work in all browsers including IE7+.
But I will try to think of some safer way to check if CSS is disabled too.
Cheers!