Question

我无法让这个工作，但在我的下拉菜单中，我只是无法找到一种方法来使下拉菜单（例如在帐户上）让它与文本一起缩放。我尝试了很多东西，但到目前为止只有静态宽度正在工作但这不是我想要的

    <div class="menu-wrap">
    <div class="menu">
            <ul class="menu-inner">
                <li class="home"><a href="">Home</a></li>
                <li class="account"><a href="">Mijn Account</a>
                    <ul>
                        <li><a href="">Mijn website</a></li>
                        <li><a href="">Profiel</a></li>
                        <li><a href="">Persoonlijke gegevens</a></li>
                        <li><a href="">Voorkeuren</a></li>
                        <li><a href="">Email instellingen</a></li>
                        <li><a href="">Log uit</a></li>
                    </ul>
                </li>

                <li class="pages"><a href="">Mijn pagina's</a>
                    <ul>
                        <li><a href="">Mijn pagina's</a></li>
                        <li><a href="">Maak een nieuwe pagina</a></li>
                        <li><a href="">Verander pagina volgorde</a></li>
                    </ul>
                </li>

                <li class="messages"><a href="">Mijn berichten</a>
                    <ul>
                        <li><a href="">Alle priv&#232; berichten</a></li>
                        <li><a href="">Verzonden berichten</a></li>
                        <li><a href="">Verwijderde berichten</a></li>
                        <li><a href="">Ongelezen berichten</a></li>
                    </ul>
                </li>

                <li class="forum"><a href="">Forum</a>
                    <ul>
                        <li><a href="">Nieuwste berichten</a></li>
                        <li><a href="">Overzicht</a></li>
                        <li><a href="">Mijn berichten</a></li>
                        <li><a href="">Top posters</a></li>
                        <li><a href="">Zoek topic</a></li>
                    </ul>
                </li>            

                <li class="search"><a href="">Zoeken</a>
                    <ul>
                        <li><a href="">Zoeken</a></li>
                        <li><a href="">Vandaag jarig</a></li>
                        <li><a href="">Online leden</a></li>
                        <li><a href="">Alle leden</a></li>
                        <li><a href="">Zoek topic</a></li>
                    </ul>
                </li>

                <li class="online"><a href="">Online (x)</a>
            </ul>
    </div>
</div>

和css代码：

.menu-wrap{
position: relative;
background-color: rgba(0,0,0,0.8);
height: 30px;
width: 100%;
text-align: center;
}

.menu {
    position: relative;
    width: 860px;
    margin: 0px auto;
    height: 30px;
    line-height: 30px;
}

.menu ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 5px 22px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;

}
.menu ul li:hover {
  background-color: rgba(0,0,0,0.4);
}
.menu ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}
.menu ul li ul {
  padding: 0;
  position: absolute;
  top: 28px;
  left: 0;
  width: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
  background-color: rgba(0,0,0,0.4)
}
.menu ul li ul li { 
  color: #fff;
}
.menu ul li ul li:hover { background-color: rgba(0,0,0,0.4);}
.menu ul li:hover ul {
  display:inline-block;
  opacity: 1;
  visibility: visible;
}

所有我想要的是子菜单的宽度自动缩放文本！

Answer 1

您将不得不在.menu ul li ul li规则中添加一个空格属性，如下所示：

.menu ul li ul li { 
  white-space: nowrap;
}

子菜单的自动宽度

1 个答案: