所以我正在开发一个项目，我在网上发现了一些代码。这段代码真的帮助我的项目响应menubalk与html和css。
现在我的所有样式都是正确的，我正在尝试在我的网站中实现它，而不是像通用块那样定位或使用类和id。这给了我一些问题，因为由于某些原因它不起作用，我不确定问题是什么。
* {
padding: 0px;
margin: 0px;
font-family: 'Gautami', Arial;
}
#menu {
width: 100%;
}
#MenuActive {
background-color: #e5e6e8;
}
/*Strip the ul of padding and list styling*/
ul {
width: 100%;
list-style-type: none;
margin: 0;
padding: 5px 0px 5px 0px;
width: auto;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display: inline-block;
float: left;
}
/*Style for menu links*/
li a {
display: block;
min-width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: #2072ba;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #e5e6e8;
text-decoration: underline;
}
/*Style for dropdown links*/
li:hover ul a {
background: #2072ba;
color: white;
height: 40px;
line-height: 40px;
border-radius: 0px;
text-decoration: none;
}
li:hover ul a:first-child {
border-top: 1px solid #2072ba;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #e5e6e8;
color: #2072ba;
text-decoration: underline;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
#right {
float: right;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
text-decoration: none;
color: #2072ba;
text-align: center;
padding: 14.5px 0px 14.5px 0px;
display: none;
width: 100%;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
#content {
border: solid 5px grey;
border-radius: 5px;
bottom: 0px;
}
.text {
margin: 0px 20px 0px 20px;
border: solid 5px #2072ba;
border-radius: 5px;
}
.titel {
text-align: center;
color: #2072ba;
}
.line {
margin: 20px;
height: 1px;
background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(25%, #2072ba));
}
/*Responsive Styles*/
@media screen and (min-width: 1201px) /*lower this number to show the big menubalk or resize your screen but always keep this value 1px above the other one or they will interfere*/ {
body {
padding-top: 61px;
}
#MenuDiv {
overflow: hidden;
}
#menu {
border-bottom: 1px solid #2072ba;
top: 0;
}
#MenuActive {
border-radius: 10px;
}
li:hover a {
border-radius: 10px;
}
#content {
margin: 20px 10% 20px 10%;
}
}
@media screen and (max-width: 1200px) /*lower this number to show the big menubalk or resize your screen*/ {
.show-menu {
border-bottom: solid 1px #2072ba;
}
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
padding: 0px;
overflow: hidden;
}
/*Create vertical spacing*/
li {
border-bottom: solid 1px #2072ba;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
#right {
float: none;
}
#content {
margin: 20px 5% 20px 5%;
}
}<html>
<head>
<link rel="stylesheet" href="again.css" />
</head>
<body>
<div>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li id="MenuActive"><a href="#">Home</a>
</li>
<li><a href="#">Diensten</a>
</li>
<li><a chref="#">Keurmerken</a>
</li>
<li><a href="#">Contact</a>
</li>
<div id="right">
<li>
<a href="#">Mijn account ↓</a>
<ul class="hidden">
<li><a href="#">Diensten</a>
</li>
<li><a href="#">Account informatie</a>
</li>
</ul>
</li>
<li><a href="#">Inloggen</a>
</li>
</div>
</ul>
</div>
<div id="content">
<div class="text">
<h1 class="titel">Hallo</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed purus eget ipsum eleifend vehicula. In suscipit dapibus mi in semper. Aliquam erat volutpat. Morbi scelerisque tempus ullamcorper. Donec malesuada, velit id consequat venenatis, lorem
risus dignissim eros, id porta tortor lorem et tortor. Vivamus quis odio sit amet est varius auctor. Aliquam scelerisque erat ligula, vel finibus arcu euismod id. Ut arcu nisl, condimentum sed pulvinar ut, tincidunt quis nisl. In hac habitasse
platea dictumst. Cras nec sagittis erat, eu posuere risus. Donec vitae lacinia sem, nec lacinia orci. Nullam varius dignissim ligula vitae bibendum. Sed egestas ante id lobortis interdum.
</p>
</div>
</div>
</body>
</html>
正如您所看到的，代码完美无缺，但只要您尝试添加类，下拉菜单就会受到影响或整个菜单都会受到影响。因为我对css相对较新，所以我不知道为什么它不起作用，因为在向dropdownlinks添加类并且只为这些链接添加样式时它不起作用。
所以我想知道如何正确地链接样式，以便将来不会出错。
E：我的意思是代替使用“li ul li a”或“li a”而不是使用类或id，但这不起作用。
谢谢！
PS）如果放大结果，它会显示不同的menubalk。
答案 0 :(得分：0)
您需要使用CSS类或ID来从您的网站现有样式中分离出新样式。这应该可以避免您在改变网站上的所有内容时遇到的问题。
例如（使用id）：
因为你已经在你的html中使用了这个：
<ul id="menu">
<li id="MenuActive">
</li>
</ul>
您可以更新CSS以使用menu ID：
ul#menu {
width: 100%;
list-style-type: none;
margin: 0;
padding: 5px 0px 5px 0px;
width: auto;
position: absolute;
}
ul#menu li {
display: inline-block;
float: left;
}
/* And so on and so forth... */
或者对于一个班级，只需将您的html更新为：
<ul id="menu" class="nav-menu">
<li id="MenuActive">
</li>
</ul>
你的CSS：
ul.nav-menu {
width: 100%;
list-style-type: none;
margin: 0;
padding: 5px 0px 5px 0px;
width: auto;
position: absolute;
}
ul.nav-menu li {
display: inline-block;
float: left;
}
/* Etc... */