1

wordpress CMSでBones Themeを使用していますが、サブメニューの向きを変更しようとしています。

それが起こることです：

このメニューにカーソルを合わせたときの問題

それが HTML 構造です。

<nav role="navigation">
<ul id="menu-menu" class="nav top-nav clearfix">
    <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">
            <a href="http://www.blablabla.com/blabla/">MENU-ITEM-1</a>
        <ul class="sub-menu">
            <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://www.blablabla.com/blablabla/">submenu-item-1.1</a></li>
            <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="http://www.blablabla.com/blablabla/">submenu-item-1.2</a></li>
            <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://www.blablabla.com/blablabla">submenu-item-1.3</a></li>
            <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://www.blablabla.com/blablabla/">submenu-item-1.4</a></li>
        </ul>
    </li>
    <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44">
        <a href="http://www.blablabla.com/blablabla/">MENU-ITEM-2</a>
    </li>
</ul>

そしてCSSです（私が書いたのではなく、骨のCSSコードです）：

nav{
display: block;
}

.nav li {
float: left;
position: relative;
}

.nav li ul.sub-menu{
float: left;
display: none;
width: 100%;
padding: 3px 0px;
}

.nav li ul.sub-menu li a,
.nav li ul.children li a {
padding-left: 10px;
border-right: 0;
display: block;
width: 180px;
}

.nav li ul.sub-menu li:last-child a,
.nav li ul.children li:last-child a {
border-bottom: 0;
}

.nav li:hover ul {
top: auto;
display: block;
}

最初の画像の問題を回避するにはどうすればよいですか?

ありがとう

4

1 に答える 1

0

サブメニューの CSS を次のように変更します。

.nav li ul.sub-menu{
float: left;
display: none;
width: 100%;
padding: 3px 0px;
margin-top: -8px;
}
于 2013-07-13T12:26:02.200 に答える