Question

我按ul和li创建了一个多级菜单，但是第二级文本分为两行，如下图所示：

enter image description here

注意：我不能将静态宽度用于第二级菜单（li2 class），因为文本大小在此级别是动态的，可以是1个单词或多个单词。

HTML：

<body>
    <div class="top">
        <ul class="ul1">
            <li class="li1">home</li>
            <li class="li1">accessories
                    <ul class="ul2">
                        <li class="li2">cases and protectors
                            <ul class="ul3">
                                <li class="li3"><a href="#">case 1</a></li>
                                <li class="li3"><a href="#">case 2</a></li>
                            </ul>
                        </li>
                    </ul>
            </li>
        </ul>
    </div>
</body>

CSS：

body {
    direction: rtl;
    margin: 0;
}

.top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 48px;
}

.ul1 {
    padding: 0;
    margin: 0 auto 0 auto;
    display: table;
    height: 48px;
    list-style: none;
    background-color: #bdbdbd;
}

.li1 {
    padding: 0 20px 0 20px;
    margin: 0;
    line-height: 48px;
    float: right;
    border: solid 1px #FFF;
    position: relative;
}

    .li1:hover .ul2 {
        display: block;
    }

.ul2 {
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #ffd800;
    display: none;
    position: absolute;
    top: 49px;
    right: 0;
    width: auto;
}

.li2 {
    padding: 0;
    margin: 0;
    height: 48px;
    width: auto;
    line-height: 48px;
    background-color: #808080;
    display: block;
}
.ul3
{
    display:none;    
}

这是一个实时demo，我做错了什么？

Answer 1

一个快速解决方案是将white-space: nowrap;添加到具有类.li2的元素：

<强> NOWRAP

正常情况下折叠空白，但会抑制换行符   （文本包装）在文本中。

＆＃13;

body {
  direction: rtl;
  margin: 0;
}
.top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 48px;
}
.ul1 {
  padding: 0;
  margin: 0 auto 0 auto;
  display: table;
  height: 48px;
  list-style: none;
  background-color: #bdbdbd;
}
.li1 {
  padding: 0 20px 0 20px;
  margin: 0;
  line-height: 48px;
  float: right;
  border: solid 1px #FFF;
  position: relative;
}
.li1:hover .ul2 {
  display: block;
}
.ul2 {
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #ffd800;
  display: none;
  position: absolute;
  top: 49px;
  width: auto;
  left: 0;
  overflow: hidden;
}
.li2 {
  padding: 0;
  margin: 0;
  height: 48px;
  width: auto;
  line-height: 48px;
  background-color: #808080;
  display: block;
  white-space: nowrap;
}
.ul3 {
  display: none;
}

＆＃13;

<div class="top">
  <ul class="ul1">
    <li class="li1">home</li>
    <li class="li1">accessories
      <ul class="ul2">
        <li class="li2">cases and protectors
          <ul class="ul3">
            <li class="li3"><a href="#">case 1</a>
            </li>
            <li class="li3"><a href="#">case 2</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

您可以使用对齐添加left: 0和overflow: hidden并删除right: 0

来解决问题

<强>参考

white-space

问题多层次ul li menu

1 个答案: