css display inline not working - html

Question

So i ve been working on this for several hours.. i have a problem in the nav bar where the content refuses to go display: inline. Previous versions worked fine but were too disorganized , code wise. here is my code.
CSS:
body {
background-color: #5C7584;
margin: 0 auto;
//width: 1000px;
width: 100%;
margin-top: 10px;
}
#canvas {
width: 1000px;
margin: 0 auto;
background-color: white;
}
a {
color: #4086b6;
text-decoration: none;
}
///////////////////////////////////
ul, li {
list-style: none;
}
ul li {
//padding-right: 10px;
//padding-left: 10px;
//display: inline;
}
.parentClass {
display: inline;
//position: relative;
list-style: none;
//float: left;
}
.dropDown {
position: relative;
background-color: lightcyan;
display: block;
list-style: inherit;
//text-align: right;
//background-color: lightcyan;
width: auto;
height: 0px;
visibility: hidden;
opacity: 0;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-ms-transition: all .25s;
-o-transition: all .25s;
transition: all .5s;
}
#linkline{
}
.parentClass:hover {
background-color: lightcyan;
}
.parentClass:hover .dropdown {
opacity: 1;
visibility: visible;
height: auto;
}
/////////////////////////////
#toplinks a {
//padding-left: 0px;
text-shadow: 1px 1px lightgrey;
}
#toplinks a:hover {
color: lightskyblue;
//border-radius: 50px 50px;
}
#toplinks a:active {
color: white;
}
#top {
height: 102px;
background-image: url("../assets/topbar_plain.png");
background-color: white;
opacity: .9;
z-index: 2;
position: relative;
}
#toplinks {
float: right;
width: 500px;
text-align: right;
padding-right: 30px;
padding-top: 70px;
}
#logo {
background-image: url("../assets/logo_plain.png");
width: 102px;
height: 33px;
float: left;
background-repeat: no-repeat;
margin-top: 40px;
margin-left: 80px;
}
HTML:
<div id="top" >
<div id="canvas">
<div id="toplinks">
<ul class="linkline">
<li id="indexx" class="parentClass">Overview
<ul></ul>
</li>
<li class="parentClass">Services
<ul class="dropDown">
<li class="c2"> DDoS Mitigation </li>
<li class="c1"> Server Hosting </li>
</ul>
</li>
<li class="parentClass">AboutUs
<ul class="dropDown">
<li class="c2"> Link 1 </li>
<li class="c1"> Link 2 </li>
<li class="c2"> Link 3 </li>
</ul>
</li>
</ul>
</div>
</div>
</div>

Answer 1

Try with:
display:inline-block

Answer 2

ul {
list-style: none;
}
li {
float: left;
display: block;
margin: 0 1em 0 0;
border: 1px solid purple;
}
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
Hi, I simplified your code down to the lists and their styling which is what you need to fix. Make sure ul is list-style none and the li's in that list are float left display block and then style from there.

Answer 3

It looks like something strange is happening because of the <ul class="dropDown"> nested inside the <li class="parentClass">. Try this as a start:
.dropDown {
display: none;
}
.parentClass {
display: inline-block;
}

Answer 4

Try to change the parentClass like that.
.parentClass {
display: inline-block;
position: relative;
list-style: none;
float: left;
}