css - 响应式 CSS 子菜单

Question

我已经使用 CSS 制作了这个导航，现在我正尝试使用媒体查询使其响应，但我无法让子菜单正确显示。在响应模式下，我想在一个框中将所有链接整齐地显示在彼此下方的完整菜单中。非常感谢您的帮助!

https://jsfiddle.net/4L8ghza0/1/

HTML:

<header>
        <div class="nav">
            <a href="#" ID="menu-icon"></a>
            <ul>
            <li><a href="index.html" class="current">Start</a></li> 
            <li><a href="#">Submenu1 <span class="arrow">&#9660;</span></a>

                <ul>
                    <li><a href="#">link1</a></li>
                    <li><a href="#">link2</a></li>
                    <li><a href="#">link3</a></li>
                </ul>

            </li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Submenu2 <span class="arrow">&#9660;</span></a>

                <ul>
                    <li><a href="#">link4</a></li>
                    <li><a href="#">link5</a></li>
                    <li><a href="#">link6</a></li>
                </ul>

            </li>                   
            </ul>
            </div>
    </header>

CSS:

header {
top: 0px;
background-color: #EFE7D2;
position: fixed !important;
width: 100%;
height: 125px;
z-index: 10;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.nav {
float: right;
padding: 40px 80px 0 0;
}

ul {
list-style-type: none;
}

ul li {
font-family: Arial, sans-serif;
font-size: 95%;
text-transform: uppercase;
display: inline-block;
position: relative;
float: left;
margin: 5px;
}

ul li a {
padding: 8px 10px;
display: block;
text-decoration: none;
color: #000000;
}

ul li:hover{
background: #CCB18E;
}

.nav .arrow {
font-size: 70%;
line-height: 0%;
}

ul li ul {
display: none;
position: absolute;
width: 210%;
padding: 0;
}

ul li ul li {
display: block;
text-decoration: none;
background: #CCB18E;
padding: 0px 10px;
margin: 0;
width: 100%;
}

ul li ul li:hover  {
display: block;
background: #DAC7AD;
text-decoration: none;
padding: 0px 10px;
margin: 0;
width: 100%;
}

ul li:hover ul{
display:block;
visibility:visible;
}

ul ul li:hover li{
display:block;
}

.current {
background:#CCB18E;
color: #000000;
}

#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(https://cdn0.iconfinder.com/data/icons/social-messaging-productivity-4/128/menu-2-512.png) center;
}

a:hover#menu-icon {
border-radius: 4px 4px 0 0; 
}

@media screen and (max-width: 1080px){
#menu-icon {
    display: inline-block;
}
ul li ul li a {
    display: block; 
}
ul, ul:active {
    display: none;
    z-index: 1000;
    position: absolute;
    padding: 10px;
    background: #EFE7D2;
    right: 100px;
    top: 60px;
    width: 25%;
    border: 1px #5F7B65 solid;
}
.nav:hover ul {
    display: block;
}
ul li:hover ul li ul li {
    display: none;
}
}

Answer 1

@JD26 我发现使用 flex-box 更容易。你可以设置 .nav {display: flex; flex-direction:column;} 在你的媒体查询中。这应该让你开始。或者使用 block 显示:.nav {display: block}。