0

質問を正しく定式化したかどうかはわかりませんが、達成したいことを説明してみましょう。

WordPress ベースのサイトのナビゲーション メニューのスタイルを設定しようとしています。

サブメニュー リンクを Web サイトの<body>タグの幅全体 (幅 960px) に均等に配置したい。特定のサブメニューのリンクが 1 つの行に収まらない場合は、リンクを折り返してきれいな列に配置したいと考えています。

最後に、サブメニューがホバー時にドロップダウンしたときに、Web サイトの残りのコンテンツを押し下げる必要があります。

問題:サブメニューの順序なしリストは、親の順序なしリスト内のリンクの位置に影響を与え、リンクを移動します。どういうわけか、親メニューのリンクを所定の位置に保つために私ができる唯一のことは、適用してサブメニューを邪魔にならないようにすることでしたmargin-right:-965px;

質問: CSS を変更して、メイン コンテナの端と同じ高さで、両方のサブメニューをずっと左側に配置するにはどうすればよいですか?

(必要に応じて、カスタム クラスを各サブメニューに個別に割り当てることができます。たとえば、.submenu-about と .submenu-investors などです。)

よろしくお願いします。

ナビゲーション メニューの完全な CSS は次のとおりです。

.main-navigation ul {
list-style-type:none;
margin-top:45px;
}

.main-navigation ul {
display: inline-block;
width:70%;
float:right;
}

.main-navigation ul li {
float:left;
}

.main-navigation ul li a {
display:block;
margin:3px 0 3px 40px;
}

.main-navigation ul ul {
background:#efefef;
display:none;
}

.main-navigation li {
    font-size: 13px;
}

.main-navigation li a {
outline: none;
text-decoration:none;
border-bottom: 0;
color: #6a6a6a;
text-transform: uppercase;
//white-space: nowrap;
}

.main-navigation li a:hover {
color: #000;
}

.main-navigation ul li:hover > ul {
margin:-1px -960px 3px 0;
display:block;
width:960px;
}

.main-navigation li ul li a {
font-size: 11px;
margin: 10px 0 10px 10px;
width:180px;
}

.main-navigation .menu-item > a,
.main-navigation .menu-ancestor > a,
.main-navigation .page_item > a,
.main-navigation .page_ancestor > a {
color: #9a9a9a;
font-weight:bold;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight:bold;
}
4

2 に答える 2

0

これはそれを行う必要があります

これをcssに追加します

.main-navigation ul li .sub-menu {position:absolute; left:0px;}
于 2013-04-16T18:03:12.867 に答える
0

私自身の答えを見つけました。

  1. から背景を削除しますul li:hover ul。

  2. position:relativeと の灰色の背景を設定しul li:hover >ul liます。

  3. 各サブメニュー項目の負の左マージンを個別に設定してli、異なるピクセル数で個別に左にプルします。

于 2013-04-16T20:46:15.807 に答える