CSS 菜单文本换行

Question

我想在常规文本中显示一个菜单，以便文本环绕我的菜单。大家有什么建议吗？

带文字的菜单:

This is some text with an <ul id="ddmenu"><li><a href="#">option link</a><ul class="ddsubmenu"><li><div id="ddmenudiv">and a second</div></li></ul></li></ul>

使用包含子菜单项的 div 使背景覆盖常规文本。

我的CSS:

/*Init */

ul#ddmenu, ul#ddmenu ul.ddsubmenu {
    padding:0;
    margin: 0;
}
ul#ddmenu li, ul#ddmenu ul.ddsubmenu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#ddmenu li a, ul#ddmenu li ul.ddsubmenu li a {
    text-decoration: bold;
    color: #000;
    padding: 0px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#ddmenu li {
    position: relative;
}
/*sub menu*/
ul#ddmenu li ul.ddsubmenu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#ddmenu li:hover ul.ddsubmenu {
    display:block;
}
#ddmenudiv {
   background: #fff;
   z-index: 999; 
}

Answer 1

目前还不完全清楚你在问什么，但我认为这可能是你正在寻找的解决方案:

只需将 display: inline-block; 添加到您的 ul#ddmenu, ul#ddmenu ul.ddsubmenu 属性中，就像我所做的那样 here .

HTML:

This is some text with an 
    <ul id="ddmenu">
        <li>
            <a href="#">option link</a>
            <ul class="ddsubmenu">
                <li>
                    <div id="ddmenudiv">and a second</div>
                </li>
            </ul>
        </li>
    </ul>

CSS:

ul#ddmenu, ul#ddmenu ul.ddsubmenu {
padding:0;
margin: 0;
display: inline-block;
}
ul#ddmenu li, ul#ddmenu ul.ddsubmenu li {
    list-style-type: none;
    display: inline-block;
}

/*Link Appearance*/
ul#ddmenu li a, ul#ddmenu li ul.ddsubmenu li a {
    text-decoration: bold;
    display:inline-block;
}

/*Make the parent of sub-menu relative*/
ul#ddmenu li {
    position: relative;
}

/*sub menu*/
ul#ddmenu li ul.ddsubmenu {
    display:none;
    position: absolute;
    width: 100px;
}
ul#ddmenu li:hover ul.ddsubmenu {
    display:block;
}