2012-03-17 2 views
0

페이지가 맨 위로 스크롤 될 때 멋지게 보이는 드롭 다운 메뉴가 있는데, 아래로 스크롤하면 두 번째 <li> 부모의 드롭 다운이 페이지 대신 고정됩니다 부모 요소와드롭 다운 메뉴가 LI 부모를 고수하지 않음

• 해결 : 두 번째 드롭 메뉴가 상위 헤더 div 안에 없습니다.

상위 링크 CREATE는 정상적으로 작동하지만 링크 MANAGE는 문제가있는 <li> 상위입니다.

ul { 
padding: 0; 
margin: 0; 
} 
ul li { 
padding: 0; 
margin: 0; 
} 
.chromestyle{ 
width: 99%; 
font-weight: bold; 
cursor:pointer; 
} 
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/ 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
} 
.chromestyle ul{ 
width: 100%; 
margin: 0; 
text-align: right; 
} 
.chromestyle ul li{ 
display: inline; 
} 
.chromestyle ul li a{ 
color: #494949; 
padding-left:15px; 
padding-right:15px; 
padding-top:20px; 
padding-bottom:20px; 
margin: 0; 
text-decoration: none; 
font-family:Arial, Helvetica, sans-serif; 
font-size:14px; 
color:#FFFFFF; 
} 
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ 
background-color:#0abbe1; 
} 
/* ######### Style for Drop Down Menu ######### */ 
.dropmenudiv{ 
cursor:pointer; 
position:absolute; 
top: 0; 
border: 1px solid #BBB; /*THEME CHANGE HERE*/ 
border-bottom-width: 0; 
font:normal 12px Verdana; 
line-height:24px; 
z-index:100; 
background-color: white; 
width: 200px; 
visibility: hidden; 
} 
.dropmenudiv a{ 
width: auto; 
display: block; 
text-indent: 3px; 
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/ 
padding: 2px 0; 
text-decoration: none; 
font-weight: bold; 
color: black; 
padding-left:15px; 
} 
* html .dropmenudiv a{ /*IE only hack*/ 
width: 100%; 
} 
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/ 
background-color: #0abbe1; color:#FFFFFF 
} 

답변

2

html 소스를 자세히 살펴보면 dropmenu2이 잘못된 위치에 있다는 것을 알 수 있습니다.

이것은

<div> 
    ... 
    <div id="dropmenu1">...</div> 
</div> 
<div id="dropmenu2">...</div> 

Dropmenu이 같은 장소에해야 도움이 될 수 있습니다 dropmenu1

<div> 
    ... 
    <div id="dropmenu1">...</div> 
    <div id="dropmenu2">...</div> 
</div> 
관련 문제