ドロップダウンメニューの項目がお互いに押し寄せて

Question

私はドロップダウンメニューを作ろうとしています。私の問題は、ドロップダウンアイテムのいくつかが親アイテムよりも広いことです。これにより、他のメニュー項目が移動されてしまいます。この場合、「Practice Areas」の上にマウスを移動すると、「About」が置き換えられます。

うまくいけば、CSSの教師がこれで私を助けてくれることを願っています。

おかげで、CPR

ul { 
 
    padding: 0; 
 
} 
 

 
.main-nav>ul>li { 
 
    display: inline-block; 
 
    float: left; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 

 
.sub-menu li { 
 
    display: none; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.main-nav ul li:hover > ul.sub-menu li { 
 
    display: block; 
 
}

<div class='main-nav'> 
 
    <ul> 
 
    <li>Practice Areas 
 
     <ul class='sub-menu'> 
 
     <li>Consumer Bankruptcy</li> 
 
     <li>Personal Injury</li> 
 
     </ul> 
 
    </li> 
 
    <li>About 
 
     <ul class='sub-menu'> 
 
     <li>Meet us</li> 
 
     <li>Testimonials</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

あなたは、各liアイテムの幅を設定することができます。私は.main-nav>ul>liのためにCSSの30%を使用しました。もちろん

.main-nav>ul>li { 
    display: inline-block; 
    float: left; 
    padding: 10px; 
    position: relative; 
    width: 30%;    <===== added this 
} 

あなたのナビゲーションバーにある3つの以上のliのアイテムが必要な場合、これはうまく動作しません。私はbootstrapを使用することをお勧めします。ここで私はあなたが絶対にサブメニューを配置する必要が

.sub-menu { 
     position: absolute;  
    } 

ul { 
 
    padding: 0; 
 
} 
 

 
.main-nav>ul>li { 
 
    display: inline-block; 
 
    float: left; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 
.sub-menu { 
 
    position: absolute;  
 
} 
 
.sub-menu li { 
 
    display: none; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.main-nav ul li:hover > ul.sub-menu li { 
 
    display: block; 
 
}

<div class='main-nav'> 
 
    <ul> 
 
    <li>Practice Areas 
 
     <ul class='sub-menu'> 
 
     <li>Consumer Bankruptcy</li> 
 
     <li>Personal Injury</li> 
 
     </ul> 
 
    </li> 
 
    <li>About 
 
     <ul class='sub-menu'> 
 
     <li>Meet us</li> 
 
     <li>Testimonials</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

です....

ul { 
 
    padding: 0; 
 
} 
 

 
.main-nav > ul > li { 
 
    display: inline-block; 
 
    float: left; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 

 
ul > li > ul { 
 
    position: absolute;} 
 

 
.sub-menu li { 
 
    display: none; 
 
} 
 

 
.main-nav ul li:hover > ul.sub-menu li { 
 
    display: block; 
 
}

<div class='main-nav'> 
 
    <ul> 
 
    <li>Practice Areas 
 
     <ul class='sub-menu'> 
 
     <li>Consumer Bankruptcy</li> 
 
     <li>Personal Injury</li> 
 
     </ul> 
 
    </li> 
 
    <li>About 
 
     <ul class='sub-menu'> 
 
     <li>Meet us</li> 
 
     <li>Testimonials</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 3

を追加しましたbootstrap navbar

ul { 
 
    padding: 0; 
 
} 
 

 
.main-nav>ul>li { 
 
    display: inline-block; 
 
    float: left; 
 
    padding: 10px; 
 
    position: relative; 
 
    width: 30%; 
 
} 
 

 
.sub-menu li { 
 
    display: none; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.main-nav ul li:hover > ul.sub-menu li { 
 
    display: block; 
 
}

<div class='main-nav'> 
 
    <ul> 
 
    <li>Practice Areas 
 
     <ul class='sub-menu'> 
 
     <li>Consumer Bankruptcy</li> 
 
     <li>Personal Injury</li> 
 
     </ul> 
 
    </li> 
 
    <li>About 
 
     <ul class='sub-menu'> 
 
     <li>Meet us</li> 
 
     <li>Testimonials</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>