Question

我正在尝试使用W3schools示例方法创建下拉菜单，但是当将光标移离按钮时，我似乎无法使菜单保持打开状态。起初我以为我的代码错了，所以我直接将W3schools代码复制到我的文件中，但仍然得到了相同的结果。

CSS代码：

.personal-dropbtn {
    border: none;
    cursor: pointer;
}

.personal-dropdown {
    position: relative;
    display: inline-block;
}

.personal-dropdown-content {
    background: #DDD;
    display: none;
    position: absolute;
    right: 0;
}

.personal-dropdown-content a {
    display: block;
}

.personal-dropdown-content a:hover {
}

.personal-dropdown:hover .personal-dropdown-content {
    display: block;
}

HTML code：

<% if user_signed_in? %>
    <div class="personal-dropdown">
        <button class="personal-dropbtn"><%= current_user.username %></button>
        <div class="personal-dropdown-content">
            <%= link_to 'Profil', user_path(current_user) %>
            <%= link_to 'Logg ut', destroy_user_session_path %>
            <%= link_to 'Lag quiz', new_quiz_path %>
        </div>
    </div>

正如您所看到的，我正在利用Ruby on Rails来创建网站。我想知道这是否会以某种方式破坏菜单？我将没有Ruby注入的代码插入JSfiddle并且它在那里工作，所以我只能得出结论Rails可能会以某种方式令人不安？

编辑：加载网站时产生的html代码：

<div class="container">
    <div class="row header">
        <div class="col xs-6 col-md-3 logo">
            <img src="/assets/logo.png">
        </div>
        <div class="col-xs-6 col-md-9 header-content">
            <div class="row">
                <div class="col-md-12 personal">
                    <div class="personal-dropdown pull-right">
                        <button class="personal-dropbtn">asdfasdf</button>
                        <div class="personal-dropdown-content">
                            <a href="/users/2">Profil</a>
                            <a href="/users/sign_out">Logg ut</a>
                            <a href="/quiz/new">Lag quiz</a>
                       </div>
                   </div>
               </div>

Answer 1

我认为您应该更改为内容设置display：none的选择器：

if (file_exists('img/'.$resultat['pseudo'])){
    rename("img/".$resultat['pseudo'], "img/".$newpseudo);
}

当您离开个人下拉列表时，预计内容会消失，如果它仍在发生，我只能想象您在移动鼠标时会离开下拉列表。有些元素可能会添加一些空白间距导致问题吗？

您可以粘贴生成的HTML代码吗？

感谢。

使用W3schools示例的CSS下拉菜单

1 个答案: