0
私は、小さな画面、特に親メインメニューエントリの直下にあるメニュー内のサブメニュー（最後のメインメニューエントリの下ではない）を表示するためにメディアクエリを使用したいと考えています。ここでは（通常のスクリーンデバイス上のコードを含む）私が今まで持っているものですが、私は唯一の問題、このインラインサブメニューに適切なCSSを作成するが生じています：小さな画面デバイスのドロップダウンサブメニュー
function toggleState() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}/* Add a black background color to the top navigation */
.topnav {
background-color: rgba(0, 0, 0, 0.85);
position: fixed;
top: 0;
visibility: none;
z-index: 1000;
width: 100%;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
display: block;
color: #fff;
padding: 14px 16px;
text-decoration: none;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ff6a00;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown menu */
.dropDownP {
display: inline-block;
color: #fff;
text-decoration: none;
}
.dropDown {
display: inline-block;
float: right;
}
.dropDownContent {
display: none;
position: absolute;
z-index: 10000;
top: 100%;
}
.dropDownContent a {
float: none;
display: block;
color: #000;
padding: 14px 16px;
text-decoration: none;
}
.dropDown:hover .dropDownContent {
display: block;
}
.dropDownP:hover,
.dropDown:hover .dropDownP,
.dropDown a:hover {
background-color: #ff6a00;
color: white;
}
/* Small screen settings */
@media screen and (max-width: 1076px) {
.topnav a:not(:first-child) {
display: none;
}
.dropDown {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 1076px) {
.topnav.responsive {
position: fixed;
}
.topnav.responsive .icon {
position: fixed;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: right;
}
.topnav.responsive img {
float: none;
display: block;
text-align: left;
}
}<body style="text-align:center;">
<div class="header">
<div class="topnav" id="myTopnav">
<a href="javascript:void(0);" class="icon" onclick="toggleState()">☰</a>
<a href="?l3">Link 3</a>
<a href="?l2">Link 2</a>
<div class="dropDown">
<div class="dropDownContent">
<a href="?o1">Option 1</a>
<a href="?o2">Option 2</a>
</div>
<a class="dropDownP">Dropdown</a>
</div>
<a href="?l1">Link 1</a>
</div>
</div>
</body>