CODEWITHSUNDEEP
htmlcssmenuhtml-lists
A. Duff
A. Duff

Reputation: 4309

Multiple lines in a horizontally-floated list item

I'm trying to create a navigation menu for my website, with the links aligned horizontally near the top of the page, and I want each link to have a short description underneath. When a user clicks on either the main link text or the description underneath, it should take them to the right page. Additionally, each menu item should have a triangle-shaped icon as the bullet. This is a picture of what I'm trying to achieve.

I can make a list align horizontally when it's just one line. But it breaks down when I try to add more.

<nav id = "header-navigation">
  <ul>
    <li>
      <a href="/">
        Home
        <span class = "subnavigation">Foo!</span>
      </a>
    </li>
    <li>
      <a href="/contact">
        Contact
         <span class = "subnavigation">Bar</span>
    </li>
  </ul>
</nav><!-- header-navigation -->

And in the CSS:

nav#header-navigation {
  margin-top: 160px;
  display: block;
}

nav#header-navigation ul li:before {
    content: url("../images/main-navigation-bullet.png");
    vertical-align: top;
}

nav#header-navigation ul li {
    display: inline;
    text-transform: uppercase;
    min-height: 22px;
}

nav#header-navigation ul li span.subnavigation {
  display: block;
  color: #999;
  font-size: 90%;
  margin-top: -10px;
  margin-left: 15px;
}

This is what I get.

I've also tried putting a float: left on nav#header-navigation ul li, but that causes the list items to float all over the place, like to the top of the screen, outside of the containing div where they belong.

Another problem I've found is that Chrome doesn't display the vertical-align: top; attribute correctly, so the subnavigation text displays in the wrong place on that browser.

Is there a way to get this to work across browsers, or is this still the sort of thing that's best done using images?

Upvotes: 1

Views: 5392

Answers (1)

user1846065
user1846065

Reputation:

It appears the only changes you need are:

nav#header-navigation ul li{
    display: inline-block;
}

nav#header-navigation ul li a{
    display: inline-block;
    vertical-align: top;
}

And get rid of

nav#header-navigation ul li span.subnavigation {
    margin-top: -10px;
    margin-left: 15px;
}

After making these changes, it appears correctly in Firefox and Chromium on Linux Mint 15.

Upvotes: 2

Related Questions