垂直方向のメニューを水平方向に作成できません

Question

垂直方向のメニューを水平にすることができません。助けてください、私はulを浮かせようとしましたが、インラインでも試してみました。私はインラインまたはフロートを置くべきクラスを混乱させているとは思っていません。これは誰もが狂った運転しているとして、これは誰も助けてくれてありがとう、私はそれが簡単な解決策だと確信していますが、私はそれを見ることができません。

HTML：

<div id="horiz_nav" class="horiz_nav"> 

<ul class="mainmenu_horiz"> 
    <li><a href="">Home</a></li> 
    <li><a href="">Courses</a> 


     <ul class="submenu_horiz"> 
      <li><a href="">Motor Learning</a></li> 
      <li><a href="">MS II</a></li> 
     </ul> 
      </li> 
     </ul> 
</div> 

</header> 

CSS：

 /* define a fixed width for the entire menu */ 
.horiz_nav { 
    width: 100px; 
    float: right; 

} 

/* reset our lists to remove bullet points and padding */ 
.mainmenu_horiz{ 
    list-style: none; 
    padding: 0; 
    margin: 0;  
} 

    .mainmenu_horiz ul{ 
    list-style: none; 
    padding: 0; 
    margin: 0;  
} 
.menu_horiz li{ 
    list-style: none; 
    padding: 0; 
    margin: 0;  
     display: inline-block; 
    float: right; 
} 

/* make ALL links (main and submenu) have padding and background color */ 
.mainmenu_horiz a { 
    display: block; 
    background-color: #8EC752; 
    text-decoration: none; 
    padding: 10px; 
    color: #000; 
} 

/* add hover behaviour */ 
.mainmenu_horiz a:hover { 
    background-color: #ABD281; 
} 


/* when hovering over a .mainmenu item, 
    display the submenu inside it. 
    we're changing the submenu's max-height from 0 to 200px; 
*/ 

.mainmenu_horiz li:hover .submenu_horiz { 
    display: block; 
    max-height: 200px; 
} 

/* 
    we now overwrite the background-color for .submenu links only. 
    CSS reads down the page, so code at the bottom will overwrite the code at the top. 
*/ 

.submenu_horiz a { 
    background-color: #999; 
} 

/* hover behaviour for links inside .submenu */ 
.submenu_horiz a:hover { 
    background-color: #666; 
} 

/* this is the initial state of all submenus. 
    we set it to max-height: 0, and hide the overflowed content. 
*/ 
.submenu_horiz { 
    overflow: hidden; 
    max-height: 0; 
    -webkit-transition: all 0.5s ease-out; 
} 

Answer 1

まず、.menu_horiz liは.mainmenu_horiz liであるべきであり、これはfloat: left、ない権利を持っている必要があり、加えて、それはする必要はありません。フローティング*と* display: inline-block - これらの2つのいずれかで十分です。

.mainmenu_horiz li{ 
    list-style: none; 
    padding: 0; 
    margin: 0;  
    float: left; 
} 

Answer 2

/*私はあなたのCSSをこれに変更しました。それがあなたのために働くかどうかだけをチェックしてください。 */

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

li { 
    float: left; 
}