如何将内部标签放在不同的位置？ [英] How can I position an inner tag at different position?

问题描述

我有这个菜单结构：
（内部< ul> 标签可以由自定义< div& ，每一个其他的结构变化是很困难的，因为代码是从动态模块系统生成的，用PHP编写）

I have this menu structure: (the inner <ul> tag can be surrounded by a custom <div>, every other structural change is a lot more difficult because the code is generated from a dynamic module system, written in 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>

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

The goal is to display the inner <ul> after Item 1 on the left side as a sub menu instead of at the top with the other toplevel items..

有没有办法，结构？只是用CSS等等？

Is there a way to do that without modifying the structure? Just with CSS or so?

感谢所有的答案！

特别是besluitloos和Caelea，这正是我正在寻找。

especially to besluitloos and Caelea, that's exactly what I'm looking for.

推荐答案

包含第二个< ul> 的父级< li> < ul> 应该位于绝对位置。

The parent <li> containing the second <ul> should be positioned relative and the contained <ul> should be positioned absolute.

有些像：

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

我写了 left：145px

PS：提示：不要使用相同的 body-menu类在那些div上，它应该是不同的大容器，而不仅仅是。我真的不认为有必要在那些< li> 。

PS: Tip: don't use the same "body-menu" class on those divs it should be different for the big container, and not only. And I don't really think it's necessary to have that div inside those < li >.

这篇关于如何将内部标签放在不同的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！