다른 요소 뒤의 드롭 다운 메뉴

Question

그래서 내 사이트의 드롭 다운 메뉴를 만들고 모든 모양이 좋지만 마우스를 가져 가면 나타납니다. 그러나 마우스를 위로 이동하면 사라진다. "ul.menu li>"에서 줄 높이를 변경하면 약간 효과가 있지만 문제는 해결되지 않습니다. 나는 "z-index"와 아무것도 시도하지 않았다. Heres는

내 CSS : 여기

ul.menu { 
display: inline;  
padding: 0px; 
margin: 0px; 
z-index:999; 
} 

#black_lay { 
display:none; 
position: absolute; /* makes the div go into a position that’s absolute to the browser viewing area */ 
left: 0%; /* makes the div span all the way across the viewing area */ 
top: 0%; /* makes the div span all the way across the viewing area */ 
background-color: black; 
-moz-opacity: 0.7; /* makes the div transparent, so you have a cool overlay effect */ 
-webkit-opacity: 0.7; 
opacity: .70; 
filter: alpha(opacity=70); 
width: 100%; 
height: 100%; 
z-index: 90; /* makes the div the second most top layer, so it’ll lay on top of everything else EXCEPT for divs with a higher z-index (meaning the #overlay ruleset) */ 
} 

#overlay { 
display: none; /* ensures it’s invisible until it’s called */ 
position: absolute; /* makes the div go into a position that’s absolute to the browser viewing area */ 
left: 25%; /* positions the div half way horizontally */ 
top: 25%; /* positions the div half way vertically */ 
padding: 25px; 
border: 2px solid black; 
background-color: #ffffff; 
width: 50%; 
height: 50%; 
z-index: 100; /* makes the div the top layer, so it’ll lay on top of the other content */ 
} 

ul.menu li { 
position:relative; 
cursor: pointer; 
-webkit-transition: padding .05s linear; 
-moz-transition: padding .05s linear; 
-ms-transition: padding .05s linear; 
-o-transition: padding .05s linear; 
transition: padding .05s linear; 
} 

ul.menu li.drop { 
position: relative; 
} 

ul.menu > li { 
display: inline-block; 
} 

ul.menu li > a { 
line-height: 80px; 
padding: 0 1px; 
-webkit-transition: all .1s ease-out; 
-moz-transition: all .1s ease-out; 
-ms-transition: all .1s ease-out; 
-o-transition: all .1s ease-out; 
transition: all .1s ease-out; 
} 

.dropOut .triangle { 
width: 0; 
height: 0; 
position: absolute; 
border-left: 8px solid transparent; 
border-right: 8px solid transparent; 
border-bottom: 8px solid white; 
top: -8px; 
left: 50%; 
margin-left: -8px; 
} 

.dropdownContain { 
width: 160px; 
position: absolute; 
z-index: 9000000; 
left: 50%; 
margin-left: -80px; /* half of width */ 
top: -400px; 
} 

.dropOut { 
width: 160px; 
background: white; 
float: left; 
position: relative; 
margin-top: 0px; 
opacity: 0; 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15); 
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15); 
box-shadow: 0 1px 6px rgba(0,0,0,.15); 
-webkit-transition: all .1s ease-out; 
-moz-transition: all .1s ease-out; 
-ms-transition: all .1s ease-out; 
-o-transition: all .1s ease-out; 
transition: all .1s ease-out; 
} 

.dropOut ul > li { 
list-style: none; 
} 

.dropOut ul { 
float: left; 
padding: 10px 0; 
} 

.dropOut ul li { 
text-align: left; 
float: left; 
width: 125px; 
padding: 12px 0 10px 15px; 
margin: 0px 10px; 
color: #777; 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
-webkit-transition: background .1s ease-out; 
-moz-transition: background .1s ease-out; 
-ms-transition: background .1s ease-out; 
-o-transition: background .1s ease-out; 
transition: background .1s ease-out; 
} 

.dropOut ul li:hover { 
background: #f6f6f6; 
} 

ul.menu li:hover a { color: white; } 
ul.menu li:hover .dropdownContain { top: 45px; z-index: 500;} 
ul.menu li:hover .underline { border-bottom-color: #777; } 
ul.menu li:hover .dropOut { opacity: 1; margin-top: 15px; } 

내 HTML입니다 :

<nav style="display:inline"> 
     <ul class="menu"> 
      <li class="drop"> 
       <a>Username</a> 
       <div class="dropdownContain"> 
        <div class="dropOut"> 
         <div class="triangle"></div> 
         <ul> 
          <li>Account</li> 
          <li>Logout</li> 
         </ul> 
        </div> 
       </div> 
      </li> 
     </ul> 
    </nav> 

Answer 1

이 문제가 될해야합니다

ul.menu li:hover a { color: white; } 

그것은 것처럼, 흰색에 탭의 텍스트 색상을 변경 거기 있지 않아.

필자는 그것을 피들에서 다른 색으로 바꾸 었으며 잘 작동합니다.