我在响应式设计网页中的移动（小显示器）版本的显示下拉菜单有问题（将CSS3与flexbox配合使用）
我有一个11 <li>元素。第一个元素是显示菜单按钮，下一个包含任务的10个元素。在经典网络版本中，我不显示“菜单”按钮，而仅显示任务。但是在移动版本中，我仅显示“菜单”按钮，并且我希望在悬停或单击之后在此按钮上显示任务（而不是单击），而不显示javascirpt。可以吗？我将css3 flexbox与经典版本的li:first-child {display:none;}和移动版本的li {display:none;} li:first-child {display:block;}结合使用。
HTML
<nav class="menu">
<ul id="menu">
<li><i class="mdi mdi-menu"></i>Menu</a></li>
<li><i class="mdi mdi-lock-open"></i><a href="#">1. A mystery to begin with</a></li>
<li><i class="mdi mdi-lock-open"></i><a href="#">2. Running out of water!</a></li>
<li><i class="mdi mdi-lock-open"></i><a href="#">3. A message from Sir Cogwheel</a></li>
<li><i class="mdi mdi-lock-open"></i><a href="#">4. The treasure hunt</a></li>
<li><i class="mdi mdi-lock"></i>5. A dangerous drink</li>
<li><i class="mdi mdi-lock"></i>6. Think, think, think, …</li>
<li><i class="mdi mdi-lock"></i>7. Keep your eyes open</li>
<li><i class="mdi mdi-lock-open"></i><a href="#">8. A safe deposit</a></li>
<li><i class="mdi mdi-lock-open"></i><a href="#">9. The preparation</a></li>
<li><i class="mdi mdi-lock-open"></i><a href="#">10. Get him!</a></li>
</ul>
</nav>
CSS
ul {
padding: 0; margin: 0;
list-style-type: none;
display: flex;
flex-direction: column; /*--This is basic setting, we can ignore it later. It's just tu show different between column and row */
}
li {
background-color: #555;
opacity: 0.7;
color: #aaa;
padding: 0.5em 0.5em;
margin: 0.3em 0.5em;
border-radius: 0.5em;
width: 17em;
}
li:first-child {
display: none;
color:white;
}
@media screen and (max-width: 950px) {
.menu {
display: inline-block;
flex: 1;
}
ul {
flex-direction: row;
}
li {
display: none;
}
li:first-child {
display: inline-block;
flex: 1;
}
li:first-child:hover li {
background-color: red;
display: block;
}
}
您可以在此处看到的所有代码：https://codepen.io/oslicek/pen/VJJVZE?editors=1111
在移动版本中，li:first-child:hover之后的li元素与无关
谢谢您的建议
答案 0 :(得分：0)
这仅仅是概念证明，因此外观是次要的；）不幸的是，为了能够在CSS中做到这一点，您必须对html进行一些修改。
PRAGMAhtml {
background: white;
color: black;
font-family: 'Roboto', sans-serif;
}
html,
body {
padding: 0;
margin: 0;
}
header {
background-color: lightskyblue;
font-family: 'Comfortaa', cursive;
height: 5em;
display: flex;
align-items: center;
justify-content: center;
}
article {
width: 100%;
padding: 1em 0.5em;
}
footer {
background-color: #444;
color: white;
font-weight: bold;
font-size: 0.9em;
display: flex;
height: 32px;
align-items: center;
justify-content: right;
padding: 0.5em;
}
h1 {
text-transform: uppercase;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
flex-direction: column;
/*--This is basic setting, we can ignore it later. It's just tu show different between column and row */
}
li {
background-color: #555;
opacity: 0.7;
color: #aaa;
padding: 0.5em 0.5em;
margin: 0.3em 0.5em;
border-radius: 0.5em;
width: 17em;
}
li:hover {
cursor: pointer;
background-color: #06a;
}
img {
border-radius: 0.5em;
}
a {
color: white;
text-decoration: none;
}
.content {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1524654458049-e36be0721fa2?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ') no-repeat;
background-size: 100% 100%;
display: flex;
flex-shrink: 1;
}
.news-block {
display: flex;
flex-wrap: wrap;
margin-top: 1em;
}
.news-block:first-child {
margin-top: 0;
}
.news-picture {
margin-right: 0.5em;
border-radius: 1.2em;
}
.news-date {
background-color: orange;
border-radius: 1.2em;
padding: 0.5em 0.5em;
color: black;
font-weight: bold;
margin-right: 0.5em;
}
.news-description {
flex: 1;
padding: 0.5em 0.5em;
border-radius: 1.2em;
background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
color: black;
}
.mdi {
padding-right: 0.3em;
}
#menu-button {
display: none;
}
.checkbox input[type="checkbox"] {
opacity: 0;
}
@media screen and (max-width: 950px) {
.content {
flex-wrap: wrap;
}
.menu-button {
display: block;
border: 1px solid red;
color: #fff;
width: 100%;
cursor: pointer;
}
#menu {
display: none;
}
.checkbox label {
position: relative;
display: inline-block;
color: #fff;
}
.checkbox input[type="checkbox"]:checked~#menu {
display: block;
}
li:first-child:hover li {
background-color: red;
display: block;
}
}
答案 1 :(得分：0)
只需将悬停事件添加到ul元素
ul:hover li{ /* show all lists items */
display: block;
}
ul:hover li:first-of-type{ /* except the first one */
display: none;
}
ul {
padding: 0; margin: 0;
list-style-type: none;
display: flex;
flex-direction: column; /*--This is basic setting, we can ignore it later. It's just tu show different between column and row */
}
li {
background-color: #555;
opacity: 0.7;
color: #aaa;
padding: 0.5em 0.5em;
margin: 0.3em 0.5em;
border-radius: 0.5em;
width: 17em;
}
li:first-child {
display: none;
color:white;
}
@media screen and (max-width: 950px) {
.menu {
display: inline-block;
flex: 1;
}
ul {
flex-direction: row;
display: block;
float: left;
}
li {
display: none;
}
li:first-child {
display: inline-block;
flex: 1;
}
li:first-child:hover li{
background-color: red;
display: block;
}
ul:hover li{
display: block;
}
ul:hover li:first-of-type{
display: none;
}
}<nav class="menu">
<ul id="menu">
<li><i class="mdi mdi-menu"></i>Menu</a></li>
<li><i class="mdi mdi-lock-open"></i><a href="#">1. A mystery to begin with</a></li>
<li><i class="mdi mdi-lock-open"></i><a href="#">2. Running out of water!</a></li>
<li><i class="mdi mdi-lock-open"></i><a href="#">3. A message from Sir Cogwheel</a></li>
<li><i class="mdi mdi-lock-open"></i><a href="#">4. The treasure hunt</a></li>
<li><i class="mdi mdi-lock"></i>5. A dangerous drink</li>
<li><i class="mdi mdi-lock"></i>6. Think, think, think, …</li>
<li><i class="mdi mdi-lock"></i>7. Keep your eyes open</li>
<li><i class="mdi mdi-lock-open"></i><a href="#">8. A safe deposit</a></li>
<li><i class="mdi mdi-lock-open"></i><a href="#">9. The preparation</a></li>
<li><i class="mdi mdi-lock-open"></i><a href="#">10. Get him!</a></li>
</ul>
</nav>
答案 2 :(得分：0)
最后，我找到了解决方案。
我认为野兽解决方案是在该复选框（可以是按钮）中添加checkbox，然后添加label。之后，您可以通过 CSS
<header>
<h1>Mystery Game</h1>
<label for="menu-checkbox" class="menu-button">Menu</label>
<nav>
<input type="checkbox" id="menu-checkbox">
<ul>
<li><a href="index.html#">1. Start here</a></li>
<li><a href="index.html#">2. Running out of the water</a></li>
<li><a href="index.html#">3. Think about this</a></li>
<li><a href="index.html#">4. Can you solve consite puzzle?</a></li>
<li><a href="index.html#">5. Wrong way!</a></li>
<li><a href="index.html#">6. Are you scared about dark?</a></li>
<li><a href="index.html#">7. Light at the end of the tunnel</a></li>
<li><a href="index.html#">8. You are so close... but...</a></li>
<li><a href="index.html#">9. Bullying</a></li>
<li><a href="index.html#">10. Final Form</a></li>
</ul>
</nav>
</header>
然后在CSS中为此添加操作以CSS动画显示菜单
/* At first, we show the menu button */
.menu-button {
display: block;
}
nav ul {
border-radius: 0.5em; /* Just a bit rounded borders for better look */
background: rgba(0, 0, 0, 0.92); /* A small transparency of black color for menu */
position: fixed; /* Fixed position is important for hide the menu */
top: 100px; /* This value should be more than 0 otherwise you can cover your header with menu button :) The value depens how height header you have */
left: -100%; /* This is important for make an animation */
width: calc(100% - 15pt); /* Set up your menu width as you want but be beware of scrollbalrs */
height: calc(100vh - 10vh); /* Height could be 100vh if you want cover whole page */
transition: all .5s; /* Animation will take 0.5 second */
}
/* Now we display whole menu, but it's hidden because menu has fixed position with -100% from left */
nav li {
display: block;
}
#menu-checkbox:checked ~ ul {
left: 10px; /* After click menu will be placed width like 10px margin */
}
别忘了！与诸如此类的媒体查询结合使用非常重要
@media only screen and (max-width: 768px) {
/* Here should be a code above */
}
首先，您应该先对移动设备进行编程，原因是这不是理想的解决方案，但是如果显示较小，则效果很好（但设备桌面优先）（如果您使用的是设备桌面，则）； >
任何人都可以通过移动优先编码提出更好的解决方案吗？
但希望该解决方案可以为许多人提供帮助