Question

我有三个问题：

当我将鼠标悬停在它们上面时，我希望我的菜单链接为“粗体”，但是当我这样做时，它会让右边的项目略微移动，我怎么能阻止它们移动？
“Two”的下拉菜单，如何使项目直接排列在“Two”下方，具有适当的间距，并且宽度相等，尽管两个项目的数量不相同人物？
如何修改菜单栏，以便在向下滚动时，页面顶部仍然可以看到？我尝试添加“position：fixed”但这只会让一切都搞砸了..

非常感谢任何帮助，谢谢！

<head>
    <title>Untitled</title>
</head>

<body>
    <div id="wrap">
    <div id="menu">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a>
                <ul>
                    <li><a href="#">Six</a></li>
                    <li><a href="#">Seven</a></li>
                </ul></li> 
                        <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
            <li><a href="#">Five</a></li>
        </ul>
    </div>
    <div id="middle"></div>     
    <div id="footer"></div>
    </div>
</body>

我无法弄清楚如何在没有乱码的情况下粘贴css，所以这里是样式表的链接：https://dl.dropbox.com/u/14754850/stylesheet.css

Answer 1

以下是您的两个首要问题的答案：

<强> 1）

#menu ul li {
   ...
   width: 90px; /* Give items fixed size */
}

<强> 2）

#menu ul li ul li {
   background-color: #2d2d2d; /* Add background */ 
}

#menu ul li ul li:last-child {
   padding-bottom: 10px; /* Dirty fix for last menu item */
}

<强>加了：

#menu ul li ul li a {
   padding-bottom: 0px; /* Makes drop down items more compact */
}

#menu ul li a { 
   ...
   padding: 10px 20px 10px 20px; /* Give menu headers some spacing */
   ... 
} 

#menu ul {
   padding: 0; /* Fix left space */
}

试一试：http://jsfiddle.net/uYTnf/3/

Answer 2

首先将菜单div保留在wrap div之外。这样你就没有任何奇怪的东西与位置：固定。

不幸的是，使用width：auto，您无法控制所看到的“推送”。您需要使用固定的列表项（无论是百分比还是像素值）。百分比是首选，因为它允许响应式设计。
确保背景颜色应用于ul元素而不是li元素。另外，使用text-align：center来保持它们的美观和居中。
位置：固定是正确的！只需确保设置top：0和left：0，以便条形图在不同浏览器上不做任何时髦。此外，您在主容器的顶部和底部都有填充物，这样可以防止条形物完全位于顶部。

Here's改变了#menu li:hover ul并添加了#menu ul li ul li。

Answer 3

如果这会有帮助，请点击这里是小提琴

http://jsfiddle.net/squinny/tJZ25/1/

在ul li上我只是设置为宽度：100px;

    #menu ul li {
    text-decoration: none;
    display: inline;
    position: relative;
    float:left;
    width: 100px;

     }

如何使菜单栏固定，以便滚动时不会移动

3 个答案: