Question

我试图为我网站的后端编写一个简单的菜单。我想知道我的网站顶部的菜单之间没有空格。在我添加<h>或<p>之前，它看起来不错元件。菜单向下移动约30px。为什么会发生这种情况？如何解决？

<!DOCTYPE html>


<head >
<title>my page</title>
<link href="Styles.css" rel="stylesheet" />

</head>
<body>
   <div id="PageWrapper">
        <nav>
            <ul id="navMenu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Manage Books</a>
                    <ul>
                        <li><a href="#">New Book</a></li>

                    </ul>
                </li>
                <li><a href="#">Reservations</a></li>
                <li><a href="#">Lendings</a></li>
                <li><a href="#">Back>></a></li>
            </ul>
        </nav>

        <section>

         <h1>Welcome to the management part of your site.</h1>

        <section>           

    </div>

和css文件：

body {

   margin: 0;
   background-color: whitesmoke;
}

#PageWrapper {

   width: 1000px;
   margin: auto;
}

nav {

   clear: both;
   width: 100%;
   float:left;
   margin-bottom:30px;
   margin-top:0px;
   background-color:#666666;
}

ul#navMenu {

    padding:0px;
    margin:auto;
    list-style: none;
}

ul#navMenu ul {

    position: absolute;
    left: 0;
    top: 100%;
    display: none;
    padding: 0px;
    margin: 0px;
}

 ul#navMenu li {

    display: inline;
    float: left;
    position: relative;
}

 ul#navMenu a {

    font-family:Arial, Helvetica, sans-serif;
    font-size:small;
    text-transform:uppercase;
    text-decoration: none;
    padding: 10px 0px;
    width: 150px;
    background: #666666;
    color: #ffffff;
    float: left;
    text-align: center;
    border-right: 1px solid #ffffff;
}

    ul#navMenu a:hover {
        background: #cccccc;
        color: #333333;
    }

    ul#navMenu li:hover ul {

       display: block;
}

    ul#navMenu ul a {

       width: 150px;
}

    ul#navMenu ul li {

       display: block;
       margin: 0px;
}

我试图在浏览器开发者工具中寻找不必要的利润，但我还没有看到任何明显的利润。

Answer 1

从float移除clear和nav，并替换为overflow:hidden以包含应用于基础li菜单项的浮动。

这会强制nav成为新的block formatting context，会按预期显示。

Demo Fiddle

nav {
    width: 100%;
    margin-bottom:30px;
    margin-top:0px;
    background-color:#666666;
    overflow:hidden;
}

添加内容时，HTML菜单会向下移动

1 个答案:

Demo Fiddle