ここで同様の質問があることは知っています。私は数時間をいじったり、いじったりしましたが、それらの質問を私のものに翻訳することはできません。#call に非常に多くの異なるルールがあると混乱します。#nav li ul li ul liii XD
水平ナビゲーションバーがあります。一部のアイテムにはドロップダウン メニューがあり、他のアイテムにはありません。サブメニュー項目を一列に並べたいと思います。私の JSfiddle の「パートナー」セクションを見ると、テキストが折り返されています。右にオーバーフローさせたいのですが、親のドロップダウン メニューと同じ幅である必要はありません。
JS フィドル: http://jsfiddle.net/Peege151/hvgA9/1/
ここに私のコードHTMLがあります
<div id="navbar">
<ul id="nav">
<li> Home </li>
<li>Services
<ul>
<li> Full Suite of Services </li>
</ul>
</li>
<li> <a href="case_studies/index"> Case Studies</a>
<ul>
<li><a href="case_studies/1"> Thing1</a> </li>
<li><a href="case_studies/2">Thing2 </a> </li>
<li><a href="case_studies/3"> Thing3 </a></li>
</ul>
</li>
<li>Partners
<ul>
<li> Dude Middle Name Dood </li>
<li> Dude Middle Name Daaad </li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>`
そして、ここに私のCSSがあります
#navbar {
float:right;
margin-right: 10%;
width:50%;
background-color:blue;
text-align: right;
}
#navbar ul{
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.95);
padding: 0 10px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
#navbar ul li {
position:relative;
表示: インラインブロック
}
#navbar ul ul{
display:none;
position:absolute;
top:1em;
left:0
}
#navbar ul > li:hover ul {
display:inline-table;
margin:0;
}
#navbar ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#navbar li {
display: inline-block;
margin: 10px;
ありがとうございました!