html - css 显示内联不起作用

Question

所以我已经为此工作了几个小时.. 我在导航栏中遇到问题，内容拒绝显示:内联。以前的版本运行良好，但在代码方面过于困惑。这是我的代码。

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