CODEWITHSUNDEEP
csswidth
Adam
Adam

Reputation: 1459

how to set css width equal to length of longest text

I have quite a challenging task.

I have this menu here... http://jsfiddle.net/K2Zzh/6/

If you hover over 'treatments', the width for the dropdown menu is set at 150px, which is fine, however, if you hover over 'aftercare', you can see this width is too wide. I have tried min-width, auto, inline-block, but no luck so far.

Rather than creating a separate class for each dropdown, is there a clever way of setting the width to only be as large as the longest text per menu?

The css code i have used for the drop down... 

.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;
}​

Thanks in advance.

My HTML Code... 

<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>

Upvotes: 23

Views: 83158

Answers (3)

Sotiris
Sotiris

Reputation: 40066

first step: remove fixed width from .dropdown ul li a

second step: add the css li li {width:100%;}

third step: add .mainNav li a {white-space:nowrap;}

It's ready: http://jsfiddle.net/K2Zzh/10/

​

Upvotes: 36

Wendy Adi
Wendy Adi

Reputation: 1519

Put the width to "li" instead of "a" , and you can use padding too

.dropdown ul li {
    width: auto;
    padding:5px;
    display:block;
}​

i think it should works

Upvotes: 0

Horen
Horen

Reputation: 11382

Try white-space: nowrap and width: auto in your .dropdown ul li a class

http://jsfiddle.net/K2Zzh/8/

Upvotes: 10

Related Questions