Question

我在创建下拉列表时遇到问题。将鼠标悬停在“阶段”锚点上时应该发生的事情是列表应该直接显示在它下面。但出于某种原因，它出现在栏的左侧，在同一条线上。

这让我疯了。有人可以帮我解决这个问题吗？

y1=(1/(3:2:n+2)).^2;

CSS：

<body>
        <div id="header">
            <div id="navigation">
                <ul>
                    <li><a>Home</a></li>
                    <li><a>About</a></li>
                    <li><a>Stages</a>
                        <ul>
                            <li><a href="#">Stage #1</a></li>
                            <li><a href="#">Stage #2</a></li>
                            <li><a href="#">Stage #3</a></li>
                        </ul>
                    <li><a>Contact</a></li>
                </ul>       
            </div>
        </div>
</body>

Answer 1

您可以添加margin并控制您的下拉列表。像这样：

div#navigation ul li:hover ul {
    display: block;
    margin: 50px;
}

Answer 2

添加顶部：50px;将其删除并添加一个左属性，最好是百分比，尽管在测试中这并不完美，但您可能需要添加media queries。

这是fiddle

＆＃13;

body {
    margin: 0;
}
div#header {
    height: 100px;
    width: 100%;
    background-color: rgb(196, 196, 196);
    border-bottom: 2.5px solid rgb(0, 199, 255);
}
div#navigation {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 50%;
    height: 50px;
    width: 50%;
    background-color: rgb(0, 199, 255);
}
div#navigation > ul {
    margin: 0;
    padding: 0;
    position:relative
}
div#navigation ul li {
    list-style: none;
    display: block;
}
div#navigation ul li a {
    text-decoration: none;
    float: left;
    display: block;
    padding: 15px 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: bold;
}
div#navigation ul li a:hover {
    background-color: rgb(135, 206, 255);
    color: rgb(255, 250, 250);
}
div#navigation ul li:hover ul {
    display: block;
}
div#navigation ul li ul {
    display: none;
    position: absolute;
    padding-left:10px;
    top:75px;
    left:32%;
}
div#navigation ul li ul li {
    display: block;
    
}

＆＃13;

<body>
    <div id="header">
        <div id="navigation">
            <ul>
                <li><a>Home</a></li>
                <li><a>About</a></li>
                <li><a>Stages</a>
                    <ul>
                        <li><a href="#">Stage #1</a>

                        </li>
                        <li><a href="#">Stage #2</a>

                        </li>
                        <li><a href="#">Stage #3</a>

                        </li>
                    </ul>
                </li>
                <li><a>Contact</a>

                </li>
            </ul>
        </div>
    </div>
</body>

＆＃13;

Answer 3

检查出来

body {
    margin: 0;
}

div#header {
    height: 100px;
    width: 100%;
    background-color: rgb(196,196,196);
    border-bottom: 2.5px solid rgb(0, 199, 255);
}

div#navigation {

    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 50%;
    height: 50px;
    width: 50%;
    background-color: rgb(0, 199, 255);
}

div#navigation > ul {
    margin: 0;
    padding: 0;
    position:relative;
}

div#navigation > ul > li {
    list-style: none;
    display: block;
    float: left;
}

div#navigation ul li {
    list-style: none;
    display: block;
    position: realtive;
}

div#navigation ul li a {
    text-decoration: none;
    display: block;
    padding: 15px 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: bold;
}

div#navigation ul li a:hover {
    background-color: rgb(135, 206, 255);
    color: rgb(255, 250, 250);
}

div#navigation ul li:hover ul {
    display: block;


}

div#navigation ul ul {
    display: none;
    position: absolute;
    padding: 0;
}

div#navigation ul ul li {
    display: block; 
}

https://jsfiddle.net/5wvgdubk/

我将float从a移至li并添加了position: relative，以便正确放置内部ul。我还从内部ul删除了填充。

Answer 4

将div和padding 0添加到div＃navigation ul ul和top px对齐下面的子菜单：

div#navigation ul ul {
    display: none;
    position: absolute;
    top: 47px;
    margin: 0;
    padding: 0;
}

http://jsfiddle.net/co9npmnh/

HTML / CSS下拉菜单问题（下拉列表出现在同一行）

4 个答案: