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

Спасибо за ответ! Когда я делаю это, я получаю:

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").

Answer 2

Не совсем понятно, о чем вы спрашиваете, но я думаю, что это может быть решением, которое вы ищете:

Просто добавь 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;
}