CSS3 Display other element on hover

问题

I'm here trying to display a list item on hovering an anchor tag. How to affect other elements when a div is hovered - tried using this post but I couldn't succeed.

I'm here trying this with only pure CSS.

Here's the FIDDLE.

And below is the code.

HTML :

<div class="container">
    <div class="menu">
        <a class="user" href="#">Brett</a>
        <ul>
            <li>
                <a href="#">Settings</a>
            </li>
            <li>
                <a href="#">Logout</a>
            </li>
        </ul>
    </div>
</div>

CSS :

body {
    font-size: 50px;
}
.container {
    margin-top: 100px;
    margin-left: 200px;
}
a {
    text-decoration: none;
    /*color: #fff;*/
}
.user {
    position: relative;
    z-index: 1000;
    margin-left: -200px;
}
ul {
    list-style: none;
    position: absolute;
    top: 2%;
    left: 11%;
    visibility: hidden;
    opacity: 0;
}
.menu a:hover .menu ul {
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility 1s, opacity 1s;
    /*color: #000;*/
    /*-webkit-transition: color 1s;*/
}

回答1:

Try using the adjacent siblings selector

.menu a:hover + ul instead of .menu a:hover .menu ul

jsFiddle Demo

回答2:

You have to use the adjacent siblings selector:

.menu > a:hover + ul

Also, there's something wrong with your property -webkit-transition: visibility 1s, opacity 1s; as it is preventing the menu from appearing.

http://jsfiddle.net/KA5Tg/4/

回答3:

Here is update fiddle, Position is not correct for menu but its working on hover.

I have updated css as:

ul {
    list-style: none;
    position: absolute;
    top: 2%;
    left: 11%;  
    display :none;
}
.menu a:hover + ul {
    display :block !important;
    opacity: 1;
    -webkit-transition: visibility 1s, opacity 1s;

}

来源：https://stackoverflow.com/questions/20114874/css3-display-other-element-on-hover