html/css submenus require variable width - html

Question

I'm am working on menus for a webpage. As it is now, my submenus are restricted to an 80px width which is defined in the css file under .dropdown > li {}. If I have a lengthy submenu li element like:
<li>Most Popular Artists</li> the submenu gets truncated to just "Most".
I need some guidance on how to allow the submenus to display everything they contain. Please advise.
HTML:
<nav id="top_menu">
<img src="media/images/logo_large.jpg">
<ul class="dropdown">
<li class="dropdown_trigger">
NEWS
<ul>
<li>Most Popular Artists</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
<li>
<li class="dropdown_trigger">
SOCIAL
<ul>
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
</ul>
</nav>
CSS:
#top_menu{
position: relative;
top:35px;
left: 90px;
width:660px;
height:55px;
background-color: black;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
.dropdown {
background: black;
border: 1px solid black;
float: right;
padding: 1px 0 0 1px;
margin: 0 0 20px;
line-height: 55px;
list-style: none;
}
.dropdown a {
background: black repeat-x;
border: 1px solid black;
color: white;
display: block;
line-height: 25px;
overflow: hidden;
height: 25px;
text-decoration: none;
}
.dropdown a:hover {
color: #30B3FF;
background: #666;
}
.dropdown ul a {
background: black;
}
.dropdown > li {
list-style: none;
position: relative;
text-align: left;
font: bold 12px Tahoma;
*display: inline-block;
width: 80px;
/* IE7 hack to make inline-block work right */
*zoom: 1;
display: inline;
}
.dropdown li.dropdown_trigger {
display: inline;
float: left;
margin: 0 0 0 -1px;
}
.dropdown ul {
display: none;
list-style-type: none;
background: black;
border: 1px solid black;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}
.dropdown ul {
display: none;
}
.dropdown li.dropdown_trigger:hover ul {
display: block;
}

Answer 1

.dropdown a {
height: 25px;
overflow: hidden;
}
This is fixing the height of an item and cutting its contents. You can remove the height (the line-height will suffice), or change it to min-height to be sure. And remove the overflow.
.dropdown a {
min-height: 25px;
/* overflow: hidden; */
}
If you do that, then all the text will show, and the menu item will be multi-line.
You can then add
.dropdown a {
white-space: nowrap;
}
if you don't want the text to wrap. This will cause the menu to become wider.

Answer 2

I believe the truncation is caused by the overflow: hidden property your using on .dropdown a
.dropdown a {
background: black repeat-x;
border: 1px solid black;
color: white;
display: block;
line-height: 25px;
<!-- overflow: hidden; -->
height: 25px;
text-decoration: none;
}
Try removing that. Also, with that removed you may want to adjust the margins your using to pull the li tag further left. You can also use a negative margin if your li tag is already at zero.