세로 메뉴를 가로로 만들 수 없습니다.

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 - 그 중 하나가 충분합니다.

.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; 
}