ドロップダウン メニューの 3 番目のレベルが、その中に含まれるテキストの幅に収まらない理由を突き止めようとしています。これまでのところ、テキストは自動的に次の行にインデントされますが、他liのすべてのテキストはこれを行わず、1 行に表示されます。なぜこれが起こっているのか、誰かが私を助けることができますか? ありがとうございました！
ここに私がこれまでに作った例があります: http://themedwebdesign.com/salmon/
ここにhtmlがあります
<header>
<div class="container clearfix">
<div id="logo"><img src="./img/salmon-logo.png" alt=""></div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Pages</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Meet the Team</a></li>
</ul>
</li>
<li><a href="#">Features</a>
<ul>
<li><a href="#">Feature</a></li>
<li><a href="#">Level 3</a>
<ul>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">Single</a></li>
<li><a href="#">Large</a></li>
<li><a href="#">Medium</a></li>
<li><a href="#">Small</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
これがcssです。sassを使用して作成したことをお詫びします。コンパイル済みの css ファイルが必要な場合は、投稿します。
nav {
float: right;
ul {
list-style: none;
position: relative;
display: inline-block;
margin: 0;
li {
float: left;
text-transform: uppercase;
font-weight: 300;
a {
text-decoration: none;
color: inherit;
padding: 15px 25px;
display: block;
}
&:hover {
color: $colorSite;
}
&:hover > ul {
display: block;
}
}
&:after {
content: "";
clear: both;
display: block;
}
ul {
position: absolute;
top: 100%;
display: none;
padding: 0;
margin: 0;
border: 1px solid $colorSite;
li {
float: none;
position: relative;
a {
color: $colorDark;
text-decoration: none;
display: block;
padding: 15px 25px;
background-color: #fff;
&:hover {
color: #fff;
background-color: $colorSite;
}
}
}
ul {
position: absolute;
left: 100%;
top: 0;
}
}
}
}