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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…