Как установить ширину css, равную длине самого длинного текста

У меня есть довольно сложная задача.

У меня есть это меню здесь... http://jsfiddle.net/K2Zzh/6/

Если вы наведите указатель мыши на "лечение", ширина раскрывающегося меню будет установлена ​​на уровне 150 пикселей, что прекрасно, однако, если вы наведите курсор мыши на "aftercare", вы увидите, что эта ширина слишком широкая. Я попробовал min-width, auto, inline-block, но пока не повезло.

Вместо того, чтобы создавать отдельный класс для каждого раскрывающегося списка, существует ли разумный способ установки ширины только в размере самого длинного текста в меню?

Код css, который я использовал для выпадающего списка...

.dropdown ul {
  position: absolute;
  top: 43px;
  z-index: 100;
  border-left: 1px solid #f6634c;
  border-bottom: 1px solid #f6634c;
  border-right: 1px solid #f6634c;
}
.dropdown ul li a {
  background-color: #fff;
  width: 150px;
  text-align: left;
}​

Спасибо заранее.

Мой HTML-код...

<ul class="mainNav">
  <li><a href="">Home</a></li>
  <li class="dropdown">
    <a href="">Treatments</a>
    <ul>
      <li><a href="">Body Treatments</a></li>
      <li><a href="">Make Up</a></li>
      <li><a href="">Skincare</a></li>
      <li><a href="">Hand & Feet Treats</a></li>
      <li><a href="">Hair Removal</a></li>
      <li><a href="">Alternative Therapies</a></li>
      <li><a href="">Eye Enhancements</a></li>
    </ul>
  </li>
  <li><a href="">Gallery</a></li>
  <li class="dropdown">
    <a href="">Aftercare</a>
    <ul>
      <li><a href="">Body</a></li>
      <li><a href="">Make up</a></li>
      <li><a href="">Skin</a></li>
      <li><a href="">Hand</a></li>
    </ul>
  </li>
  <li><a href="">Contact</a></li>
</ul>