Question

这是代码：html：

    <div id="header">
    <div class="logo">
        <a href="Ron's Website.aspx">
            <img src="Images/logo.png" alt="logo" style="width: 140px;" /></a>
    </div>
</div>
<div id="container">
    <div class="topbar">
        <ul id="topnav">
            <li><a href="#">Black Holes</a>
                <ul>
                    <li><a href="#">sub example1</a></li>
                    <li><a href="#">sub example2</a></li>
                    <li><a href="#">sub example3</a></li>
                </ul>
            </li>
            <li><a href="#">Worm Holes</a>
                <ul>
                    <li><a href="#">sub example1</a></li>
                    <li><a href="#">sub example2</a></li>
                    <li><a href="#">sub example3</a></li>
                </ul>
            </li>
            <li><a href="#">Example</a>
                <ul>
                    <li><a href="#">sub example1</a></li>
                    <li><a href="#">sub example2</a></li>
                    <li><a href="#">sub example3</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="sidebar">
        <ul id="nav">
            <li><a class="selected" href="Ron's Website.aspx">Main Page</a></li>
            <li><a href="Regist.aspx">Registration</a></li>
            <li><a href="#">Login</a></li>
            <li><a href="#">Contact Me</a></li>
        </ul>
    </div>
    <div class="content">
        <h1>
            Dashboard</h1>
        <p>
            Welcome to my website!
        </p>
        <div id="box">
            <div class="box-top">
                News
            </div>
            <div class="box-panel">
                This Is Some Simple News..
            </div>
        </div>
    </div>
</div>

CSS：

    @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700");

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    font-family: 'Open Sans';
}

#page {
    display: none;
}

a
{
    text-decoration: none;
}

div#header
{
    width: 100%;
    height: 62px;
    background-color: #2980b9;
    margin: 0 auto;
    -webkit-transition: 0.2s, -webkit-transform 2s;
    -moz-transition: 0.2s, -moz-transform 2s;
    -o-transition: 0.2s, -o-transform 2s;
    transition: 0.2s, transform 2s;
}

.logo
{
    float: left;
    margin-top: 4px;
    margin-left: 15px;
}

div#container
{
    width: 100%;
    margin: 0 auto;
}

.sidebar
{
    width: 250px;
    height: 100%;
    background-color: #171717;
    float: left;
}

.topbar
{
    width: 100%;
    background-color: #171717;
    text-align: center;
}

ul#topnav li
{
    display : inline;
    list-style: none;

}

ul#topnav li a
{
    color: #ccc;
    font-size: 1em;
    padding-left: 5px;
    border-left: 1px solid White;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;

}

ul#topnav li a:hover
{
    background-color: Gray;
    color: #fff;
}

ul#topnav li a.selected
{
    background-color: #030303;
    color: #fff;
}

ul#topnav li:hover ul
{
   display:list-item;
    position : relative;
    left : 0;
}

ul#topnav ul
{
    display:none;
    position:absolute;

}

ul#topnav ul li
{
    display: block;
    float:none;

}

ul#nav li
{
    list-style: none;
}

ul#nav li a
{
    color: #ccc;
    display: block;
    padding: 10px;
    font-size: 1em;
    border-bottom: 1px solid #0A0A0A;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

ul#nav li a:hover
{
    background-color: #030303;
    color: #fff;
    padding-left: 30px;
}

ul#nav li a.selected
{
    background-color: #030303;
    color: #fff;
}

.content
{
    width: auto;
    margin-left: 250px;
    height: 100%;
    background-color: #95a5a6;
    padding: 15px;
}

.content p
{
    color: #424242;
    font-size: 0.79em;
}

div#box
{
    margin-top: 15px;
}

div#box .box-top
{
    color: #fff;
    text-shadow: 0px 1px #000;
    background-color: #2980b9;
    padding: 5px;
    padding-left: 15px;
    font-weight: 300;
}

div#box .box-panel
{
    padding: 15px;
    background-color: #fff;
    color: #333;
}

http://jsfiddle.net/ronz2/nmqtmv35/7/ 我希望下拉菜单放在主题下，但它也会使主题靠近它。我尝试了我所知道的每个位置值，但它不能正常工作。如何让它落在主题下而不移动旁边的那个？提前感谢所有帮助者：）

顺便说一句：如果你有一个解决方案，请告诉我代码中的确切位置（我对网站建设有点新鲜感:)）。

Answer 1

这是一个有效的example 最大的问题是你必须使用

position : relative;
left : 0;

下拉和

display : block;

对于内联容器元素

CSS下拉菜单未正确显示

1 个答案: