0

ここで同様の質問があることは知っています。私は数時間をいじったり、いじったりしましたが、それらの質問を私のものに翻訳することはできません。#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;  

ありがとうございました!

4

0 に答える 0