Question

大家好，我正在研究菜单项。该菜单在某些li内具有一些子菜单。我在悬停相应的父级li时显示下拉菜单。但是我遇到的问题是，例如，将鼠标悬停在位置的子菜单上，获取用户配置文件子菜单，也类似于将鼠标悬停在通知子菜单上，显示用户配置文件下拉菜单。 / p>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Compiled and minified Materialize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        header {
            width: 100%;
            height: 64px;
            background-color: #31373d;
            color: #fff;
            box-sizing: border-box;
            padding-top: 5px;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
        }
        
        header .header-inner {
            width: 95%;
            margin-left: auto;
            margin-right: auto;
        }
        
        header .cafe-logo {
            color: #fff;
            font-size: 2.1rem;
        }
        /****** Styles for the Desktop Tab only topbar menu ********/
        
        ul#desktop-tab-only-nav {
            float: right;
            margin: 0;
            padding: 0;
        }
        
        ul#desktop-tab-only-nav>li {
            width: 38px;
            height: 64px;
            line-height: 64px;
            position: relative;
            display: inline-block;
        }
        
        ul#desktop-tab-only-nav>li>a {
            color: #fff;
            display: block;
            width: 100%;
            height: 100%;
        }
        
        ul#desktop-tab-only-nav>li>a:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }
        
        header .notification-badge {
            position: absolute;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            border-radius: 50%;
            color: #fff;
            top: 5px;
            left: 12px;
        }
        
        ul#desktop-tab-only-nav>li:hover>ul {
            height: auto !important;
            opacity: 1 !important;
        }
        /***** Styles for the Sub Menu *********/
        
        #locations-list {
            display: block;
            opacity: 0;
            height: 0;
            width: 200px;
            position: absolute;
            left: 0;
            top: 61px;
            margin: 0;
            padding: 0;
            transform: translateX(-50%);
            transition: all 300ms;
            line-height: normal;
            color: rgba(0, 0, 0, 0.87);
        }
        
        #locations-list li a {
            color: rgba(0, 0, 0, 0.87);
            display: block;
            width: 100%;
            height: 100%;
        }
        
        #notifications-list {
            height: 0;
            opacity: 0;
            position: absolute;
            width: 280px;
            top: 61px;
            left: 0;
            transform: translateX(-50%);
            color: rgba(0, 0, 0, 0.87);
            line-height: normal;
            margin: 0;
            padding: 0;
        }
        
        #notifications-list li a {
            color: rgba(0, 0, 0, 0.87);
        }
        
        #notifications-list .notification-icon-wrapper {
            padding: 5px 8px;
            color: #fff;
            border-radius: 50%;
            margin-right: 20px;
            margin-top: 5px;
        }
        
        #profile-dropdown-nav {
            margin: 0;
            width: 200px;
            position: absolute;
            right: 0;
            top: 60px;
            transition: all 300ms;
            opacity: 0;
            height: 0;
        }
        
        #profile-dropdown-nav li a {
            color: rgba(0, 0, 0, 0.87);
        }
        
        #profile-dropdown-nav li a {
            display: block;
            width: 100%;
            height: 100%;
        }
        
        #profile-dropdown-nav li:hover {
            background-color: #f1f2f6;
        }
    </style>
</head>

<body>
    <header id="header" class="header navbar-fixed clearfix">
        <div class="header-inner">
            <a href="index.php" title="Norbotion" class="cafe-logo">
                Norbotion
            </a>
            <ul id="desktop-tab-only-nav">
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">location_on</i>
                        <span class="notification-badge red">3</span>
                    </a>
                    <ul id="locations-list" class="collection with-header locations-list active">
                        <li class="collection-header">
                            <span class="new badge" data-badge-caption="">3</span>
                            <span style="font-weight: bold;padding-left: 10px"> Locations </span>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)"> Shollinganallur </a>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)"> Taramani </a>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)"> Karapakkam </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">mail</i>
                        <span class="notification-badge orange"> 4 </span>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">notifications</i>
                        <span class="notification-badge pink">5</span>
                    </a>
                    <ul id="notifications-list" class="collection with-header notifications-list active">
                        <li class="collection-header">
                            <p>
                                <span class="new badge">5</span> NOTIFICATIONS </p>
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper cyan">
                                <i class="tiny material-icons">local_dining</i>
                            </span> New Zomoto Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper red">
                                <i class="tiny material-icons">local_dining</i>
                            </span>New Zomoto Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper teal">
                                <i class="tiny material-icons">local_dining</i>
                            </span>New Takeaway Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper deep-orange">
                                <i class="tiny material-icons">local_dining</i>
                            </span>New Zomoto Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper amber">
                                <i class="tiny material-icons">local_dining</i>
                            </span> New Uber Eat Order palced
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">settings</i>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">person</i>
                    </a>
                    <ul id="profile-dropdown-nav" class="collection profile-dropdown-nav">
                        <li class="collection-item">
                            <a href="javascript:void(0)" class="clearfix">
                                <i class="material-icons left">tag_faces</i>
                                <span> User profile </span>
                            </a>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)" class="clearfix">
                                <i class="material-icons left">lock_outline</i>
                                <span> Logout </span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>
</body>

</html>

不确定是什么问题。伙计们请帮忙

Answer 1

实际上，现在我看到您的文档高度小于窗口，当您将鼠标悬停在某个图标上，然后打开下拉菜单，并且文档高度大于窗口高度，然后显示滚动条时。

解决方案： 您可以在标题后添加一些内容，例如此处。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Compiled and minified Materialize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        header {
            width: 100%;
            height: 64px;
            background-color: #31373d;
            color: #fff;
            box-sizing: border-box;
            padding-top: 5px;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
        }
        
        header .header-inner {
            width: 95%;
            margin-left: auto;
            margin-right: auto;
        }
        
        header .cafe-logo {
            color: #fff;
            font-size: 2.1rem;
        }
        /****** Styles for the Desktop Tab only topbar menu ********/
        
        ul#desktop-tab-only-nav {
            float: right;
            margin: 0;
            padding: 0;
        }
        
        ul#desktop-tab-only-nav>li {
            width: 38px;
            height: 64px;
            line-height: 64px;
            position: relative;
            display: inline-block;
        }
        
        ul#desktop-tab-only-nav>li>a {
            color: #fff;
            display: block;
            width: 100%;
            height: 100%;
        }
        
        ul#desktop-tab-only-nav>li>a:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }
        
        header .notification-badge {
            position: absolute;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            border-radius: 50%;
            color: #fff;
            top: 5px;
            left: 12px;
        }
        
        ul#desktop-tab-only-nav>li:hover>ul {
            height: auto !important;
            opacity: 1 !important;
        }
        /***** Styles for the Sub Menu *********/
        
        #locations-list {
            display: block;
            opacity: 0;
            height: 0;
            width: 200px;
            position: absolute;
            left: 0;
            top: 61px;
            margin: 0;
            padding: 0;
            transform: translateX(-50%);
            transition: all 300ms;
            line-height: normal;
            color: rgba(0, 0, 0, 0.87);
        }
        
        #locations-list li a {
            color: rgba(0, 0, 0, 0.87);
            display: block;
            width: 100%;
            height: 100%;
        }
        
        #notifications-list {
            height: 0;
            opacity: 0;
            position: absolute;
            width: 280px;
            top: 61px;
            left: 0;
            transform: translateX(-50%);
            color: rgba(0, 0, 0, 0.87);
            line-height: normal;
            margin: 0;
            padding: 0;
        }
        
        #notifications-list li a {
            color: rgba(0, 0, 0, 0.87);
        }
        
        #notifications-list .notification-icon-wrapper {
            padding: 5px 8px;
            color: #fff;
            border-radius: 50%;
            margin-right: 20px;
            margin-top: 5px;
        }
        
        #profile-dropdown-nav {
            margin: 0;
            width: 200px;
            position: absolute;
            right: 0;
            top: 60px;
            transition: all 300ms;
            opacity: 0;
            height: 0;
        }
        
        #profile-dropdown-nav li a {
            color: rgba(0, 0, 0, 0.87);
        }
        
        #profile-dropdown-nav li a {
            display: block;
            width: 100%;
            height: 100%;
        }
        
        #profile-dropdown-nav li:hover {
            background-color: #f1f2f6;
        }
    </style>
</head>

<body>
    <header id="header" class="header navbar-fixed clearfix">
        <div class="header-inner">
            <a href="index.php" title="Norbotion" class="cafe-logo">
                Norbotion
            </a>
            <ul id="desktop-tab-only-nav">
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">location_on</i>
                        <span class="notification-badge red">3</span>
                    </a>
                    <ul id="locations-list" class="collection with-header locations-list active">
                        <li class="collection-header">
                            <span class="new badge" data-badge-caption="">3</span>
                            <span style="font-weight: bold;padding-left: 10px"> Locations </span>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)"> Shollinganallur </a>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)"> Taramani </a>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)"> Karapakkam </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">mail</i>
                        <span class="notification-badge orange"> 4 </span>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">notifications</i>
                        <span class="notification-badge pink">5</span>
                    </a>
                    <ul id="notifications-list" class="collection with-header notifications-list active">
                        <li class="collection-header">
                            <p>
                                <span class="new badge">5</span> NOTIFICATIONS </p>
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper cyan">
                                <i class="tiny material-icons">local_dining</i>
                            </span> New Zomoto Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper red">
                                <i class="tiny material-icons">local_dining</i>
                            </span>New Zomoto Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper teal">
                                <i class="tiny material-icons">local_dining</i>
                            </span>New Takeaway Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper deep-orange">
                                <i class="tiny material-icons">local_dining</i>
                            </span>New Zomoto Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper amber">
                                <i class="tiny material-icons">local_dining</i>
                            </span> New Uber Eat Order palced
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">settings</i>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">person</i>
                    </a>
                    <ul id="profile-dropdown-nav" class="collection profile-dropdown-nav">
                        <li class="collection-item">
                            <a href="javascript:void(0)" class="clearfix">
                                <i class="material-icons left">tag_faces</i>
                                <span> User profile </span>
                            </a>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)" class="clearfix">
                                <i class="material-icons left">lock_outline</i>
                                <span> Logout </span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>
    <section>
        <h1>title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section





</body>

</html>

Answer 2

您可以使用z-index完成此操作，现在将鼠标悬停在其他内容上时，不会弹出用户个人资料子菜单。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Compiled and minified Materialize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        header {
            width: 100%;
            height: 64px;
            background-color: #31373d;
            color: #fff;
            box-sizing: border-box;
            padding-top: 5px;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
        }
        
        header .header-inner {
            width: 95%;
            margin-left: auto;
            margin-right: auto;
        }
        
        header .cafe-logo {
            color: #fff;
            font-size: 2.1rem;
        }
        /****** Styles for the Desktop Tab only topbar menu ********/
        
        ul#desktop-tab-only-nav {
            float: right;
            margin: 0;
            padding: 0;
        }
        
        ul#desktop-tab-only-nav>li {
            width: 38px;
            height: 64px;
            line-height: 64px;
            position: relative;
            display: inline-block;
        }
        
        ul#desktop-tab-only-nav>li>a {
            color: #fff;
            display: block;
            width: 100%;
            height: 100%;
        }
        
        ul#desktop-tab-only-nav>li>a:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }
        
        header .notification-badge {
            position: absolute;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            border-radius: 50%;
            color: #fff;
            top: 5px;
            left: 12px;
        }
        #desktop-tab-only-nav li ul {
          z-index:0;
        }
      
        #desktop-tab-only-nav li:hover ul {
            height: auto !important;
            opacity: 1 !important;
            z-index:1;
        }
        /***** Styles for the Sub Menu *********/
        
        #locations-list {
            display: block;
            opacity: 0;
            height: 0;
            width: 200px;
            position: absolute;
            left: 0;
            top: 61px;
            margin: 0;
            padding: 0;
            transform: translateX(-50%);
            transition: all 300ms;
            line-height: normal;
            color: rgba(0, 0, 0, 0.87);
        }
        
        #locations-list li a {
            color: rgba(0, 0, 0, 0.87);
            display: block;
            width: 100%;
            height: 100%;
        }
        
        #notifications-list {
            height: 0;
            opacity: 0;
            position: absolute;
            width: 280px;
            top: 61px;
            left: 0;
            transform: translateX(-50%);
            color: rgba(0, 0, 0, 0.87);
            line-height: normal;
            margin: 0;
            padding: 0;
        }
        
        #notifications-list li a {
            color: rgba(0, 0, 0, 0.87);
        }
        
        #notifications-list .notification-icon-wrapper {
            padding: 5px 8px;
            color: #fff;
            border-radius: 50%;
            margin-right: 20px;
            margin-top: 5px;
        }
        
        #profile-dropdown-nav {
            margin: 0;
            width: 200px;
            position: absolute;
            right: 0;
            top: 60px;
            transition: all 300ms;
            opacity: 0;
            height: 0;
        }
        
        #profile-dropdown-nav li a {
            color: rgba(0, 0, 0, 0.87);
        }
        
        #profile-dropdown-nav li a {
            display: block;
            width: 100%;
            height: 100%;
        }
        
        #profile-dropdown-nav li:hover {
            background-color: #f1f2f6;
        }
    </style>
</head>

<body>
    <header id="header" class="header navbar-fixed clearfix">
        <div class="header-inner">
            <a href="index.php" title="Norbotion" class="cafe-logo">
                Norbotion
            </a>
            <ul id="desktop-tab-only-nav">
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">location_on</i>
                        <span class="notification-badge red">3</span>
                    </a>
                    <ul id="locations-list" class="collection with-header locations-list active">
                        <li class="collection-header">
                            <span class="new badge" data-badge-caption="">3</span>
                            <span style="font-weight: bold;padding-left: 10px"> Locations </span>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)"> Shollinganallur </a>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)"> Taramani </a>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)"> Karapakkam </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">mail</i>
                        <span class="notification-badge orange"> 4 </span>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">notifications</i>
                        <span class="notification-badge pink">5</span>
                    </a>
                    <ul id="notifications-list" class="collection with-header notifications-list active">
                        <li class="collection-header">
                            <p>
                                <span class="new badge">5</span> NOTIFICATIONS </p>
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper cyan">
                                <i class="tiny material-icons">local_dining</i>
                            </span> New Zomoto Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper red">
                                <i class="tiny material-icons">local_dining</i>
                            </span>New Zomoto Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper teal">
                                <i class="tiny material-icons">local_dining</i>
                            </span>New Takeaway Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper deep-orange">
                                <i class="tiny material-icons">local_dining</i>
                            </span>New Zomoto Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper amber">
                                <i class="tiny material-icons">local_dining</i>
                            </span> New Uber Eat Order palced
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">settings</i>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">person</i>
                    </a>
                    <ul id="profile-dropdown-nav" class="collection profile-dropdown-nav">
                        <li class="collection-item">
                            <a href="javascript:void(0)" class="clearfix">
                                <i class="material-icons left">tag_faces</i>
                                <span> User profile </span>
                            </a>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)" class="clearfix">
                                <i class="material-icons left">lock_outline</i>
                                <span> Logout </span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>
</body>

</html>

Answer 3

我认为您从菜单中删除了高度为零，悬停不透明度等于1

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Compiled and minified Materialize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        header {
            width: 100%;
            height: 64px;
            background-color: #31373d;
            color: #fff;
            box-sizing: border-box;
            padding-top: 5px;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
        }

        header .header-inner {
            width: 95%;
            margin-left: auto;
            margin-right: auto;
        }

        header .cafe-logo {
            color: #fff;
            font-size: 2.1rem;
        }
        /****** Styles for the Desktop Tab only topbar menu ********/

        ul#desktop-tab-only-nav {
            float: right;
            margin: 0;
            padding: 0;
        }

        ul#desktop-tab-only-nav>li {
            width: 38px;
            height: 64px;
            line-height: 64px;
            position: relative;
            display: inline-block;
        }

        ul#desktop-tab-only-nav>li>a {
            color: #fff;
            display: block;
            width: 100%;
            height: 100%;
        }

        ul#desktop-tab-only-nav>li>a:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

        header .notification-badge {
            position: absolute;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            border-radius: 50%;
            color: #fff;
            top: 5px;
            left: 12px;
        }

        ul#desktop-tab-only-nav>li:hover>ul {
            opacity: 1 !important;
        }
        /***** Styles for the Sub Menu *********/

        #locations-list {
            display: block;
            opacity: 0;
            width: 200px;
            position: absolute;
            left: 0;
            top: 61px;
            margin: 0;
            padding: 0;
            transform: translateX(-50%);
            transition: all 300ms;
            line-height: normal;
            color: rgba(0, 0, 0, 0.87);
        }

        #locations-list li a {
            color: rgba(0, 0, 0, 0.87);
            display: block;
            width: 100%;
            height: 100%;
        }

        #notifications-list {
            opacity: 0;
            position: absolute;
            width: 280px;
            top: 61px;
            left: 0;
            transform: translateX(-50%);
            color: rgba(0, 0, 0, 0.87);
            line-height: normal;
            margin: 0;
            padding: 0;
        }

        #notifications-list li a {
            color: rgba(0, 0, 0, 0.87);
        }

        #notifications-list .notification-icon-wrapper {
            padding: 5px 8px;
            color: #fff;
            border-radius: 50%;
            margin-right: 20px;
            margin-top: 5px;
        }

        #profile-dropdown-nav {
            margin: 0;
            width: 200px;
            position: absolute;
            right: 0;
            top: 60px;
            transition: all 300ms;
            opacity: 0;
        }

        #profile-dropdown-nav li a {
            color: rgba(0, 0, 0, 0.87);
        }

        #profile-dropdown-nav li a {
            display: block;
            width: 100%;
            height: 100%;
        }

        #profile-dropdown-nav li:hover {
            background-color: #f1f2f6;
        }
    </style>
</head>

<body>
    <header id="header" class="header navbar-fixed clearfix">
        <div class="header-inner">
            <a href="index.php" title="Norbotion" class="cafe-logo">
                Norbotion
            </a>
            <ul id="desktop-tab-only-nav">
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">location_on</i>
                        <span class="notification-badge red">3</span>
                    </a>
                    <ul id="locations-list" class="collection with-header locations-list active">
                        <li class="collection-header">
                            <span class="new badge" data-badge-caption="">3</span>
                            <span style="font-weight: bold;padding-left: 10px"> Locations </span>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)"> Shollinganallur </a>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)"> Taramani </a>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)"> Karapakkam </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">mail</i>
                        <span class="notification-badge orange"> 4 </span>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">notifications</i>
                        <span class="notification-badge pink">5</span>
                    </a>
                    <ul id="notifications-list" class="collection with-header notifications-list active">
                        <li class="collection-header">
                            <p>
                                <span class="new badge">5</span> NOTIFICATIONS </p>
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper cyan">
                                <i class="tiny material-icons">local_dining</i>
                            </span> New Zomoto Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper red">
                                <i class="tiny material-icons">local_dining</i>
                            </span>New Zomoto Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper teal">
                                <i class="tiny material-icons">local_dining</i>
                            </span>New Takeaway Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper deep-orange">
                                <i class="tiny material-icons">local_dining</i>
                            </span>New Zomoto Order palced
                        </li>
                        <li class="collection-item">
                            <span class="left notification-icon-wrapper amber">
                                <i class="tiny material-icons">local_dining</i>
                            </span> New Uber Eat Order palced
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">settings</i>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="material-icons">person</i>
                    </a>
                    <ul id="profile-dropdown-nav" class="collection profile-dropdown-nav">
                        <li class="collection-item">
                            <a href="javascript:void(0)" class="clearfix">
                                <i class="material-icons left">tag_faces</i>
                                <span> User profile </span>
                            </a>
                        </li>
                        <li class="collection-item">
                            <a href="javascript:void(0)" class="clearfix">
                                <i class="material-icons left">lock_outline</i>
                                <span> Logout </span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>
</body>

</html>

CSS Dropdown子菜单问题

3 个答案: