Question

我已经使用CSS进行了此导航，现在我尝试使用媒体查询使其响应，但我无法正确显示子菜单。在响应模式下，我想在一个方框中显示完整菜单，其中所有链接都整齐地位于彼此之下。真的很感激一些帮助！

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;}。这应该让你开始。或者使用块显示：.nav {display: block}。

响应式CSS子菜单

1 个答案: