html - 我无法让我的下拉菜单在两行中显示 <a>

Question

这是我的第一个 ;-)

我的下拉菜单有问题。我的文字很长，我想分两行而不是一行。我最近两天都在尝试，但无法正常工作。我将宽度更改为 1 行 - 但它看起来不太好。我很确定我错过了一些简单的东西 - 但我看不到它。

非常感谢任何帮助!

这是我的代码:

我的 HTML:

<ul class="supplier_top_link">
    <li>Category 1
        <ul class="supplier_1">
            <li><a href="#">Sub-Category 1</a>
            </li>
            <li><a href="#">Sub-Category 2</a>
            </li>
            <li><a href="#">Sub-Category 3</a>
            </li>
            <li><a href="#">Sub-Category 4</a>
            </li>
        </ul>
    </li>
    <li>Category 2
        <ul class="supplier_1">
            <li><a href="#">Sub-Category 1</a>
            </li>
            <li><a href="#">Sub-Category 2</a>
            </li>
            <li><a href="#">Sub-Category 3</a>
            </li>
            <li><a href="#">Sub-Category 4</a>
            </li>
        </ul>
    </li>
    <li>Category 3
        <ul class="supplier_2">
            <li><a href="#">Sub-Category 1</a>
            </li>
            <li><a href="#">Sub-Category 2</a>
            </li>
            <li><a href="#">Sub-Category 3</a>
            </li>
            <li><a href="#">Sub-Category 4</a>
            </li>
        </ul>
    </li>
    <li>Category 4</a>
        <ul class="supplier_2">
            <li><a href="#">Sub-Category 1</a>
            </li>
            <li><a href="#">Sub-Category 2</a>
            </li>
            <li><a href="#">Very very very long Sub-Category 3</a>
            </li>
            <li><a href="#">Another long Sub-Category 4 & Category 5</a>
            </li>
            <li><a href="#">Sub-Category 6</a>
            </li>
            <li><a href="#">Sub-Category 7</a>
            </li>
            <li><a href="#">Very long Sub-Category 8</a>
            </li>
        </ul>
    </li>
</ul>

我的 CSS:

.supplier_top_link {
  position    : relative;
  font-size   : 14px;
  font-weight : 400;
  z-index     : 3;
     }

.supplier_top_link li {
   position   : relative;
   display    : inline-block;
}

.supplier_top_link li ul {
  position : absolute;
  top      : 25px;
  display  : none;

}

.supplier_top_link li:hover ul {
  padding-top : 4px; 
  display     : block;
}

.supplier_top_link li ul li {
  position : relative;
  display  : block;
}

.supplier_top_link li ul li a {
  color      : #a6a6a6; 
  font-size  : 14px;
  display    : block;
  float      : left;
  background : #191919;
  border-top : 1px solid #333;
  width      : 230px !important;
  height:28px;
  min-height:28px;
  padding    : 0 10px;
    -moz-border-radius:0px; 
    -webkit-border-radius:0px; 
    border-radius:0px;
}

.supplier_top_link li ul li a:hover {
   color : white;
   border-top : 1px solid #ff6c00;
}

.supplier_1 li a {
    text-align:left;
    }

.supplier_2 {
    margin-left:-150px;
}

.supplier_2  a {
    text-align:right;
    padding-right:15px;
}

Answer 1

您可以只包装 <a> 的内容s 在 <span> ，比如:

<li><a href="#">
    <span><span>Very very very long Sub-Category 3</span></span>
</a></li>

然后在您的 CSS 中添加如下内容:

.supplier_top_link li ul li a span {
    width: 150px !important;
    display: inline-block;
}

并可能删除 <a> 的“高度”属性让我们看起来更漂亮:

.supplier_top_link li ul li a {
    ...
    /* height: 28px;   <-- Remove this */
    ...

另请参阅此 live example .