Изменение списка переупорядочений класса li

Question

У меня есть список баннеров, один из которых является выпадающим списком. По какой-то причине список не отображается в правильном порядке. Должно быть четыре элемента: «Главная», «Продукты и материалы», «Отзывы» и «Контакт», второй из которых должен быть выпадающим списком. Вместо того, что происходит, выпадающий элемент отображается последним.

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:

/*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

В CSS вместо написания li.banner изменить его .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>