CSS下拉菜单移位

我很好奇为什么我的“主页”链接一直在切换。我把这个问题弄得一团糟：

jsfiddle.net/nbf8fwdv/

---

谢谢你的帮助。我还在掌握CSS中的语义和正确用法，所以如果你看到我的代码中有任何只有初学者才会遇到的突出问题，请告诉我。提前感谢您的帮助。

为了防止主页在悬停状态下移动，您需要删除此属性：

max-width: 75px;

本课程：

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

---

由于主页列表项的大小自然大于75px，因此max width属性实际上是在悬停时减小其宽度。

要在悬停在“公文包”上时切换以保存其他链接，请看我的2美分

---

您可以编写一个类似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)}

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)}