Grow your CSS skills. Land your dream job.

Prevent Menu “Stepdown”

Published by Chris Coyier

preventing-stepdown.png

If you are familiar with the concepts of "floats", you know that if you float a page element to the left, that the next page element will move up next to that element on the right, if possible. But have you ever seen your floated elements "stepdown"?

This is a fairly common problem you can run into when creating a horizontal menu. Like most menus, you create an unordered list:

<ul id="menu">
	<li><a href="#">My</a></li>
	<li><a href="#">Little</a></li>
	<li><a href="#">Menu</a></li>
</ul>

You want the menu items to be large clickable blocks, so you write CSS like this:

ul#menu li a {
	display: block;
	width: 130px;
	text-align: center;
	font-weight: bold;
	float: left;
	color: white;
	font-size: 1.2em;
	text-decoration: none;
	background: #600;
}

Those blocks are floated the left, so they should all line up in a row, right? Nope, that's gonna get you some stepdown action. The problem is the list elements wrapping the anchor elements. These are also block-level elements but they are not floated. This confuses things, because block elements naturally have a break after them (like an invisible <br />). That pushes the next one down whatever the current line-height is, which is what causes the stepdown.

Here is the remedy:

ul#menu li {
	display: inline; /* Prevents "stepdown" */
}

Setting those list elements as inline will take away those breaks and make sure your menu stays nice, happy, and straight!

fixed.png

Comments

  1. Permalink to comment#

    Another option would be to float the li elements instead of the links. This will also give you a little more control over the positioning/spacing of each li.

    Also, just a little thing, but your css examples above refer to different elements.

  2. Permalink to comment#

    Also, the prolem is disappeare if make line-height:0 to li elements

  3. Permalink to comment#

    I use to apply the float to li elements, this way if i want to have some text on my menu bar (without it being a link, think in some kind of greeting or a tagline) i just put it into a li and i’m done.

  4. Yoshcat
    Permalink to comment#

    I also give the float attribute to the LI elements.
    I don’t like the concept of an inline element containing a block element.

  5. Jan
    Permalink to comment#

    Am i wrong or is the problem of stepping menus IE6 only?
    I never encountered this kind of behavior in any other browser i work with, tbh.
    Styling and floating li’s works properly most of the time, although in my last project i had to drop some lists and replace them with several p’s each. Just a hotfix for compatibility…

  6. 5h4rk
    Permalink to comment#

    It happens to me on IE6 only… any explication for that? Should I “* html it” or should I apply it as a normal declaration?

  7. Kelley
    Permalink to comment#

    Just happened to me in IE7. Floating the LI instead of the A solved the problem.

  8. Dishant
    Permalink to comment#

    The solution works great!! I had tried creating the same using

    <

    div>s as below.

    Markup:

        <div class="wrap">
                <div class="inner-wrap"><a href="#"></a></div>
                <div class="inner-wrap"><a href="#"></a></div>
                <div class="inner-wrap"><a href="#"></a></div>
        </div>
    

    Styles
    .wrap .inner-wrap a {
    display: block;
    width: 130px;
    height: 30px;
    text-align: center;
    color: #fff;
    float: left;
    background: #95CFEF;
    border: solid 1px #36F;
    margin: 30px 5px;
    }

    In above case it doesnt break?

    <

    div> and are both block level elements. I still dont get it why it works fine in above case.

    • Dishant
      Permalink to comment#

      Correcting format

      The above given code snippet works fine without breaking. I was wondering if both div and li are block level elements , how does my above given example works?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".