将子导航项保持在静态位置答案

【问题标题】：Keeping subnav items in a static position将子导航项保持在静态位置
【发布时间】：2013-06-13 19:16:36
【问题描述】：

我正在尝试使用 css3 构建一个子导航。我无法解决的一件事是将子导航保持在同一个地方。

类似于http://www.laingorourke.com/。

无论您将鼠标悬停在顶部导航项的何处，如何将子导航项保持在固定位置？

我创建了一个 jsfiddle 来展示我正在尝试做的事情：

子导航项 css 在第 10 行：

ul#css3menu1 ul{
display:none;
position:absolute;
float:left;
left:0;
top:100%;
padding:0px;
margin:0px 0 0 0px;
z-index:10;
background-color:#093365;
width:1000px;}

我很确定这很容易，但我一辈子都搞不定！

提前致谢。

-詹姆斯

【问题讨论】：

标签： css

【解决方案1】：

只需对您的代码做一些小改动：-

ul#css3menu1 ul {
    background-color: #093365;
    display: none;
    float: left;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
    top:100%; //Remove This
    width:1000px; //Remove This
}

【讨论】：

感谢您的回复，但这根本不起作用。我已经用你的代码更新了 jsfiddle，但是 subnav 项目仍然相对于持有的 ul 出现。我试图让它们固定位置和固定宽度，无论悬停在父 li 上。