Question

我正在处理网页菜单。就像现在一样，我的子菜单被限制为80px宽度，这是在.dropdown > li {}下的css文件中定义的。如果我有一个冗长的子菜单元素，如：
<li><a href="#">Most Popular Artists</a></li>该子菜单被截断为“Most”。

我需要一些关于如何让子菜单显示它们包含的内容的指导。请指教。

HTML：

<nav id="top_menu">
  <img src="media/images/logo_large.jpg">
  <ul class="dropdown">
    <li class="dropdown_trigger">
      <a href="#">NEWS</a>
      <ul>
        <li><a href="#">Most Popular Artists</a></li>         
        <li><a href="#">Subitem2</a></li>         
        <li><a href="#">Subitem3</a></li>         
        <li><a href="#">Subitem4</a></li>
      </ul>
    <li>
    <li class="dropdown_trigger">       
      <a href="#">SOCIAL</a>
      <ul>
        <li><a href="#">Subitem1</a></li>         
        <li><a href="#">Subitem2</a></li>         
        <li><a href="#">Subitem3</a></li>         
        <li><a href="#">Subitem4</a></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;
}

这是固定物品的高度并切割其内容。您可以删除高度（线高就足够了），或者将其更改为最小高度以确保。并删除溢出。

.dropdown a {
    min-height: 25px;
    /* overflow: hidden; */
}

如果你这样做，那么所有文字都将显示，菜单项将是多行的。

然后您可以添加

.dropdown a {
    white-space: nowrap;
}

如果你不想要文字换行。这将导致菜单变宽。

Answer 2

我认为截断是由你在.dropdown a

上使用的overflow：hidden属性引起的

.dropdown a {
    background: black repeat-x;
    border: 1px solid black;
    color: white;
    display: block;
    line-height: 25px;
    <!-- overflow: hidden; -->

    height: 25px;
    text-decoration: none;
}

尝试删除它。此外，删除后，您可能需要调整使用的边距以进一步向左拉li标签。如果您的li标签已经为零，您也可以使用负边距。

html / css子菜单需要可变宽度

2 个答案: