Cannot make vertical menu horizontally - html

Question

I cannot get my vertical menu to go horizontally. Please help, as I tried to floating the ul left and right and tried inline none as well. I'm not quite sure I'm getting confused on which class I should put the inline or float on. Thank you in advance for everyone's help on this one as this one has been driving crazy, and I'm sure it is a simple solution but I just can't see it.
/* 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;
}
<header class="header" id="header">
<div id="horiz_nav" class="horiz_nav">
<ul class="mainmenu_horiz">
<li>Home</li>
<li>Courses
<ul class="submenu_horiz">
<li>Motor Learning</li>
<li>MS II</li>
</ul>
</li>
</ul>
</div>
</header>

Answer 1

First, .menu_horiz li should be .mainmenu_horiz li, and then this should have float: left, not right, plus it doesn't need to be floated * and* display: inline-block - one of those two is sufficient.
.mainmenu_horiz li{
list-style: none;
padding: 0;
margin: 0;
float: left;
}

Answer 2

/* I have just changed your css to this one. Just check if it works for you. */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}