0

これはstackoverflowへの私の最初の投稿ですが、私は皆さんの知識を常に使用しているので、ありがとう!

メニューの配置に問題があります。各メニューの最初/中間/最後のコンポーネントを持つことができるように、li 要素内に div を追加したワードプレス メニューがあります。これは、最初と最後のアイテムが「エンドキャップ」である状態で、現在のメニューの状態を上げることができるようにするためです。説明するのは難しいですが、ここで見ることができます: http://clarksvillevet.com/new/

現在のメニュー項目の中央がどのように「沈んでいる」ことに注目してください。ここで何が欠けているのかわかりません。行の高さだと思っていたのですが、それは少ししか動かないのです。cssで何かが重複していると思います（私の言いたいことがわかっている場合は、2回呼び出すようなものです）が、やはりわかりません。生成された HTML は次のとおりです。

<div id="main-menu">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8">
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-23">
<div class="first"></div>
<div class="middle">
<a href="http://clarksvillevet.com/new/about-southside-va-veterinary-hospital/" title="About Southside Virginia’s Best Veterinary Hospital">About</a>
</div>
<div class="last"></div>
</li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20">
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50">
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56">
<li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62">
</ul>
</div>

そして、CSS

#main-menu{
width: 598px;
height: 51px;
margin: -6px 0px 0px;
z-index:401;
float: left;
background:url('images/BG-Menu.png') no-repeat top left transparent;
}

.menu {
list-style-type:none;
list-style-position:outside;
list-style-image:none;
position:relative;
z-index:300;
width: 598px;
height: 51px;
float: left;
line-height: 57px;
}

.menu ul{
position:absolute;
line-height: 57px;
overflow:hidden;
margin:0px;
padding:0px;
top: 51px;
left:0px;
display: none;
list-style-position:outside;
}

.menu a {
display:block;
display:inline-block;
padding:0px;
text-decoration:none;
letter-spacing: 1px;
font-size: 13px;
color: #dddddd;
margin: 0px;
}

.menu .first, .menu .middle, .menu .last {
position: relative;
padding:0px;
display: inline-block
}

.menu .first, .menu .last{
width: 11px;
height: 51px;
margin: 0px;
padding: 0px;
}

.menu .middle {
height:51px;
margin: 0px;
padding: 0px;
}

.menu a:hover {
color:#ffffff;
background-color:transparent;
}

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


.menu ul a:hover {
color:#ffffff;
}

.menu li ul a {
width: 250px;
height: 32px;
float:left;
line-height: 30px;
background: url('images/BG-Drop-Menu.png') no-repeat top left transparent;
padding: 0px 0px 0px 20px;
color: #ffffff;
}

.menu li ul a:hover{
background: url('images/BG-Drop-Menu-Hover.png') no-repeat top left transparent;
}

.menu li ul ul {
left:0em;
margin:0px 0 0 10px;
}

.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul {
display:none;
}

.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{
display:block;
}

.current-menu-item .first{
background:url('images/BG-Menu-Current-A.png') no-repeat top left transparent;
}

.current-menu-item .middle{
background:url('images/BG-Menu-Current-B.png') repeat-x top left transparent;
}

.current-menu-item .last{
background:url('images/BG-Menu-Current-C.png') no-repeat top left transparent;
}

.current-menu-item{
line-height: 51px;
}

ドロップダウン メニューもあるので、 .menu ul display:none が表示されたら、それが目的です...おかしなところがあれば自由に修正してください。ありがとう！

4

2 に答える 2

0

すべての子divsはインライン ブロックです。この場合、テキストが含まれている場合は line-height が適用されます。これを修正するには、以下のようにフロートする必要がありdivsます。

.menu ul > div { float: left }
于 2012-12-18T00:19:02.233 に答える
0

.first と .middle left の両方を float (float: left;) にすると、現在の問題は解決します。

しかし、あなたのメニュー カットアップには、この問題だけではない問題があると思います。ここで確認すべき点がいくつかあります。

  • .first .middle と .last があります。.first と .last だけを使用して、.last の背景画像に .middle と .last を組み合わせてみませんか? 他のメニュー項目に対応するにはもう少し長くする必要がありますが、それは 2 つの画像のみが読み込まれることを意味します。

  • 特にメニューでは、空の div を避けるようにしてください。これは、アクセシビリティと SEO の両方にとって重要なセクションです。このセクションのマークアップの改良には、(おそらく) サイトの他のどのセクションよりも多くの時間を費やす必要があります。

  • 行の高さを使用する代わりに (クロス ブラウザーを試しているときに混乱する可能性があります)、パディングとマージンを試してください。

于 2012-12-18T00:22:58.653 に答える