CSS显示内联不起作用

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">
        <a href="index.php" id="logo">  </a>
        <div id="toplinks"> 


        <ul class="linkline">   
            <li id="indexx" class="parentClass"><a href="./index.php">Overview</a> 
                    <ul></ul>
            </li> 

            <li class="parentClass"><a href="#">Services</a> 
                <ul class="dropDown">
                    <li class="c2"> <a href="./ddos_mitigation.php">DDoS Mitigation</a> </li>
                    <li class="c1"> <a href="./serverhosting.php">Server Hosting</a> </li>

                </ul>
            </li> 


            <li class="parentClass"><a href="#">AboutUs</a>
                <ul class="dropDown">
                    <li class="c2"> <a href="#">Link 1</a> </li>
                    <li class="c1"> <a href="#">Link 2</a> </li>
                    <li class="c2"> <a href="#">Link 3</a> </li>
                </ul>
            </li>
        </ul>

        </div>
    </div>      
</div>

Answer 1

尝试：

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 like that.

.parentClass {
    display: inline-block;
    position: relative;
    list-style: none;
    float: left;
}