0

提前谢谢大家。我一直在研究 CSS 和 HTML 中的菜单，但我不知道如何使阴影出现在整个菜单项 + 子菜单周围，而不仅仅是下拉的部分。这应该涵盖它，但它不是：

我的代码在这里：http: //jsfiddle.net/Clare12345/Nq4rV/1/。

    #listitems:hover { box-shadow: 2px 4px 8px #888888; }
    #menu ul li:hover ul li { display:block; box-shadow: 2px 4px 8px #888888; }

<div id="menu">  
    <ul>
        <li><div id="listitems"><div id="menuheader">Steps:</div><a href="#nogo">Section One</a> <div id="smalltext">Description Text here</div>
            <ul>
                <li><a href="#nogo">A</a></li>
                <li><a href="#nogo">B</a></li>                                                              
    </ul> </div>

我尝试使用 :hover 在几乎所有东西上添加阴影，它通常只是在我已经拥有的阴影上添加了一个额外的阴影。阴影显示在顶部、底部和左侧的所有正确位置周围，但右侧仅显示“此处的描述文本”及其上方的位置，包括菜单顶部不在阴影中。

我真的不知道如何解决它。如果有人愿意提供帮助，我将不胜感激！

编辑：我还试图弄清楚如何在每个“步骤”中放置多个“部分”。我真的不确定如何在列表中执行此操作。我是否需要制作几个列表并将它们彼此相邻浮动？我仍然希望能够很好地利用 box-shadow！谢谢！

4

1 回答 1

1

如果您top从 中删除属性#menu ul li:hover ul并设置position: relative;为#listitems:hover，您将获得非常漂亮的阴影。

http://jsfiddle.net/Nq4rV/2/

请编辑您的标记。如果您想在页面上多次重复某些选择器，请使用类而不是 ID。

于 2013-04-19T23:18:06.263 回答