0

Drupal からシンプルなサイトを構築していますが、プライマリ メニューとサブメニューが中央に配置されていません。多くの CSS3 プロパティを試しましたが、どれも機能しません。

こんな構造になっています 

<div class="nav">
     <ul>
       <li>Primary Menu 1</li>
       <li>Primary Menu 2</li>
          <ul>
            <li>Submenu 2.1</li>
            <li>Submenu 2.2</li>
          </ul>
       <li>Primary Menu 3</li>
       <li>Primary Menu 4</li>
     </ul>
    </div>

プライマリとサブメニューの両方を水平に表示し、CSS3 で中央揃えにしたいのですが、それを行うにはどうすればよいですか? 完全に新しい CSS コードを提供してください。

どうもありがとうございました。

4

1 に答える 1

0

私はあなたがこのように見えることを願っています:-

HTML

<div class="nav">
     <ul>
       <li>Primary Menu 1</li>
       <li>Primary Menu 2
          <ul>
            <li>Submenu 2.1</li>
            <li>Submenu 2.2</li>
            <li>Submenu 2.3</li>
            <li>Submenu 2.4</li>
          </ul>
       </li>
       <li>Primary Menu 3</li>
       <li>Primary Menu 4</li>
     </ul>
    </div>

CSS

.nav ul {
background:lightgrey;
}
.nav ul li {
  display:inline-block;
  margin:0 5px;
  position:relative;
}
.nav ul li ul {
display:none;
padding:0 10px;
}
.nav ul li:hover ul {
  display:block;
  position:absolute;
  left:0;
  top:19px;
  right:0;
}
.nav ul li ul li {
  display:block;
  margin:5px 0;
  padding:0;
}

デモ

于 2012-11-01T10:37:11.660 に答える