0

サイトのドロップダウン メニューで CSS の問題が発生しています。URL は次のとおりです: http://www.juneehee.com/ProductTypeView.aspx?TypeID=2

サブカテゴリ (バッグ & 財布、アートワークなど) を見るとわかるように、最初の行ではドロップダウンが完全に機能しますが、2 行目のサブカテゴリ (例: カリグラフィー) では、ドロップダウン メニューがサブと重なっています。 -カテゴリ自体。なぜそれが起こっているのかわかりません。誰でも解決策を提案できますか?

ここに私のCSSがあります:

.nav-category {
position:relative;
z-index: 2;
float:left;
width:750px;
border:1px solid;
margin-left:0px;
margin-top:0px;
margin-bottom:40px;
}



.nav-category .Categorypanel
{
position:relative;
float:left;
width:auto;
height:auto;

}


.nav-category ul {

list-style:none;
font-family:"Century Gothic";
margin:0;
padding:0;
text-transform:uppercase;
font-weight:normal;

}

.nav-category ul li {
float:left;
margin-right:35px;}

.nav-category ul li a {
text-decoration:none;
color: #424242;
font-size:12px;}

.nav-category ul li a:hover {
color:#666;}

.nav-category ul li ul { display:none; top:20px; position:absolute; left:auto;}



.nav-category li ul li {
line-height:15px; margin-left:5px; padding:3px;} 

.nav-category ul li ul li a { font-size:11px;}

.nav-category ul li:hover ul, li.over ul { display:block;position:absolute; background:#FFF; border:1px solid #ebebeb; white-space:nowrap; margin-top:0px; margin-left:0; padding-left:0}

.nav-category ul li:hover li { float:none; letter-spacing:0px;margin:0px 0 0 0;}
4

1 に答える 1

0

最初に気付いたのは、上から 20px の絶対位置に設定されているように見えることです。絶対位置は、相対的に配置されたコンテナー (#ctl00_ContentPlaceHolder1_pnlCategory) から決定されるため、コンテンツが 2 行目 (または 3 行目、4 行目など) に折り返される場合でも、ドロップダウンは同じ垂直に表示されます。それぞれの「親」ドロップダウン メニュー項目ではなく、親コンテナに相対的です。

于 2012-10-01T08:19:57.840 に答える