Wenn Sie die HTML-ID in die Klasse ändern, wird der CSS-Stil - html, css, class, identifier - durcheinander gebracht

Ich möchte einige Elemente, die ich mit Ids beschriftet habe, zu einer einzigen Klasse ändern, so dass ich in meinem CSS darauf verweisen kann .sortsubmenu eher, als #sortsongmenu, #sortartistmenu, etc.

Das Problem ist, dass wenn ich einen von ihnen änderevon einer ID zu einer Klasse, vermasselt es die Formatierung. In der Abbildung unten ist alles über das Untermenu und das Untermenu des Untertitels identisch, nur das Untertitelmenü wird mit einer ID identifiziert und das Untermenu wird mit einer Klasse identifiziert.

Bildbeschreibung hier eingeben

#topbar {
background-color: #222;
}

#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}

#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}

#mainmenu li {
display: inline-block;
width: 200px;
}

#mainmenu li:hover {
background-color: #333;
}

#mainmenu li a {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}

#mainmenu li:hover > ul {
display: block;
}

#sortmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}

#sortmenu > li {
display: block;
position: relative;
}

#sortmenu li a:hover {
color: #699;
}

#sortmenu li:hover ul {
display: inline-block;
}

#sortsongmenu, .sortsubmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
top: 0;
left: 100%;
width: 100px;
}

#sortsongmenu li, .sortsubmenu li {
display: inline;
}

#sortsongmenu li a:hover, .sortsubmenu li a:hover {
color: #DB7093;
}
<div id="topbar">
<div id="topbar_wrapper">
<ul id="mainmenu">
<li><a href="#">Home</a>
</li>
<li>
<a href="#">Search</a>
</li>
<li>
<a href="#">Sort By &#9660</a>
<ul id="sortmenu">
<li><a href="#">Song</a>
<ul id="sortsongmenu">
<li><a href="#">A to Z</a>
</li>
<li>
<a href="#">Z to A</a>
</li>
</ul>
</li>
<li>
<a href="#">Artist</a>
<ul class="sortsubmenu">
<li><a href="#">A to Z</a>
</li>
<li>
<a href="#">Z to A</a>
</li>
</ul>
</li>
<li>
<a href="#">Album</a>
</li>
<li>
<a href="#">Genre</a>
</li>
<li>
<a href="#">BPM</a>
</li>
<li>
<a href="#">Release Date</a>
</li>
</ul>
</li>
<li>
<a href="#">Add Song</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</div>

Antworten:

1 für die Antwort № 1

Das #mainmenu li Regel steht dir im Weg. Es wird nicht durch den klassenbasierten Selektor überschrieben, wie es beim ID-basierten Selektor der Fall war.

Behalten Sie diese Positionierung / Größe bei sofortig nur Nachkommen, das heißt, ändern:

#mainmenu li {

zu

#mainmenu > li {

und alles ist gut.

#topbar {

background-color: #222;

}

#topbar_wrapper {

width: 100%;

margin: 0 auto;

text-align: left;

}

#mainmenu {

list-style-type: none;

padding: 0px;

margin: 0px;

position: relative;

min-width: 200px;

}

#mainmenu > li {

display: inline-block;

width: 200px;

}

#mainmenu li:hover {

background-color: #333;

}

#mainmenu li a {

color: #CCC;

display: block;

padding: 15px;

text-decoration: none;

}

#mainmenu li:hover > ul {

display: block;

}

#sortmenu {

display: none;

position: absolute;

background-color: #333;

border: 5px solid #222;

border-top: 0;

margin-left: -5px;

}

#sortmenu > li {

display: block;

position: relative;

}

#sortmenu li a:hover {

color: #699;

}

#sortmenu li:hover ul {

display: inline-block;

}

#sortsongmenu,

.sortsubmenu {

display: none;

position: absolute;

background-color: #333;

border: 5px solid #222;

border-left: 0px;

text-align: right;

top: 0;

left: 100%;

width: 100px;

}

#sortsongmenu li,

.sortsubmenu li {

display: inline;

}

#sortsongmenu li a:hover,

.sortsubmenu li a:hover {

color: #DB7093;

}
<div id="topbar">
<div id="topbar_wrapper">
<ul id="mainmenu">
<li><a href="#">Home</a>
</li>
<li>
<a href="#">Search</a>
</li>
<li>
<a href="#">Sort By &#9660</a>
<ul id="sortmenu">
<li><a href="#">Song</a>
<ul id="sortsongmenu">
<li><a href="#">A to Z</a>
</li>
<li>
<a href="#">Z to A</a>
</li>
</ul>
</li>
<li>
<a href="#">Artist</a>
<ul class="sortsubmenu">
<li><a href="#">A to Z</a>
</li>
<li>
<a href="#">Z to A</a>
</li>
</ul>
</li>
<li>
<a href="#">Album</a>
</li>
<li>
<a href="#">Genre</a>
</li>
<li>
<a href="#">BPM</a>
</li>
<li>
<a href="#">Release Date</a>
</li>
</ul>
</li>
<li>
<a href="#">Add Song</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</div>


Speisekarte