4

我有三个问题：

  1. 当我将鼠标悬停在它们上时，我希望我的菜单链接为“粗体”，但是当我这样做时，它会使右侧的项目略微移动，我怎样才能阻止它们移动？

  2. “Two”上的下拉菜单，如何使项目直接排列在“Two”下方，具有适当的间距，并且具有相同宽度的背景，尽管这两个项目的字符数量不同？

  3. 我可以做些什么来固定菜单栏，以便当我向下滚动时，它在页面顶部仍然可见？我尝试添加“位置：固定”，但这只是把它搞砸了..

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

<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

4

3 回答 3

3

以下是您第一个问题的答案：

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/

于 2012-11-20T22:34:51.277 回答
1

首先将菜单 div 放在 wrap div 之外。这样你就没有任何奇怪的事情发生在 position: fixed 上。

  1. 不幸的是，使用 width: auto 你无法控制你看到的“推动”。您需要为列表项提供固定值（无论是百分比还是像素值）。百分比是首选，因为它允许响应式设计。

  2. 确保背景颜色应用于 ul 元素而不是 li 元素。此外，使用 text-align: center 使它们保持美观和居中。

  3. 定位：固定是正确的！只需确保设置 top: 0 和 left: 0 ，这样栏就不会在不同的浏览器上做任何时髦的事情。此外，您在主容器的顶部和底部都有填充物，以防止栏完全位于顶部。

这是#menu li:hover ul更改和#menu ul li ul li添加的小提琴。

于 2012-11-20T22:10:58.140 回答
0

如果这会有所帮助，这就是小提琴

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

在 ul li 上，我只是将 with 设置为 width: 100px;

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

     }
于 2012-11-20T22:37:33.433 回答