Question

我很好奇为什么我的“主页”链接不断转移。我已成功解决了这个问题：

jsfiddle.net/nbf8fwdv /

感谢您的帮助。我仍然在CSS中使用语义和正确用法，所以如果你看到我的代码中只有初学者会有任何明显的问题，请告诉我。感谢您的帮助。

Answer 1

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

max-width: 75px;

来自这个班级：

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

因为主页列表项目自然大于75px，所以max-width属性实际上是在悬停时减小它的宽度。

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

Answer 3

通过将鼠标悬停在＆＃34;投资组合＆＃34;上来实际保存其他链接，这是我的2美分。 http://jsfiddle.net/nbf8fwdv/5/

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

CSS下拉菜单转换

3 个答案: