Question

我写了一个网站设计，它有一个下拉菜单和一个链接到我的Facebook页面的页面。但是，每次将鼠标移到下拉菜单上时，h2标签都会向右移动。如何才能避免这种情况发生？

另外，如何将包含指向FB页面的链接的“a”标记置于h2标签下方居中？这是代码：

<!doctype html>
<html>

<head>
    <meta charset = "UTF-8">
    <title>practice</title>
    <link rel="stylesheet" type="text/css" href="practice.css">

    <style type="text/css">
    h1{
        color: black;
    }

    body {
        background-color: lightgrey;
    }

    #top_nav li:hover ul{
        display: block;
        position: relative;

    }

    #top_nav {
        display: block;
        position: relative;
        background-color: grey;
        border: 1px solid black;
        font: bold 16px Sans-serif;
        height: 40px;
        width: 1000px;
        margin: 0px auto;
    }

    #top_nav ul{
        margin: 0px;
        padding: 5px;
    }

    #top_nav li {
        position: relative;
        float: left;
        list-style-type: none;
    }

    #top_nav ul:after{
        content: ".";
        display: block;
        height: 0px;
        clear:both;
        visibility: hidden;
        border-bottom: 1px solid black;
    }

    #top_nav li a {
        text-decoration: none;
        display: block;
        color: white;
        border-right: 1px solid black;
        padding: 5px 25px;
    }

    #top_nav ul ul {
        position: absolute;
        display: none;
        left: 0px;
        background-color: grey;

    }

    #top_nav ul ul li {
        border: 1px solid black;
        width: 99%;
    }

    #top_nav ul ul li a {
        border-right: none;
    }

    a {
        text-decoration: none;
        text-align: center;
    }

    </style>
</head>

<body>
    <h1 style="text-align: center">This is practice</h1>

    <div id = "top_nav">
        <ul>
            <li><a href="contact.html">contact us </a></li>
            <li><a href="about.html">about us</a>
                <ul>
                    <li><a href="history.html">our history</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <p></p>
    <h2 style="text-align: center">Facebook Page</h2>
    <a href="#" target="_blank">my profile</a>
</body>
</html>

我还将网站上传到：html.freeoda.com，以防您希望实时查看代码。只需导航到“联系”页面即可。谢谢！

Answer 1

如果你想修改它改变：

#top_nav li:hover ul{
    display: block;
    position: relative;
}

要：

#top_nav li:hover ul{
    display: block;
    position: absolute;
}

基本上你把它改成亲戚的做法是把它放回到DOM中以影响其他元素，通过使用绝对定位，它不会以同样的方式与其他元素交互。

但正如我在评论中所说，没有理由重新发明轮子。 Twitters bootstrap有一个非常好的工作解决方案：http://getbootstrap.com/components/#dropdowns

至于对标签进行居中，你有几个选项，我推荐的那个只是让它成为一个块元素并使文本居中：

<a href="#" target="_blank" id="fb-profile-link">my profile</a>

添加ID以便于选择，然后添加：

#fb-profile-link{
    display: block;
    text-align:center;
}

默认情况下，a标签的显示为inline，通过将其更改为块，元素将自动占用其容器的宽度。在这种情况下，文档的正文。然后使用text-align属性，我们只将文本置于其中。

下拉菜单移动h2 /使“a”居中

1 个答案: