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问题下拉菜单

回答

相关问题