我有这个菜单结构:(内部的<ul>标记可以被自定义的<div>包围,其他每个结构上的更改都困难得多,因为代码是从动态模块系统(用PHP编写)生成的)

<div id="menu">
    <div class="body-menu">
        <ul>
            <li class="current"><div class="body-menu">
                <a href="bla">Item1</a>
                <ul>
                    <li class="current"><div class="body-menu">
                        <a href="bla">Sub-Item 1</a>
                    </div></li>
                    <li class=""><div class="body-menu">
                        <a href="bla">Sub-Item 2</a>
                    </div></li>
                </ul>
            </div></li>
            <li class=""><div class="body-menu">
                <a href="bla">Item 2</a>
            </div></li>

        </ul>
    </div>
    <div class="menu-background"></div>
</div>

目标是在第1项之后的内部<ul>作为子菜单显示在左侧,而不是在其他顶级项目的顶部显示。

有没有一种方法可以不修改结构? 仅使用CSS左右?


更新:

感谢所有的答案!

尤其是对于besluitloos和Caelea,这正是我想要的。

#1楼 票数:0 已采纳

包含第二个<ul>的父<li>应该相对放置,并且所包含的<ul>应该绝对放置。

有点像:

ul li { position: relative ;}
ul li ul {position: absolute; top: 0; left: 145px;} 

我写了left: 145px但您可以根据自己的菜单大小给它提供任何值。

PS:提示:不要在这些div上使用相同的“ body-menu”类,对于大型容器,不仅应该如此,而且应该有所不同。 而且我真的认为没有必要在这些< li >包含该div。

#2楼 票数:0

.body-menu > ul > li {
 position:relative;
 float:left;
 padding-bottom: 1em;
}
.body-menu ul ul {
 position:absolute;
 left:0;
 top:1.3em;
 display:none;
}
.body-menu > ul > li:hover > ul {
 display:block;
}

那是您要找的东西吗?

编辑:对不起,IE不能与内联块一起玩。 因此,您必须将其更改为“内联”。 然后,您可以省略底部填充,因为这不适用于嵌入式元素。 除非您浮动元素。 编辑了上面的代码以使用float。

编辑2:错别字。

#3楼 票数:0

可能您想做一些事情,例如隐藏子菜单,并使其悬停在鼠标悬停时弹出或显示。 http://cssmenumaker.com/builder/42231为例。

  ask by crisler translate from so

未解决问题?本站智能推荐:

1回复

如何将内部-内部标签放置在不同的位置?

之前我问了一个更基本的问题( 如何将内部标签放置在不同的位置? ),它的回答很完美。 但是我忘记了更深的子级别。基本问题是,顶级项目在页面上的显示位置与子级别不同。 所以结构现在看起来像这样: 我使用此代码解决了基本问题,即在左侧菜单和顶层显示其原始位置(顶层菜单)时显示了这些底
1回复

为什么使用Spry菜单杀死我的 标签?

参考我的测试网站页面: http://thepfjstudios.com.au/testing/content/NewAbout.php 我在左侧有一个Spry菜单,在使用该菜单时,它似乎杀死了右侧内容部分中的<p>标记。 .css文件是: http://th
2回复

WordPress:自定义菜单,在标签上添加“当前菜单项”类

我为CSSpress使用CSS框架和自定义菜单: 结果: 而我想要的是:(如果我在“页面2”页面上) 我找不到在当前菜单上添加类的钩子,walker_menu或其他解决方案(例如原始Wordpress菜单上的“ current-menu-item”) 任何想法 ?
6回复

如何将生成的元素放置在原始按钮/链接旁边?

单击后,我想在同一“社交”链接的左侧显示由“社交”链接生成的三个社交元素。 因此,我想在同一行中获得此信息,例如单击“社交”之后: 脸书推特电子邮件社交 预先感谢您的帮助! $(document).ready(function () { $(".icon-soc
1回复

如何将导航栏移动到另一个位置

所以...我之前对菜单栏有疑问,并且已经正确修复,但是我仍然需要帮助(这是我第一次制作自己的网页)如何将导航栏移动到另一个位置? 导航栏应该在右侧而不是左侧,这是代码: document.getElementById('menu').addEventListener("clic
3回复

如何将悬停上的下拉菜单定位到所需位置?

我想创建此菜单,在该菜单上悬停出现一个下拉菜单,通常我将UL设置为top:100%不会有任何麻烦。 但是,这次我需要将其进一步降低,但需要进行精确调整,以使其对跨浏览器友好。 因此,我尝试在UL容器中设置margin-top:17px,以将其从顶部推开,并且可以,但是一旦我将鼠标悬停在其上方
3回复

如何从左到右放置DIV?

是否可以为DIV设置样式,使其看起来如下所示: 用简单的代码 这是菜单。 我只想调整所选DIV的大小。 功能应如下: 1) DIV从左到右放置,没有指定绝对位置。 2) DIV比容器DIV高,但不要拉伸 UPDATE 请与DIV或SPAN一起解释,
1回复

放置三个要素

我有这个CSS样式和HTML: * { padding: 0; margin: 0; } .header { height: 200px; width: 100%; background-color: #261501; } .clearfix {