CSS Dropdown子菜单问题
大家好，我正在研究菜单项。该菜单在某些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>
不确定是什么问题。伙计们请帮忙
3 个答案:
答案 0 :(得分：0)
实际上，现在我看到您的文档高度小于窗口，当您将鼠标悬停在某个图标上，然后打开下拉菜单，并且文档高度大于窗口高度，然后显示滚动条时。
解决方案： 您可以在标题后添加一些内容，例如此处。
<!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>
答案 1 :(得分：0)
您可以使用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>
答案 2 :(得分：0)
我认为您从菜单中删除了高度为零，悬停不透明度等于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>
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？