CSS下拉菜单 - 移动支持

Question

我使用CSS构建了这个相对简单的下拉菜单。我担心所有设备是否都将触摸事件视为相同 - 即所有触摸设备是否都有触摸后移动的光标？我没有时间或资源来测试这个，所以我最好的选择是在这里问。

Here就是一个例子，我想问一下这种激活下拉列表的方法是否适用于大多数移动设备？

HTML

<ul>
    <li class="userpanel dropdown last-vertical">   <span>User Name</span>

        <ul class="userpanel dropdown-body">
            <li><a class="dropdown-item" href="/users/view">
                            <i class="fa fa-lg fa-user"></i> Profile
                        </a>

            </li>
            <li><a class="dropdown-item" href="/users/settings">
                            <i class="fa fa-lg fa-cog"></i> Settings
                        </a>

            </li>
            <li>
                <form action="/users/logout" method="POST">
                    <button type="submit" class="dropdown-item">    <i class="fa fa-lg fa-sign-out"></i> Log out</button>
                </form>
            </li>
        </ul>
    </li>
</ul>

CSS

ul {
    margin: 0;
    padding: 0;
}
.userpanel.dropdown {
    display: inline-block;
    position: relative;
    padding: 1.5rem;
    z-index: 10;
    border: solid transparent;
    border-width: 1px 1px 0 1px;
    cursor: default;
}
.userpanel.dropdown span {
    display: inline-block;
    vertical-align: middle;
}
.userpanel.dropdown .dropdown-item {
    display: block;
    text-align: left;
    color: black;
    border: none;
    background: none;
    padding: 1rem;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}
.userpanel.dropdown .dropdown-item:hover {
    background-color: lightgray;
}
.userpanel.dropdown-body li {
    margin:0;
}
.userpanel.dropdown:hover {
    background-color: #f1f1f1;
    border-color: lightgray;
    color: black;
}
.userpanel.dropdown:hover .dropdown-body {
    display: block;
}
.userpanel.dropdown-body {
    position: absolute;
    top: 4rem;
    left: 0;
    display: none;
    width: 100%;
    z-index: 10;
    border: solid lightgray;
    border-width: 0 1px 1px 1px;
    background: #f1f1f1;
}

Answer 1

根据W3文档（http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes），它可能是错误的。您的方法强烈依赖:hover伪类来激活下拉列表。 :hover伪类（或事件）依赖于具有外围设备（如鼠标或触控板），其能够区分指向某物（也称为悬停）和点击某物的事件。

在移动开发中，您会看到主要的UI框架在显示下拉列表时用:hover事件替换click事件（请参阅Bootstrap导航栏）。在触摸屏设备上，无论手机用户的体验如何，点击相对容易而不是悬停在某物上。