How to get width of <li> stretched to available space in parent <ul> in IE7?

Question

How to get width of <li> stretched to available space in parent <ul> in IE7?

In IE 8 and FF

Drop-down coming like this which is OK

but in IE 7 it's coming like this

Edit: 5 july

I added live example here see this in IE7

How to get same result like IE8 and FF in IE 7.

I don't want to give fixed width to <ul> and <li>

This is CSS

#topnavcontainer {
    float: left;
    overflow: visible;
    width: 80%;
    margin-left: 17px }

ul#nav {
    position: relative;
    z-index: 597;
    float: left;
    margin-top: 6px; }

    ul#nav li {
        float: left;
        line-height: 1.3em;
        vertical-align: middle;
        zoom: 1; }

        ul#nav li a:active { color: #fff }

        ul#nav li.hover,
ul#nav li:hover {
            position: relative;
            z-index: 599;
            cursor: default; }

    ul#nav ul {
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 598;
        width: 100%;
        width: auto;
        margin-top: 0px;
        white-space: nowrap;
        background -moz-opacity: .80;
        filter: alpha(opacity=80);
        opacity: .80;
        background: #fff }

    ul#nav li.last ul { left: -47px }

    ul#nav li li {
        float: none;
        font-weight: normal;
        padding: 7px 10px;
        border: solid #99b2d8;
        border-width: 0 1px 0 1px;
        background-color: #f6f6f6;
        color: #1f5fa9;
        background: #fff;
        display: block;
        width: auto;
        padding-bottom: 0; }

    ul#nav ul ul {
        top: 1px;
        left: 99%; }

    ul#nav li:hover > ul { visibility: visible;background: transparent }

ul#nav { font-weight: bold; }

    ul#nav li {
        padding: 5px 10px;
        border-style: solid;
        border-width: 0px 1px 0px 0;
        border-color: #fff;
        background-color: #f6f6f6;
        color: #fff;
        background: transparent url(images/css-bg/navaigation-off-hover-bg.jpg) repeat-x left top }

    ul#nav > li.first { background: transparent url(images/css-bg/li-first-bg.jpg) no-repeat left top }

    ul#nav li.first.current { background:url(images/css-bg/navaigation-hover-first-bg.jpg) left top;color: #ed8813 }

    ul#nav > li.first:hover { background: transparent url(images/css-bg/li-first-bg.jpg) no-repeat left -27px }

    ul#nav > li.last { background: transparent url(imagescss-bg/li-last-bg.jpg) no-repeat right top }

    ul#nav li li.last {
        border: 0 solid #99b2d8;
        border-width: 0 1px 1px 1px;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px; }

    ul#nav li.last.current { background:url(images/css-bg/navaigation-hover-last-bg.jpg) right top;color: #ed8813 }

    ul#nav > li.last:hover { background: transparent url(imagescss-bg/li-last-bg.jpg) no-repeat right -27px }

    ul#nav li a { color: #fff; }

    ul#nav ul li.last { padding-bottom: 6px; }

    ul#nav ul li a:hover { text-decoration: underline }

    ul#nav li.hover,
    ul#nav li:hover { color: #fff;background: url(imagescss-bg/navaigation-off-hover-bg.jpg) repeat-x left -27px }

    ul#nav ul li.hover,
    ul#nav ul li:hover { background: #fff }

    ul#nav li:hover a { color: #fff }

    ul#nav li:hover li a { color: #1f5fa9 }

    ul#nav ul li.hover a,
    ul#nav ul li:hover a { color: #1f5fa9 }

    ul#nav ul li.hover a, ul#nav ul li:hover a { color: #1f5fa9 }

    ul#nav > li.current { background:url(images/css-bg/navaigation-active-bg.jpg) repeat-x left top;color: #ed8813 }

    ul#nav li.current a { color: #ed8813 }

    ul#nav a:link,
    ul#nav a:visited {
        color: #fff;
        text-decoration: none; }

    ul#nav a:hover { color: #000; }

    ul#nav a:active { color: #ffa500; }

Answer 1

Here is a solution if you want to use Jquery

(function () {
    $("ul#nav > li").each(function () {
    var width = 0;
    $("ul > li", $(this)).each(function () {
      var w = $(this).width();
      if (width < w) {
        width = w;
      }
    });
    if (width != 0) {
      $("ul > li", $(this)).width(width);
    }
  });
})();

Answer 2

Try applying the border to ul instead of li. This way you are creating one border for the whole list instead of a border per list. Let me know if this doesn't work.