0

I want to show a menu within regular text, so that the text wraps around my menu. Any suggestions guys?

The menu with text:

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>

Using the div containing the submenu item to make the background going over the regular text.

My 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; 
}
4

2 回答 2

0

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

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

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;
}
于 2013-09-13T15:33:52.043 回答
0

谢谢回复！当我这样做时，我得到：

This is some text with an
option link
and some more text

虽然我需要的是：

This is some text with an option link and some more text

所以基本上下拉菜单看起来像常规文本之间的常规文本，但是一旦有人将鼠标悬停在上面，它就会显示选项。旨在为用户提供特定条款的某些选项（例如“在 Google 上搜索 xyz”。

于 2013-09-15T13:58:54.210 回答