2

私の問題：ドロップダウンメニューのメインナビゲーションアイテムの名前が文字の長さで増えると、ドロップダウンメニューが壊れます（添付のimageTwoを参照）。navアイテム名の文字数が増えるとレイアウトがめちゃくちゃになります

主なナビゲーションアイテムの文字の長さが長くなった場合に、デザインにある程度の応答性を与え、レイアウトを調整することを期待して、相対的な測定単位（主にems）を使用していますが、機能しませんでした。

私のメインメニューは比較的配置されており、サブメニューは絶対的に配置されています。これらのサブメニューは、標準のように垂直方向にドロップダウンするのではなく、その上のメインメニューと平行に水平方向に展開します（添付のimageOneを参照）。メニューの見た目

私の目標は、メインメニューのナビゲーションアイテムの文字数が増減した場合に、a）メインナビゲーションメニューが幅を適切に再調整できるように、b）サブメニューが適切に再調整できるようにコードを修正する方法を理解することです。メニューは、その上のメインメニューの真下に表示されるように位置を再調整します。

私の考えでは、これを行うにはjQueryを使用する必要がありますが、CSSのみを使用して可能かどうか疑問に思いました。

以下にCSSを投稿しました。さらに情報が必要な場合はお知らせください。

#navigation {
  background: rgb(102,102,102); 
  max-height: 3.34em;
  padding: 0;
  position: relative;
  max-width: 48.5em;
  border-radius: 0;
}

#navigation .child-menu, #navigation .child-menu2 {
  display: none;
}

#navigation li.hover #admin-submenu  {
  left: -405px;
}

#navigation li.hover .child-menu {
  background: #47766c;
  display: block;
  position: absolute;
  width: 80em;          
  z-index: 250;
  top: 39px;
  left: -334px;
}

#navigation ul li ul li:hover .child-menu2 {
  background: #47766C;
  display: block;
  left: 0;
  position: absolute;
  top: 40px;
  width: 110px;
  z-index: 250;
}

ここに画像の説明を入力してください

4

1 に答える 1

2 
#navigation ul li ul {
    position:absolute;
    min-width:100%;
    height:40px;
    margin:0px;
    padding:0px;
    left:0px;
    top:40px;
}
#navigation ul li ul li {
   float:left;
   height:40px;
   display:block;
   padding-left:15px;
   padding-right:15px;
}

サブメニューのulタグの最小幅を100％またはページと同じ幅に設定する必要があります。次に、その左：0px; その場合、上部は40px、または親メニューの高さと同じになります。

于 2012-07-26T18:36:03.260 に答える