1

私はアンダースコア WP テーマの基本構造に基づいてサイトを構築しています。長いテキスト行のサブメニュー項目があります。行がliの幅を超えると、テキストが自動的に折り返されます。(私が望む効果は、youthconnectionwilmette.org の「プログラム」の下で見ることができます)

puckpros.edkatzman.com の "Schedule Lessons" の下にあるのは、私が今持っているものです。最初のサブメニュー項目は「新規顧客: 評価とレッスン - 50% オフ」と表示されるはずですが、「新規顧客: 評価と」で切り捨てられています。

私のWP生成htmlは次のとおりです。

<nav class="site-navigation main-navigation" role="navigation">
  <h1 class="assistive-text">Menu</h1>
  <div class="assistive-text skip-link">
    <ul id="menu-puckpros" class="menu">
      <li id="menu-item-798" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-798">
        <li id="menu-item-866" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-866">
          <a href="https://server21.securedata-trans.com/ap/discoverymarketingt/index.php?page=10">Schedule Lessons</a>
          <ul class="sub-menu">
            <li id="menu-item-924" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-924">
              <a href="https://server21.securedata-trans.com/ap/discoverymarketingt/index.php?page=10">New Customer: Evaluation & Lesson – 50% OFF</a>
            </li>
          </ul>
        </li>
      </li>
    </ul>
  </div>
</nav>

そして、私が使用しているcssは次のとおりです。

.main-navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 30px;
    background-color: #00497e;
    clear:both;
    width: 100%;
}

.main-navigation li {
    float: left;
    height: 30px;
    line-height: 30px;
    display: block;
    position:relative;
}

.main-navigation li a {
    display:block;
    color:#fde218;
    text-decoration:none;
    height: 30px;
    line-height: 30px;
    padding: 0 70px;
}

.main-navigation a:hover {
    color: #004973;
    background-color: #fde218;
}

.main-navigation ul ul li {
    float: left;
    width: 150px;
    background-color:maroon;
    top: 5px;
    position:relative;
    display:block;  
}

.main-navigation ul ul li a {
    background-color:#00497e;
    color: #ffffff;
    width: 200px;
    display:block;  
}

display: に別の値を試してみましたが、display: table-cell; 以外に違いはありませんでした。これは、2 番目のサブメニュー項目をラップしますが、一番上の項目を分割し、その一部を 3 番目のメニュー項目の下に配置します。

簡単なものが欠けているに違いありませんが、数時間グーグルで検索して見つけた提案を試してみても、何も機能しません。（Firebugで動作するサイトのcssを見たのですが、どこで行折り返しを行っているのかわかりませんでした。）

4

1 に答える 1

1

リストベースのメニューを作成するための鍵：

1-リストのスタイルを設定しないでください（表示、配置、フロート、余白とパディングのクリアを除く）

2-display:blockすべてのスタイルを使用してAタグに配置します（これには、ホバー状態とアクティブ状態が含まれます）。

あなたはすべてに高みを置いています。2本の線が必要な場合は、高さが自動的に大きくなる必要があります。

于 2013-02-25T19:43:07.243 に答える