liクラスのリオーダリストを変更する

Question

私はバナースタイルのリストを持っています。アイテムの1つはドロップダウンです。何らかの理由で、リストが正しい順序で表示されません。ホーム、製品、マテリアル、お客様の声および連絡先の4つの項目があり、2番目はドロップダウンでなければなりません。代わりに、ドロップダウンアイテムが最後に表示されています。

HTML：

<ul class="banner"> 
    <li class="banner"><a href="#home"><H2>Home</H2></a></li> 
    <li class="dropdown">  
     <a href="#javascript:void(0)" class="dropbtn"><h2>Products and Materials</h2> </a> 
     <div class="dropdown-content"> 
     <a href="#student"><h4>Materials for School settings</h4></a> 
     <a href="#adult"><h4>Materials for adult clinical settings</h4></a> 
     <a href="#teletherapy"><h4>Materials for Teletherapy</h4></a> 
     </div> 
    </li> 
    <li class="banner"><a href="#home"><H2>Testimonials</H2></a></li> 
    <li class="banner"><a href="#home"><H2>Contact</H2></a></li> 
</ul> 

はCSS：CSSで

/*bannner buttons*/ 
ul.banner { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li.banner { 
    float: left; 
} 

li a, .dropbtn { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover, .dropdown:hover .dropbtn { 
    background-color: #00e5ee; 
} 

li.dropdown { 
    display: inline-block; 
} 


/*dropdown button*/ 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content a { 
    color: black; 
    padding: 5px 15px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

Answer 1

フロートの追加を忘れた

li.dropdown { 
    display: inline-block; 
    float: left; 
} 

Answer 2

代わりに書き込みのは、このように.banner李に変更しli.banner：

ul.banner { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

.banner li { 
    float: left; 
} 

li a, .dropbtn { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover, .dropdown:hover .dropbtn { 
    background-color: #00e5ee; 
} 

li.dropdown { 
    display: inline-block; 
} 


/*dropdown button*/ 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content a { 
    color: black; 
    padding: 5px 15px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

バナークラスを削除します全リストの項目から

<ul class="banner"> 
    <li><a href="#home"><H2>Home</H2></a></li> 
    <li class="dropdown">  
     <a href="#javascript:void(0)" class="dropbtn"><h2>Products and Materials</h2> </a> 
     <div class="dropdown-content"> 
     <a href="#student"><h4>Materials for School settings</h4></a> 
     <a href="#adult"><h4>Materials for adult clinical settings</h4></a> 
     <a href="#teletherapy"><h4>Materials for Teletherapy</h4></a> 
     </div> 
    </li> 
    <li><a href="#home"><H2>Testimonials</H2></a></li> 
    <li><a href="#home"><H2>Contact</H2></a></li> 
</ul>