CSS 下拉菜单切换

Question

我很好奇为什么我的 'homepage' link 一直在移动。我做了一个 fiddle 的问题：

jsfiddle.net/nbf8fwdv/

感谢您的帮助。我仍然掌握 CSS 中的语义和正确用法，所以如果您发现我的代码有任何只有初学者才会出现的明显问题，请告诉我。提前感谢您的帮助。

Answer 1

为了防止主页在悬停时移动，您需要删除此属性:

max-width: 75px;

从这个class:

nav ul>li:hover {
        background-color: rgba(253,235,193,.6);
        max-width: 75px;
        text-align:center;
}

因为主页列表项自然大于 75px，所以最大宽度属性实际上会减少悬停时的宽度。

Answer 2

要真正保存您的其他链接，请将鼠标悬停在 "portfolio" 上，这是我的 2 美分。 http://jsfiddle.net/nbf8fwdv/5/

  nav ul ul {
        display: none;
        position:absolute;
        left:0;
    }

Answer 3

你可以写一个class像bootstrap

body {
    background-color: white;
    font-family: PT Sans, sans-serif;
    text-shadow: 1px 1px rgba(166,166,166,.2);
}
header {
    background: white;
    width: 100%
    padding: 40px 0;
    color: black;
    text-align: center;
}
a {
    text-decoration: none;
    color: black;
    font-size: 1.0em;
    letter-spacing: 2px;
}
nav {
    box-shadow: 1px 1px 10px rgba(166,166,166,.2);
}
nav ul {
    background-color: rgba(253,235,193,.3);
    overflow: visible;
    color: white;
    padding: 0;
    text-align: center;
    margin: 0;
    position: relative;
}
nav ul li {
    display: inline-block;
    padding: 20px 40px;
    position: relative;
}
nav ul ul {
    display: none;
}
nav ul>li:hover {
    background-color: rgba(253,235,193,.6);    
    text-align:center;
}
nav ul li:hover ul{
    display: block;
    margin-top: 20px;
}
nav ul li:hover li{
    margin-left: -40px;
    margin-top:-15px;
    text-align: center;
    float: left;
    clear: left;
}

.portfolio_menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}

CSS 下拉菜单切换

CSS Dropdown Menu Shift

css

drop-down-menu

nav