CSS問題下拉菜單

我在我的網站有一個下拉菜單的CSS問題。網址是： http://www.juneehee.com/ProductTypeView.aspx?TypeID=2 CSS問題下拉菜單

正如你所看到的子類（袋&皮包，藝術品等），下拉完全適用於第一行，但對於第二排子類別（例如：書法），下拉菜單與子類別本身重疊。我無法找到爲什麼發生。任何人都可以提出解決方案

這裏是我的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;}

來源

2012-10-01 nahid

我注意到的第一件事是，他們似乎有絕對定位，20像素從頂部設置。絕對定位將由其相對定位的容器（＃ctl00_ContentPlaceHolder1_pnlCategory）確定，因此如果內容包裝到第二條（或第三條或第四條等）線，那麼下拉菜單仍將出現在相同的垂直位置;相對於其父容器，而不是相應的「父」下拉菜單項。

來源

2012-10-01 08:19:57 Mike

謝謝Mike。你是對的。但是隻有把定位設置爲相對並不能解決問題。我還必須將margin-top設置爲20px。再次感謝。 – nahid

如果您覺得它有效地解決了您的問題，請不要忘記接受答案;-)很高興您能解決問題，nahid。 – Mike

CSS問題下拉菜單

回答

相關問題