Question

为什么下拉菜单会在悬停（MOBILE）时显示额外的填充/边距？请使用您的专业知识来解决它。

请问哪里错了？我无法解决它。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drop Down menu</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="Cascade.css">

</head>
<body>
    <header>
        <h1>The Drop Down menu</h1>
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Mobile</a>
                    <ul>
                        <li><a href="">iPhone</a></li>
                        <li><a href="">Samsung</a></li>
                    </ul>
                </li>
                <li><a href="">Computer</a></li>
                <li><a href="">Laptop</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS：

body{
    width: 960px;
    margin: 0 auto;
}

header {
    width: 100%;
    height: 170px;
    background-color: darkred;
    color: beige;
}

header h1{
    text-align: center;
    margin: 0;
    padding-top: 10px;
}

nav ul{
    list-style: none;
    background-color: #000;
    text-align: center;
    margin-top: 120px;
    height: 40px;

}

nav ul li{
    display: inline-table;
    margin-right: 35px;
    margin-top: 10px;

}

nav ul li a{
    color: antiquewhite;
    text-decoration: none;

}

nav ul li a:hover{
    color: cornflowerblue; 

}

/* Drop Down part below */

nav ul ul {
    display: none;
}

nav ul li:hover > ul{
    display: block;
    margin: 0;
    padding: 0;
}

Answer 1

当您将移动链接悬停在显示的<ul>时。具有移动链接的<li>获取<ul>的宽度。

要解决此问题，您需要为顶级菜单项设置特定宽度，例如：

nav > ul > li {
    width:100px; // Change to any value fitting your needs
}

使用>运算符可确保此规则仅适用于顶级<li>项。

注意：您的菜单需要一些额外的工作，但通过设置固定宽度可以解决此特定问题。

为什么下拉菜单会在悬停时显示额外的填充/边距？

1 个答案: