CSS 下拉菜单切换答案

【问题标题】：CSS Dropdown Menu ShiftCSS 下拉菜单切换
【发布时间】：2015-07-16 01:53:15
【问题描述】：

我很好奇为什么我的“主页”链接不断切换。我已经解决了这个问题：

jsfiddle.net/nbf8fwdv/

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案3】：

要在将鼠标悬停在“投资组合”上时通过移动来实际保存您的其他链接，这是我的 2 美分。 http://jsfiddle.net/nbf8fwdv/5/

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

【讨论】：