Html CSS下拉子菜单问题
大家好，我正在做一个菜单项。菜单在某些li中有一些子菜单。 当相应的父级li悬停时，我会显示下拉菜单。但我会遇到如下问题：当悬停在位置的子菜单上时，我会显示用户配置文件子菜单，同样，当悬停在通知子菜单上时，会显示用户配置文件下拉菜单Html CSS下拉子菜单问题,html,css,Html,Css,大家好，我正在做一个菜单项。菜单在某些li中有一些子菜单。 当相应的父级li悬停时，我会显示下拉菜单。但我会遇到如下问题：当悬停在位置的子菜单上时，我会显示用户配置文件子菜单，同样，当悬停在通知子菜单上时，会显示用户配置文件下拉菜单 页面标题 标题{ 宽度：100%； 高度：64px； 背景色：#31373d； 颜色：#fff； 框大小：边框框； 垫面：5px； 盒影：0 2px 2px 0 rgba（0,0,0,0.14），0 3px 1px-2px rgba（0,0,0,0.12），0
页面标题
标题{
宽度：100%；
高度：64px；
背景色：#31373d；
颜色：#fff；
框大小：边框框；
垫面：5px；
盒影：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）；
}
收割台，收割台内部{
宽度：95%；
左边距：自动；
右边距：自动；
}
标题。咖啡馆标志{
颜色：#fff；
字号：2.1rem；
}
/******仅桌面选项卡顶栏菜单的样式********/
ul#仅桌面选项卡导航{
浮动：对；
保证金：0；
填充：0；
}
ul#仅桌面选项卡导航>li{
宽度：38px；
高度：64px；
线高：64px；
位置：相对位置；
显示：内联块；
}
ul#仅桌面选项卡导航>li>a{
颜色：#fff；
显示：块；
宽度：100%；
身高：100%；
}
ul#仅桌面选项卡导航>li>a:悬停{
背景色：rgba（0,0,0,0.1）；
}
标题.通知徽章{
位置：绝对位置；
宽度：20px；
高度：20px；
文本对齐：居中；
线高：20px；
字体大小：12px；
边界半径：50%；
颜色：#fff；
顶部：5px；
左：12px；
}
ul#仅桌面选项卡导航>li:悬停>ul{
高度：自动！重要；
不透明度：1！重要；
}
/*****子菜单的样式*********/
#位置列表{
显示：块；
不透明度：0；
身高：0；
宽度：200px；
位置：绝对位置；
左：0；
顶部：61px；
保证金：0；
填充：0；
转化：translateX（-50%）；
过渡：所有300毫秒；
线高：正常；
颜色：rgba（0,0,0,0.87）；
}
#地点列表李a{
颜色：rgba（0,0,0,0.87）；
显示：块；
宽度：100%；
身高：100%；
}
#通知列表{
身高：0；
不透明度：0；
位置：绝对位置；
宽度：280px；
顶部：61px；
左：0；
转化：translateX（-50%）；
颜色：rgba（0,0,0,0.87）；
线高：正常；
保证金：0；
填充：0；
}
#通知列表李a{
颜色：rgba（0,0,0,0.87）；
}
#通知列表。通知图标包装器{
填充：5px 8px；
颜色：#fff；
边界半径：50%；
右边距：20px；
边缘顶部：5px；
}
#剖面下拉导航{
保证金：0；
宽度：200px；
位置：绝对位置；
右：0；
顶部：60px；
过渡：所有300毫秒；
不透明度：0；
身高：0；
}
#纵断面下拉导航a{
颜色：rgba（0,0,0,0.87）；
}
#纵断面下拉导航a{
显示：块；
宽度：100%；
身高：100%；
}
#配置文件下拉菜单导航li:悬停{
背景色：#f1f2f6；
}
-
-
3.
位置
-
-
-
-
-
-
5通知
-
本地餐厅
新佐莫托订单发布
-
本地餐厅
新佐莫托订单发布
-
本地餐厅
新外卖订单发布
-
本地餐厅
新Zo
<!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>