Question

我无法将导航变成下拉菜单。我已经尝试了许多方法，但无法将导航变成下拉菜单。我不明白我在做什么错。我尝试的解决方案看起来像我尝试遵循的指南。没运气。这是我的代码。

HTML

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:openDrawer="start">

    <include
            layout="@layout/app_bar_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    <android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true">

        <RelativeLayout android:layout_width="match_parent"
                        android:layout_height="match_parent">

            <include layout="@layout/nav_header_main"
                     android:id="nav_drawer_header_include"/>

            <ListView android:layout_width="match_parent"
                      android:layout_height="50dp"
            android:layout_below="@id/nav_drawer_header_include">



            </ListView>

        </RelativeLayout>

    </android.support.design.widget.NavigationView>


</android.support.v4.widget.DrawerLayout>

CSS

<nav>
    <button class="dropdown-menu">Menu</button>
    <ul>
        <li><a href="Fighting%20Kites.html">Fighting Kites</a></li>
        <li><a href="About.html">About</a></li>
        <li><a href="Membership.html">Membership</a></li>
        <li><a href="index.html">Index</a></li>
    </ul>
</nav>

Answer 1

也许您可以尝试这个

nav ul{
  display: none;
  list-style: none;
}

nav:hover  ul{
  display: block;
}

<nav>
    <button class="dropdown-menu">Menu</button>
    <ul>
        <li><a href="Fighting%20Kites.html">Fighting Kites</a></li>
        <li><a href="About.html">About</a></li>
        <li><a href="Membership.html">Membership</a></li>
        <li><a href="index.html">Index</a></li>
    </ul>
</nav>

当您将鼠标悬停在按钮上时，将显示列表。

Answer 2

nav ul{
display: none;
}
nav .dropdown-menu:hover ul{
display: block;
}

<nav>
    <button class="dropdown-menu">Menu <ul>
        <li><a href="Fighting%20Kites.html">Fighting Kites</a></li>
        <li><a href="About.html">About</a></li>
        <li><a href="Membership.html">Membership</a></li>
        <li><a href="index.html">Index</a></li>
    </ul>
  </button>
</nav>

//仅此而已...

如何将带有列表的<nav>转换为下拉菜单

2 个答案: