0

メニューを通常のテキスト内に表示して、テキストがメニューの周囲に回り込むようにします。何か提案はありますか？

テキスト付きのメニュー:

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; 
}
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 に答える