Horizontal CSS Rollovers – How?

  SimpleSimon1 15:37 17 Feb 2007

As a CSS newbie, I’m looking to build some simple CSS rollovers for menu navigation. I understand the principle and can build vertical CSS rollovers with no problems. However, I’m having problems getting my head around how to transform the ul> into a horizontal menu. I had thought it was done via the use of the float command e.g.

div class="nav">
li> a href="aboutus.html">about us /a> /li>
li> a href="Pics.html">frames /a> /li>

where the relevant CSS is:

.nav ul {
list-style: none;
padding: 0;
margin: 0;

.nav li {
float: left;
margin: 0 0.15em;

However, when I look at our very own PCA horizontal CSS rollover, the html reads:

div class="navLinks">
li> img src="/images/nav_arrow.gif" alt="->" width="14" height="15" border="0" /> /li>
li> a href="/about/">About /a> /li>
li> a href="/contactus/">Contact /a> /li>
li> a href="/magazine/">The magazine /a> /li>
li> a href="/sitemap/">Sitemap /a> /li>
li> a href="/account/register/">Register /a> /li>

and the relevant CSS reads:

.navLinks ul {
list-style-type: none;
padding: 0;
margin: 0;
letter-spacing: 0;
text-align: right;

.navLinks li {
display: inline;
padding-right: 10px;

Can someone please tell me why this forces the ul> to horizontal when there is no associated float command? Is it anything to do with the “display: inline” tag or am I missing something much more fundamental? Is there a 'standard' way to do horizontal CSS rollovers or are there lots of different approaches?


  RicScott 16:13 17 Feb 2007


I sometimes use the horizontal list on sites but normally just a standard link will do...
ie: What I used for click here

<div id="top-links"><a href="index.html">Home</a> <a href="contact.html">Contact</a> <a href="information.html">Information</a> <a href="about.html">About</a> <a href="services.html">Services</a> <a href="examples.html"></a> </div>

#top-links {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
background-color: #FFFFFF;
text-align: center;
height: 10px;
width: 750px;
border-right-width: 1px;
border-bottom-width: 10px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #f0f0f0;
border-bottom-color: #f0f0f0;
border-left-color: #f0f0f0;
left: 150px;
top: 115px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
position: absolute;

#top-links a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FF9900;
text-decoration: none;
padding-right: 5px;
padding-left: 5px;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #cccccc;
border-right-color: #cccccc;
border-left-color: #cccccc;


  Eric10 19:56 17 Feb 2007

These links may help to explain it. click here and click here

  PurplePenny 23:27 17 Feb 2007

... "the “display: inline” tag"

Yes, it is.

For accessibility purposes a list is the preferred format for a menu, whether horizontal or vertical, because it reads logically to screen readers, because it degrades to a list for those who specify their own screen appearance and because... well.. a menu *is* a list.

  SimpleSimon1 12:41 19 Feb 2007

OK, Now I'm Confused!

So, am I right in thinking that both the “display: inline” tag AND the float property will force a vertical <ul> horizontal? Is there a 'one true way' of doing it or can you use either method as the fancy takes you? If so, what are the pluses and minuses of both approaches?

Sorry about the questions but, since the web site is for my wife (who works for Guide Dogs), if I don't have strong accessibility, she'll set the dogs on me :-)


This thread is now locked and can not be replied to.

Elsewhere on IDG sites

OnePlus 5 review

Alice Saey's mesmerising animation for Dutch singer Mark Lotterman

iPad Pro 10.5in (2017) review

Comment booster votre iPhone ?