Home/ Questions/Q 7934339
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T21:37:08+00:00

I’m building a navigation menu where I use a regular ul#nav . In my

  • 0

I’m building a navigation menu where I use a regular ul#nav.

In my example bellow I’m trying to make the div inside the li#third hang over the bottom of the ul#nav. I know I need to use position: absolute on the div inside li#third but if I do that then it just takes up the 100% of the width assigned to it.

I tried changing the position: absolute; width: 40%; on the div but then the last li slides under it.

How can I keep the width the same as the li#third element and still have it flow over it at the bottom?

Updated example: http://jsfiddle.net/VyHJR/24/

HTML :

<ul id="nav">
    <li id="first"><a href="">item</a></li>
    <li id="second"><a href="">item</a></li>
    <li id="third"><div id="search">search</div></li>
    <li id="fourth"><div id="flag"><div id="flag_item">4</div></div></li>
</ul>

CSS :

ul#nav { width: 600px; background-color: #fdd; padding: 0; margin: 30px 0 0 20px; overflow: hidden; }

ul#nav li { float: left; text-align: center; }
ul#nav li a { color: #333333; }

ul#nav li#first { background-color: #dff; width: 20%; padding: 6px 0; }
ul#nav li#second { background-color: #ddf; width: 20%; padding: 6px 0; }
ul#nav li#third { background-color: #dfd; width: 40%; }
ul#nav li#fourth { background-color: #ffd; width: 20%; }

li#third div#search { width: 100%; background-color: #333333; height: 40px; color: #ffffff; }
li#fourth div#flag { width: 100%; height: 20px; background-color: #333333; }
li#fourth div#flag div#flag_item { width: 1px height: 30px; background-color: red; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    See: http://jsfiddle.net/thirtydot/VyHJR/34/

    Now I understand what you were trying to do, it makes sense.

    I removed overflow: hidden on ul#nav, which I assume was there to contain the floats, and replaced it with display: inline-block. I could also have used clearfix.

    I added position: relative; height: 1px; to ul#nav li#third. Some height was required, otherwise the fourth li takes the place of the third. position: relative to contain the absolutely positioned div#search.

    I added left: 0 to div#search purely to fix IE7.

    • 0