自定义具有多个条件的纯 CSS 响应式菜单

Question

我正在使用此处的代码制作这个响应式菜单：

http://www.sanwebcorner.com/2017/03/multi-level-responsive-dropdown-menu.html

我正在尝试修改代码，使其满足以下所有条件：

1. 它不会在任何顶部按钮上显示背景颜色。
2. 子菜单中总是有黑色文本。
3. 所有子菜单在响应式设计中的行为完全相同。

但是，我遇到了几个问题。其中之一：主菜单中的两个项目在响应式子菜单中出现两次，我不知道为什么。

我尝试了多种解决方案，包括：

1. 使用额外的 CSS 类选择器。
2. 我能想到的现有 CSS 中的每一种颜色变化。
3. 我能想到的各种其他 CSS 类选择器。

我非常期待看到这个项目完全完成并脱离我的掌控。如果您可以查看并确定我在此代码上哪里出错了，我将永远感激不尽。非常感谢。

body {
	background-color: #908888;
}
.toggle, [id^=drop] {
	display: none;
}
menu {
	margin: 0;
	padding: 0;
	background-color: #5E4C4C;
}
menu:after {
	content: "";
	display: table;
	clear: both;
}
menu ul {
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}
menu ul li {
	margin: 0px;
	display: inline-block;
	float: left;
}
menu a {
	display: block;
	padding: 14px 20px;
	color: #fff;
	font-size: 17px;
	text-decoration: none;
}
menu a.new {
	display: block;
	padding: 14px 20px;
	color: #000;
	font-size: 17px;
	text-decoration: none;
	background-color: #ffffff;
}
menu a.new2 {
	display: block;
	padding: 14px 20px;
	color: #ffffff;
	font-size: 17px;
	text-decoration: none;
	background-color: #5E4C4C;
}
menu ul li ul li:hover {
	background-color: #f6f4fd;
	color: #000000;
}
menu a:hover {
	background-color: none;
	color: #fff;
}
menu a.new:hover {
	background-color: #f6f4fd;
	color: #000000;
}
menu a.new2:hover {
	background-color: #5E4C4C;
	color: #ffffff;
}
menu ul ul {
	display: none;
	position: absolute;
	top: 48px;
}
menu ul li:hover > ul {
	color: #000000;
	display: inherit;
}
menu ul ul li {
	width: 170px;
	float: none;
	display: list-item;
	position: relative;
	border-bottom: 0px;
	background-color: #ffffff;
	color: #000000;
}
menu ul ul ul li {
	position: relative;
	top: -60px;
	left: 170px;
	background-color: #ffffff;
	color: #000000;
}
li > a:after {
	content: ' ▼';
	font-size: 11px;
}
li > a:only-child:after {
	content: '';
}

@media all and (max-width : 768px) {
	menu {
		margin: 0;
	}
	.toggle + a,  .menu {
		display: none;
	}
	.toggle {
		display: block;
		background-color: #5E4C4C;
		padding: 14px 20px;
		color: #FFF;
		font-size: 17px;
		text-decoration: none;
		border: none;
	}
	.toggle:hover {
		background-color: #DC4E5B;
	}
	[id^=drop]:checked + ul {
		display: block;
	}
	menu ul li {
		display: block;
		width: 100%;
	}
	menu ul ul .toggle,  menu ul ul a {
		padding: 0 40px;
	}
	menu ul ul ul a {
		padding: 0 80px;
	}
	menu a:hover,  menu ul ul ul a {
		background-color: #f6f4fd;
	}
	menu a.new:hover {
		background-color: #f6f4fd;
		color: #000000;
	}
	menu a.new2:hover {
		background-color: #5E4C4C;
		color: #ffffff;
	}
	menu ul li ul li .toggle,  menu ul ul a,  menu ul ul ul a {
		padding: 14px 20px;
		color: #FFF;
		font-size: 17px;
	}
	menu ul li ul li .toggle,  menu ul ul a {
		background-color: #BF3441;
	}
	menu ul ul {
		float: none;
		position: static;
		color: #ffffff;
	}
	menu ul ul li:hover > ul,  menu ul li:hover > ul {
		display: none;
	}
	menu ul ul li {
		display: block;
		width: 100%;
	}
	menu ul ul ul li {
		position: static;
	}
}

@media all and (max-width : 330px) {
	menu ul li {
		display: block;
		width: 94%;
	}
}

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Multilevel Responsive Menu using css</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<menu>
    <label for="drop" class="toggle" style="background-color: #BC7A1E;">Menu</label>
    <input type="checkbox" id="drop" />
    <ul class="menu">
        <li><a class="new2" href="#">My Bid</a></li>
        <li>
            <label for="drop-1" class="toggle">Dashboard &#9660;</label>
            <a class="new2" href="#">Dashboard</a>
            <input type="checkbox" id="drop-1"/>
            <ul>
                <li><a class="new" href="#">Dashboard1</a></li>
                <li><a class="new" href="#">Dashboard2</a></li>
                <li><a class="new" href="#">Dashboard3</a></li>
            </ul>
        </li>
        <li>
            <label for="drop-2" class="toggle">Identity &#9660;</label>
            <a class="new2" href="#">Identity</a>
            <input type="checkbox" id="drop-2"/>
            <ul>
                <li><a class="new" href="#">Identity1</a></li>
                <li><a class="new" href="#">Identity2</a></li>
                <li>
                    <label for="drop-3" class="toggle">Identity3 &#9660;</label>
                    <a class="new" href="#">Identity3</a>
                    <input type="checkbox" id="drop-3"/>
                    <ul>
                        <li><a class="new" href="#">Identity3.1</a></li>
                        <li><a class="new" href="#">Identity3.2</a></li>
                        <li><a class="new" href="#">Identity3.3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Change Password</a></li>
        <li><a href="#">Invalid Bid Report</a></li>
        <li><a href="#">Rft Upload</a></li>
        <li><a href="#">Logout</a></li>
    </ul>
</menu>
</body>
</html>

Answer 1

两次菜单问题是因为你有媒体查询它改变了这个<label for="drop-1" class="toggle">Dashboard ▼</label>标签的显示属性。

Answer 2

只需删除menu a.new2 { display : block; }。我想它在第 58 行。仅删除 display: block 声明，而不是整个规则。

这应该可以解决重复链接问题。