Question

我正在尝试创建一个辅助菜单＆＃34; mega Menu＆＃34;悬停在主菜单下方时显示。

我刚刚在下面创建了一个二级菜单。

我已将其public class LocationHandlerService extends IntentService { Location mLocation; NotificationManager notificationManager; public LocationHandlerService() { super("Services.LocationHandlerService"); } @Override public int onStartCommand(Intent intent, int flags, int startId) { return START_STICKY; } @Override protected void onHandleIntent(Intent intent) { if (LocationResult.hasResult(intent)) { LocationResult locationResult = LocationResult.extractResult(intent); mLocation = locationResult.getLastLocation(); if (mLocation != null) { setupNotification(mLocation); } } } //Setup Notification private void setupNotification(Location location) { notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE); NotificationCompat.Builder notification = new NotificationCompat.Builder(this) .setSmallIcon(R.drawable.location_start_notification) .setOngoing(true) .setPriority(Notification.PRIORITY_HIGH) .setContentTitle(getResources().getString(R.string.location_notification)) .setContentText("Lat: " + location.getLatitude() + ", Long: " + location.getLongitude()); notificationManager.notify(0, notification.build()); } }设置为display，并且我试图将其悬停在菜单链接上时显示（在以下Codeply的情况下，＆＃34; Home＆＃34;链接但它没有用。

非常感谢任何建议。

示例：http://www.codeply.com/go/vLNaAgzFyZ

Answer 1

您必须更改HTML标记试试这个CSS：

#mega-menu {
    display: none;
    position: absolute;
    left: 0;
    z-index: 1;
}
#mega-menu:hover{
    display: block;
}
#trigger a:hover + nav {
    display: block;
}

这个HTML：

<!--Navigation-->
<nav>
    <div class="nav-wrapper teal lighten-2">
        <div class="container">
            <a href="#!" class="brand-logo"><img id="logo-img" class="responsive-img" src="img/main-logo.svg" /></a>
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down">
                <li id="trigger">
                    <a href="index.html">Home</a>

                    <!--Secondary Mega Menu-->
                    <nav id="mega-menu">
                        <div class="nav-wrapper red lighten-2">
                            <div class="container">
                                <ul class="left hide-on-med-and-down">
                                    <li><a href="index.html">Test</a></li>
                                    <li><a href="badges.html">Test</a></li>
                                    <li><a href="collapsible.html">Test</a></li>
                                    <li><a href="mobile.html">Test</a></li>
                                </ul>
                            </div>
                        </div>
                    </nav>
                </li>
                <li><a href="badges.html">About</a></li>
                <li><a href="collapsible.html">Blog</a></li>
                <li><a href="mobile.html">Portfolio</a></li>
            </ul>


            <ul class="side-nav" id="mobile-demo">
                <div id="mobile-logo"><img class="responsive-img" src="img/mobile-logo.svg" /></div>
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="badges.html">About</a></li>
                <li><a href="collapsible.html">Blog</a></li>
                <li><a href="mobile.html">Portfolio</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 2

为了更好的造型我会劫持＆＃34;回答＆＃34;字段。

我需要添加什么才能在点击时打开菜单而不是悬停，以便移动设备用户可以查看菜单... @Hatori Hanzo

$('.dropdown-class').dropdown({
    hover: false // Activate on click
  }
);

使用MaterialiseCSS的二级菜单

2 个答案: