18

水平ナビゲーション メニューを作成しようとしています。メニューは全画面幅である必要があり、境界線も幅全体に表示されます。メニューの下に約 15px の余白が必要で、メニューの背景色を使用する以外は、多かれ少なかれこれを達成しました。また、アイテムがホバーされている場合、それが理にかなっている場合は、ホバーの色も境界線の下に拡張する必要があります。

これまでの私のメニューのフィドルです - http://jsfiddle.net/J74eE/2/

Tried to insert my code here but the li items got converted to bullets

コンテナ ナビゲーションの下に余白を設定しましたが、余白領域にも境界線の色を使用したいと考えています。また、どういうわけか、li アイテムのホバー色を境界線の下にも拡張したいと考えていますが、これがどのように達成されるのかわかりません。li アイテムにマージンとボーダーを配置すると、ボーダーが画面の全幅に収まりません。

アップデート

私が達成したいもののモックアップを含めるように私のフィドルを更新しました - http://jsfiddle.net/J74eE/3/

境界線の下部を押し下げるため、パディングを使用できません。その下に背景色の境界線が必要です。

4

2 に答える 2

14

余白をパディングで置き換えてみてください。ボックス モデルで詳細を参照してください: http://www.w3.org/TR/CSS2/box.html

.nav-menu {
   background-color:#FEFFE5;  
   clear:both;
   float:left;
   padding:0px 0px 15px 0px;
   border-bottom: 1px solid #dbd7d4;
   width:100%;
   font-size:13px;  
   z-index:1000; /* This makes the dropdown menus appear above the page content below */
   position:relative;
}
于 2012-11-16T11:37:30.963 に答える
13

私はあなたがこれを探していることを願っています: DEMO

CSS

.nav-menu:after {
  background-color:#FEFFE5;
  position:absolute;
  content:"";
  left:0;
  right:0;
  height:15px;
  top:40px;
}

afterおよびbefore 疑似クラスを使用して、目的の結果を得ることができます。

于 2012-11-16T11:55:05.993 に答える