2 columns inside <li>

HTML & CSS
1

I want to have my <li> elements displaying horizontally. I have read that using display: inline will achieve this but as yet I cannot get it to work. Any suggestions?

What i want is like this:

Category 1 | Category 2 | Category 3
Item 1 Item 2
Item 3 Item 4

instead of this:

Category 1 | Category 2 | Category 3
Item 1
Item 2
Item 3
Item 4

Here is the code I’m using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #000;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #b6cfee;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: red;}
li:hover ul {
  display: block;
  position: absolute;
  width: 400px;
}
li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #8bb2e2; }
li:hover li a:hover { background: green; }
</style>
</head>

<body>
<ul id="menu">
  <li><a href="">Category 1</a>
    <ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    </ul>
  </li>
  <li><a href="">Category 2</a>
    <ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    </ul>
  </li>
  <li><a href="">Category 3</a>
    <ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    </ul>
  </li>
</ul>
</body>
</html>
2

You could use float: left for the <li> elements

3

Cheers that seems to have done the trick. Simple when you know how.

4

OK, here another query. If I wanted to have a list of a single column and when there is more than say 5 items in the list another column appears.

For example:

Category 1 | Category 2

Item 1 - Item 1 | Item 2
Item 2 - Item 3 | Item 4
Item 3 - Item 5

This is because one of my lists will be quite long and I need it to display on the page and not have to scroll down. Is this possible. I have tried using a different <li> class and assigning that class to my <li> element but it doesn’t work.

ul li.test a:hover{
  float: left;
  font-size: 11px;
}

li.test: hover a {
  float: left;
  font-size: 11px;
}

<li><a href="">Category 2</a>
    <ul>
    <li class="test"><a href="">Item 1 </a></li>
    <li class="test"><a href="">Item 2</a></li>
    <li class="test"><a href="">Item 3</a></li>
    <li class="test"><a href="">Item 4</a></li>
    <li class="test"><a href="">Item 5</a></li>
    </ul>
  </li>

Any suggestions?

Thanks

5

If it’s starting to get a bit ridiculous, then you might be interested in using a Mega dropdown menu. That link has screenshots to sites who are using them.

Usually if you have soooo many links in a category, possibly they can be further grouped. Making the main li’s contain a div with many separate lists inside is a popular solution:


<ul id="nav">
  <li>
    <a href="f00dz">Category: f00dz</a>
    <div>
      <h2>Sweets</h2>
      <ul>
        <li><a href="#">Tom poes</a></li>
        <li><a href="#">Mergpijp</a></li>
        <li><a href="#">Boterkoek</a></li>
      </ul>
      <h2>Sours</h2>
      <ul>
        <li><a href="#">Appel</a></li>
        <li><a href="#">Citroen</a></li>
        <li><a href="#">Grapefruit</a></li>
      </ul>
      <h3>Food Co.'s specialty sour:</h3>
      <p><a href="#">Super-Sour-Soup</a></p>
    </div>
  </li>
  ...
</ul>

The anchor sitting there between blocks may trigger a bug in IE. If it does, wrap a p or something around it.

You can add in header elements, borders, and other things if that makes searching clearer for the user.

It also makes it working with keyboard+css-only more difficult, so while many of these sites nothing works without Javascript (which is totally unnecessary, you can keep your same rules you have now where #menu li:hover div {} brings a div or whatever onscreen), you may consider having a sitemap-style menu somewhere else on the page too… or a link to one.

One thing you have to be very careful with is, because these things get so big, they might be larger than the user’s screen. Keep them as small as you can get away with: unless the user has a scroll-wheel, they won’t be able to scroll the page if the page-height grows only when they hover.

You may also want a Javascript on-hover delay so the mouse zooming around the page doesn’t immediately fill the page with huge boxes.

6

This looks an exciting solution to my problem. Does this solution work well with Google and SEO in general?

7

There doesn’t appear to be a link or way to see an example of the code used so I can adapt it to fit what I need.

Does this solution use jquery or is it just html.

8

This looks an exciting solution to my problem. Does this solution work well with Google and SEO in general?

It’s just HTML. It’s as obvious as any other HTML to search engines.

There doesn’t appear to be a link or way to see an example of the code used so I can adapt it to fit what I need.

I assumed you would go to the sites listed and look at them, but then I don’t see their code as being all that great either : ) Mostly, you’d keep the code you have but with CSS style the sub ul larger… if you want to add non-link text too like headers, then wrap a div around that sub-ul and change your CSS from showing the ul on hover to showing the div.

Does this solution use jquery or is it just html.

Some use Javascript of some sort but you don’t have to use Javascript to turn a regular drop-down to a mega dropdown. The recommended Javascript is a slight on-hover delay, which is an extra.

9

cool, thanks for all your help