0

まず最初に、何度も尋ねられた質問についてお詫び申し上げます。私は、stackoverflow のすべての質問とオンラインの他の多くのリソースに目を通したと思います。数日間のテストと変更と調整の後、まだできません。サブメニューを水平にして親の下の中央に配置できないという私のcssで何が間違っているのかを理解してください..？

ここにHTMLと私のカスタムCSSへのリンクがあります

http://cssdesk.com/r7gZf

私は Wordpress テーマを使用しています。テーマのナビゲーション CSS は、問題を引き起こしている何かを見逃した場合に備えて、以下のリンクにあります。

http://cssdesk.com/Th9E9

ヘルプに大いに感謝します-私は怒っています.. :)

ありがとう！

4

2 に答える 2

0

上記の答えは興味深いアプローチですが、最初の li は子 ul と一致していません

次のようなものを試すことができます: CSSDesk

または、別の解決策は、サブ ul の絶対位置を削除し、div を追加してメイン ul ボックスの影を偽造することです。

HTML:

<nav role="navigation" class="site-navigation main-navigation">
    <div class="bar"></div>
    <ul id="menu-menu-1" class="menu">
        <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-parent-item menu-item-28"><a href="http://51stokescroft.com.gridhosted.co.uk/restaurant/">RESTAURANT</a>
            <ul class="sub-menu left">
                <li id="menu-item-138" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-138"><a href="http://51stokescroft.com.gridhosted.co.uk/restaurant/menu/">Menu</a></li>
                <li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-139"><a href="http://51stokescroft.com.gridhosted.co.uk/restaurant/restaurant-opening-times/">Opening Times</a></li>
                <li id="menu-item-137" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-137"><a href="http://51stokescroft.com.gridhosted.co.uk/restaurant/restaurant-gallery/">Gallery</a></li>
                <li id="menu-item-136" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-136"><a href="http://51stokescroft.com.gridhosted.co.uk/restaurant/restaurant-contact-us/">Contact Us</a></li>
            </ul>
        </li>
        <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-parent-item menu-item-25"><a href="http://51stokescroft.com.gridhosted.co.uk/bar/">BAR</a>
            <ul class="sub-menu center">
                <li id="menu-item-142" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142"><a href="http://51stokescroft.com.gridhosted.co.uk/bar/events/">What’s On</a></li>
                <li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-143"><a href="http://51stokescroft.com.gridhosted.co.uk/bar/bar-opening-times/">Opening Times</a></li>
                <li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140"><a href="http://51stokescroft.com.gridhosted.co.uk/bar/bar-gallery/">Gallery</a></li>
                <li id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141"><a href="http://51stokescroft.com.gridhosted.co.uk/bar/contact-us/">Contact Us</a></li>
            </ul>
        </li>
        <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-parent-item menu-item-27"><a href="http://51stokescroft.com.gridhosted.co.uk/party-bookings/">PARTY BOOKINGS</a>
            <ul class="sub-menu right">
                <li id="menu-item-135" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-135"><a href="http://51stokescroft.com.gridhosted.co.uk/party-bookings/contact-us-2/">Contact Us</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS:

body {
  position: relative;
}
.main-navigation .bar{
  width: 100%;
  height: 55px;
  position: absolute;
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
}

.main-navigation > ul > .menu-parent-item > a::before {
  content: none;
}

.main-navigation ul {
  list-style: none;
  margin: 0 auto 0 auto;
  padding: 0;
  text-align:center;
  overflow: visible;
  background-image: none;
  background-repeat:repeat;

}

.main-navigation li {
  display: inline-block;
  margin-right: 0.75em;
  font-size: 14px;
  font-size: 1.4rem;
  position: relative;
}


.main-navigation a {
  display: block;
  font-family: Lusitana;
  font-size: 10px;
  font-size: 1em;
  margin-right: 0.75em
  text-decoration: none;
  color: #f4e9e1;
  padding: 0.75em 2em;
  line-height: 1;
  position:relative;
}

.main-navigation ul li:hover > a {
  color: #3c2415;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

.main-navigation ul li:hover > a {
  color: #3c2415;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

.main-navigation li:hover ul {
  display: inline-block;
  position: absolute;

}
.main-navigation li:hover li {
  float: none;
  font-size: 16px;
  font-weight:bold;
  margin-top:3px;
}

.main-navigation li ul {
  display: none;
}

.main-navigation ul ul.right {
  margin-left: -25%;
}

.main-navigation ul ul.left {
  margin-left: -100%;
}


.main-navigation ul ul.center {
  margin-left: -200%;
}

.main-navigation ul ul {
  display: none;
  z-index: 99999;
  margin-top: -1px;
  padding-top: 1px;
  text-align: center;
  white-space: nowrap;
  text-align: center;
  margin-left: -100%;
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
}

.main-navigation ul ul li {
  display: inline-block;
}

.main-navigation ul ul a {
  display: block;
  text-align: center;
  font-family: Lusitana;
  font-size: 12px;
  font-size: 1.2rem;
  color: #3c2415;
  padding: 0.75em;
  margin: 0;
  -webkit-box-sizing: none;
  -moz-box-sizing: none;
  box-sizing: none;
  white-space: nowrap;

}

.main-navigation ul ul li:hover > a {
  color: #3c2415;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

.scheme-black .main-navigation > ul > li:hover > a {
  text-shadow: none;
}
.scheme-black .main-navigation .sub-menu li, .scheme-black .main-navigation .sub-menu .sub-menu li {
  background: transparent;
}
.scheme-black .main-navigation .sub-menu li:hover {
  background: transparent;
}
于 2013-11-07T13:32:59.143 に答える