CSS текстовое меню
Я хочу показать меню в обычном тексте, чтобы текст обвивался вокруг моего меню. Любые предложения, ребята?
Меню с текстом:
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;
}
2 ответа
Спасибо за ответ! Когда я делаю это, я получаю:
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").
Не совсем понятно, о чем вы спрашиваете, но я думаю, что это может быть решением, которое вы ищете:
Просто добавь 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;
}