Question

我的NAV菜单有变化，我无法解决问题。菜单是CSS＆amp;基于HTML。问题1＆gt;将鼠标悬停在标题1到4上会导致右侧任何标题右侧轻微移动。我怎么阻止它？问题2＆gt;鼠标悬停在Header4上会显示一个最初看起来很好的子菜单。但是当您将鼠标悬停在子菜单上时，焦点项会比其他子菜单项大，所以看起来很邋..我该如何纠正？问题3＆gt;当子菜单悬停时，设置菜单的子菜单（最后一个菜单项）的宽度会扩大。无论它是否悬停在上面，我都希望它的宽度相同。怎么样？也许与＃2相同。

最后，一般观察我喜欢一些反馈。我对这个资产净值的原始CSS似乎很直接。我已经观察到了需要调整的事情＆＃34;我在这里添加了一个调整，另一个调整，还有另一个，直到现在它似乎完全令人费解。这是常见的，还是我只是通过糟糕的调整来解决问题？谢谢你的帮助。

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>

Answer 1

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

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

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

Answer 2

Issue1： li元素的扩展是由于添加了左：-4px;

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

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

padding: 10px 22px 10px 26px;

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

padding-bottom: 10px;

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

编辑：包含新演示

解决CSS导航菜单中的班次

2 个答案: