Take the 2-minute tour ×

this is my first post here. If I am doing something wrong please don't hesitate to tell me.

I have built a navigation bar which looks pretty well:


<div style="width: 864px; margin: 0 auto;"> 
    <nav id="main-navigation">
                <li id="nav1"><a href="#">Lorem ipsum dolor sit ametzu</a></li>
                <li id="nav2"><a href="#">Lorem ipsum dolor sit am</a></li>
                <li id="nav3"><a href="#">Lorem ipsum dolor sitd</a></li>
                <li id="nav4"><a href="#">Lorem ipsum dolo</a></li>
                <li id="nav5"><a href="#">Lorem ipsum do</a></li>

And this is how it is looking right now:

enter image description here

Notice that each navigation-item's width should be relative to its content. I managed to build this with static width-values (magic numbers) like in the following css:

body{background-color: gray;}

    margin: 0;
    padding: 0;

nav#main-navigation li{
    float: left;
    padding: 15px 0;
    text-align: center;
    margin: 0;
    background-color: white;
    border-right: 1px dotted #222;
    color: #222;

nav#main-navigation li:last-child  { border: 0; }

nav#main-navigation li a{
    font: 11px/12px sans-serif;
    text-transform: uppercase;
    text-decoration: none;


#nav1{width: 218px;}
#nav2 {width: 198px;}
#nav3 {width: 178px;}
#nav4 {width: 138px;}
#nav5 {width: 128px;}

I have two questions with that:

  1. Is it possible to get the whole li-tag to be filled with the link-tag? Can you give me a hint how to do that please. SOLVED!!!
  2. I want to make this responsive. Is it best practice to calculate percentages of the widths? And then put them into a media-query? Or is it even possible to make the li-elements relate to its content (like what display:inline; should normally do)?

Would be really nice if someone more experienced helps :-) Cheers


As requested, this is my state right now (thanks to Roddy of the Frozen Pea):


I want to make this responsive in order to display on smaller displays than 960px (which is my max). I want the navigation bar to stretch to the whole length of the div that contains it. Thank you for helping.

share|improve this question
It can be helpful to include a viewable version of what you're working on. I'd suggest using jsfiddle - you'll see it's used in the answers below. You just paste your html in the HTML box, your CSS into that box, then press run. A picture speaks a 1,000 words. –  Voodoo Sep 4 '12 at 16:21
Thanks for the tip. I registered there (very nice site btw.) and edited my question. –  Sven Sep 4 '12 at 16:59
add comment

5 Answers

The answer to the second question is to make your <li> elements display inline-block and remove the float. This way the menu items will respond to content size like inline items.

nav#main-navigation li{
    padding:15px 10px;
    margin-right: -4px;

The negative right margin is a trick to overcome the native gap between inline-block elements.

To make the clickable areas bigger, the solutions would be something like this. Essentially what you need to do is put display: block on the li a element and tell it to take up all available room. It would mean transferring the li's padding to the a, however.

Here is a working JSFiddle demo of this code. I added a grey :hover background-color to the <a> so you can see the effects.

share|improve this answer
This + Calculated the widths into percentage-values. Thank you. (See jsfiddle.net/0xsven/rbz72) –  Sven Sep 5 '12 at 17:12
add comment

For question number one, one way would be via JQuery. Something like:

$("#main-navigation li").click(function () {

$("#main-navigation a").click(function (e) {

Would do it.

share|improve this answer
add comment


What I do is set the LI's in a UL to display:block when the screen width starts to deter the look and feel of the menu.

For example:

@media only screen and (min-width:0px) and (max-width:960px)
    nav#main-navigation li { display:block; width:100%; }

The final effect should be a vertical list of menu items. Most of the time I will change the look and feel of the menu item to buttons.

share|improve this answer
add comment

Partial Answer:

  1. To make the clickable area bigger add

    nav#main-navigation ul li a { display: block; text-decoration: none; padding: 10px, 20px; }

Setting the display property of the tag to “block”Makes the link expand to fill it's container. Padding increases the size of the clickable area, so adjust the values to suit your needs.

share|improve this answer
add comment

1.I'm not totally understanding you here (<li>'s cannot be <a> elements) but I think what you want is for the styling of the <li>'s to be the same as the tags. There are a couple of ways you could do this like styling the :hover states of the <li>s to be the same a the <a>'s. Setting the pointer to cursor may be a good start.

2.If you want your design to adapt to the veiwport's width, you don't necessarily need to use @media. @media is used to set break points in your design where elements can reflow above and below those points, percentages can do the rest. I just used a liquid design here: http://jsfiddle.net/ucbEe/ I removed all the fixed widths and placed a 20% width on the li's (5/100=20% width).

Does that make sense enough?

share|improve this answer
Why can't list items contain links? –  Forty-Two Sep 4 '12 at 14:54
Er.. I didn't say that. I said that they cannot BE <a> elements (links). In other words, an <a> element performs a different function from an <li>. –  jonny.milano Sep 4 '12 at 14:55
Ah, I misunderstood. –  Forty-Two Sep 4 '12 at 14:56
You are right. I actually meant the link to expand to the whole size of the li tag containing it. –  Sven Sep 4 '12 at 16:09
display: block on the <a>'s in the <li>'s as @Roddy said. And, did you see my JS fiddle in reply to your responsive design question? –  jonny.milano Sep 4 '12 at 18:48
add comment

Your Answer


