Question

所以我正在为我的网站制作一个下拉菜单，所有的外观都很好，但是当我将鼠标悬停在它上面时，它会出现但是当我将鼠标移到顶部时它会消失。当我改变“ul.menu li＆gt; a”下的行高时，它有点工作，但不能解决我的问题。我尝试了“z-index”而没有。

继承人我的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; }

它将标签的文字颜色更改为白色，就好像它不在那里一样。

我把它变成了一个不同颜色的小提琴，它工作得很好。

其他元素后面的下拉菜单或不工作

1 个答案: