解决 CSS 导航菜单中的变化答案

【问题标题】：Resolve shifts in CSS nav menu解决 CSS 导航菜单中的变化
【发布时间】：2014-08-26 11:56:26
【问题描述】：

我的 NAV 菜单中有变化，我无法解决。菜单基于 CSS 和 HTML。问题 1 > 将鼠标悬停在标题 1 到 4 上会导致任何标题向右轻微移动。我该如何阻止它？问题 2 > 将鼠标悬停在 Header4 上会显示一个最初看起来不错的子菜单。但是当您将鼠标悬停在子菜单上时，焦点项会比其他子菜单项大，因此看起来很草率。我该如何纠正？问题 3 > 悬停在子菜单上时，设置菜单的子菜单（最后一个菜单项）的宽度会扩大。无论是否悬停在上面，我都希望它具有相同的宽度。如何？可能与#2 的答案相同。

最后，我希望得到一些反馈。这个 NAV 的原始 CSS 对我来说似乎很直接。当我观察到需要“调整”的东西时，我在这里添加了一个调整，那里又添加了一个，那里又添加了一个，直到现在它似乎完全令人费解。这是常见的，还是我只是用糟糕的调整来搞砸事情？感谢您的帮助。

CSS：

/* NAVIGATION */
#menu{
    padding 0;
    margin: 0;
}

.nav{
    margin: 0;
    padding: 0;
}

.nav ul{
    padding: 0;
    background-color: #003366;
}

.nav ul li{
    display: inline-block; /*added*/
    padding: 10px 22px 10px;
    border-right: 1px solid #dadada;
    position: relative;
    background-color: #003366;
}

.nav ul li:hover{
    background-color: #336699;
    /* Adding the padding makes the hover selection not jump */
    padding: 10px 22px 10px 26px;
    left: -4px;
}

.nav ul li:hover ul{
    display: block;
    position: absolute;
}

.nav ul li a{
    text-decoration: none;
    color: #FFFFFF;
}

.nav ul li ul{
    display: none;
    left: 0px;
    /*width: 403px;*/
    margin-top: 10px;
    padding-top: 0px;
    box-shadow: 0px 1px 1px rgba(85, 85, 85, 0.75);
    border-top: 1px solid #dadada;
}

.nav ul li ul li{
    width: 143px;
    border-bottom: 1px solid #dadada;
    background-color: #336699;
}

.nav ul li ul li:hover{
    background-color: #FFF8DC;
    left: 0px;
}

.nav ul li ul li a{
    text-decoration: none;
    color: #FFFFFF;
}

.nav ul li ul li:hover a{
    color: #000;
}

#settings {
    padding: 6px 22px;
    /*vertical-align:middle;*/
    float:right;
    border-right:none;
}

#settings:hover {
    padding: 6px 18px;
}

#settings > ul {
    position: absolute;
    left: -124px;
    top: 27px;
}

网页：

<?php

$access = 0

?>

<html>
    <head>
        <title>Nav</title>
        <link rel="stylesheet" href="basicnav2.css"/>
    </head>
    <body>  
        <div id="menu">
            <nav class="nav">
                <ul>
                    <li>
                        <a href="#">Heading1</a>
                    </li>
                    <li>
                        <a href="#">Heading2</a>
                    </li>
                    <li>
                        <a href="#">Heading3</a>
                    </li>
                    <li>
                        <a href="#">Heading4</a>
                        <ul>
                            <li>
                                <a href="#">Item 1</a>
                            </li>
                            <li>
                                <a href="#">Item 2</a>
                            <li>
                        </ul>
                    <li>
                        <a href="#">Heading5</a>
                    </li>
                    <?php
                    if ($access < 2)
                    { ?>
                    <li id="settings">
                        <a href="#"><img src="images/settings.png" alt="Settings" height="25" width="25"></a>
                        <ul id ="settings ul">
                            <li>
                                <a href="#">Logout</a>
                            </li>
                        </ul>
                    </li>
                    <?php
                    } ?>
                </ul>
            </nav>
        </div>
        <div id="textarea">
            <p>This is sample text.</p>
        </div>
    </body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

你这部分代码的原因是什么：

/* Adding the padding makes the hover selection not jump */
padding: 10px 22px 10px 26px;
left: -4px;

删除它似乎可以解决我的问题。

【讨论】：

添加了 -4px 以便悬停选择与其“未悬停”对应项的左边距匹配。否则会向右移动 4px（间隙）。换句话说，左边距不对齐。添加了填充以阻止悬停选择折叠（变小）。如果不存在，则悬停在上面的选择会变小。我只是想让 NAV 菜单稳定。您将鼠标悬停在一件事上，所有内容都保持相同的大小，在完全相同的位置。

【解决方案2】：

问题1： li 元素的膨胀是由于添加了左：-4px；

在 .nav ul li:hover css 部分但是，删除它会导致每个 li 左侧的空间很小。

问题 2 的解决方案是删除上述 css 部分中的填充：

padding: 10px 22px 10px 26px;

而只是使用下面的行来跳转到子菜单：

padding-bottom: 10px;

演示：http://jsfiddle.net/pdfn0auw/2/

编辑：包括新的演示

【讨论】：

感谢您的建议。我去掉了 .nav ul li:hover 中的所有填充，这改善了一些事情。我保留了-4px。没有它，子菜单不会与父级的左边距对齐，我想要它。现在，当鼠标悬停在选区上时，菜单中唯一改变大小的项目是选区，该选区折叠了 4 像素。我也希望它保持相同的大小，但如果我必须选择两种结果中的一种，这似乎更有吸引力。可惜……似乎消除班次应该是可行的。我还在修补它。还有其他想法吗？
我做了一些更改，现在在导航菜单之间切换时没有闪烁。试试这个演示：jsfiddle.net/pdfn0auw/2 请拉伸小提琴的输出部分以获得更好的外观