Question

所以我试图编写一个下拉式响应式导航栏，导航栏本身就存在，但问题是它没有响应。我将把代码放在下面。任何帮助将不胜感激，但如果有人可以告诉我我需要添加的其他代码，将不胜感激。此外，如果我需要添加一些没问题的JavaScript。

HTML

    <!DOCTYPE html>
<html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <title>Home|Tourist Advice|Explore New Zealand</title>




    </head>
<body>

<ul class="css3menu">

    <li class="active"><a href=""><span>Home</span></a></li>
    <li class="has-sub"><a href="aboutnewzealand.html"><span>About New Zealand</span></a>
    <ul>
        <li class="has-sub"><a href="#"><span>South Island</span></a>
        <ul>
            <li><a href="aboutnewzealand/marlborough.html"><span>Marlborough</span></a></li>
            <li><a href="aboutnewzealand/nelson.html"><span>Nelson</span></a></li>
            <li><a href="aboutnewzealand/westcoast.html"><span>West Coast</span></a></li>
            <li><a href="aboutnewzealand/canterbury.html"><span>Canterbury</span></a></li>
            <li><a href="aboutnewzealand/queenstown-lakes.html"><span>Queenstown Lakes</span></a></li>
            <li><a href="aboutnewzealand/fiordland.html"><span>Fiordland</span></a></li>
            <li><a href="aboutnewzealand/otago.html"><span>Otago</span></a></li>
            <li class="last"><a href="aboutnewzealand/southland.html"><span>Southland</span></a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li class="has-sub"><a href="accommodation.html"><span>Accommodation</span></a>
    <ul>
        <li class="has-sub"><a href="#"><span>South Island </span></a>
        <ul>
            <li><a href="accommodation/marlborough.html"><span>Marlborough</span></a></li>
            <li><a href="accommodation/nelson.html"><span>Nelson</span></a></li>
            <li><a href="accommodation/westcoast.html"><span>West Coast</span></a></li>
            <li><a href="accommodation/canterbury.html"><span>Canterbury</span></a></li>
            <li><a href="accommodation/queenstown-lakes.html"><span>Queenstown Lakes</span></a></li>
            <li><a href="accommodation/fiordland.html"><span>Fiordland</span></a></li>
            <li><a href="accommodation/otago.html"><span>Otago</span></a></li>
            <li class="last"><a href="accommodation/southland.html"><span>Southland</span></a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li class="has-sub"><a href="attractions.html"><span>Attractions &amp; Activities</span></a>
    <ul>
        <li class="has-sub"><a href="#"><span>South Island </span></a>
        <ul>
            <li><a href="attractions&amp;activities/marlborough.html"><span>Marlborough</span></a></li>
            <li><a href="attractions&amp;activities/nelson.html"><span>Nelson</span></a></li>
            <li><a href="attractions&amp;activities/westcoast.html"><span>West Coast</span></a></li>
            <li><a href="attractions&amp;activities/canterbury.html"><span>Canterbury</span></a></li>
            <li><a href="attractions&amp;activities/queenstown-lakes.html"><span>Queenstown Lakes</span></a></li>
            <li><a href="attractions&amp;activities/fiordland.html"><span>Fiordland</span></a></li>
            <li><a href="attractions&amp;activities/otago.html"><span>Otago</span></a></li>
            <li class="last"><a href="attractions&amp;activities/southland.html"><span>Southland</span></a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li class="has-sub last"><a href="dining.html"><span>Dining</span></a>
    <ul>
        <li class="has-sub"><a href="#"><span>South Island </span></a>
        <ul>
            <li><a href="dining/marlborough.html"><span>Marlborough</span></a></li>
            <li><a href="dining/nelson.html"><span>Nelson</span></a></li>
            <li><a href="dining/westcoast.html"><span>West Coast</span></a></li>
            <li><a href="dining/canterbury.html"><span>Canterbury</span></a></li>
            <li><a href="dining/queenstown-lakes.html"><span>Queenstown Lakes</span></a></li>
            <li><a href="fiordland.html"><span>Fiordland</span></a></li>
            <li><a href="otago.html"><span>Otago</span></a></li>
            <li class="last"><a href="southland.html"><span>Southland </span></a></li>
        </ul>
        </li>
    </ul>
    </li>
</ul>
</div>

</body>
</html>

的CSS

 .css3menu {
    width: 100%;
    margin: 0;
    padding: 3px 0 3px 0;
    list-style: none;
    background: #111;
    background: -moz-linear-gradient(
        top,
        #2da2de 0%,
        #2da2de 16%,
        #2da2de);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#2da2de),
        color-stop(0.16, #2da2de),
        to(#2da2de));
    background: -ms-linear-gradient(
        top,
        #2da2de 0%,
        #2da2de 16%,
        #2da2de 100%);
    background: -o-linear-gradient(
        top,
        #2da2de 0%,
        #2da2de 16%,
        #2da2de 100%);
    background: linear-gradient(
        to bottom,
        #2da2de 0%,
        #2da2de 16%,
        #2da2de 100%);
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    border: 0px solid #2795ce;
    -moz-box-shadow:
        0px 0px 3px rgba(0,0,0,0.0),
        inset 0px 0px 2px rgba(254,255,255,1);
    -webkit-box-shadow:
        0px 0px 3px rgba(0,0,0,0.0),
        inset 0px 0px 2px rgba(254,255,255,1);
    box-shadow:
        0px 0px 3px rgba(0,0,0,0.0),
        inset 0px 0px 2px rgba(254,255,255,1);
}
.css3menu li{
    float: left;
    padding: 0px 8px 0px 0px;
    position: relative;
}
.css3menu li:first-child{
    margin: 0 0 0 25px;
    border-left: 0px;
}
.css3menu li:last-child{
    border-right: 0px;
}
.css3menu li:hover{
    background: -moz-linear-gradient(
        top,
        rgba(255, 56, 92, 0.10) 0%,
        rgba(37, 139, 193, 0.10) 25%,
        rgba(45, 162, 222, 0.10) 50%,
        rgba(48, 180, 250, 0.10) 75%,
        rgba(48, 180, 250, 0.10));
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(rgba(255, 56, 92, 0.10)),
        color-stop(0.25, rgba(37, 139, 193, 0.10)),
        color-stop(0.50, rgba(45, 162, 222, 0.10)),
        color-stop(0.75, rgba(48, 180, 250, 0.10)),
        to(rgba(48, 180, 250, 0.10)));
    background: -ms-linear-gradient(
        top,
        rgba(255, 56, 92, 0.10) 0%,
        rgba(37, 139, 193, 0.10) 25%,
        rgba(45, 162, 222, 0.10) 50%,
        rgba(48, 180, 250, 0.10) 75%,
        rgba(48, 180, 250, 0.10) 100%);
    background: -o-linear-gradient(
        top,
        rgba(255, 56, 92, 0.10) 0%,
        rgba(37, 139, 193, 0.10) 25%,
        rgba(45, 162, 222, 0.10) 50%,
        rgba(48, 180, 250, 0.10) 75%,
        rgba(48, 180, 250, 0.10) 100%);
    background: linear-gradient(
        to bottom,
        rgba(255, 56, 92, 0.10) 0%,
        rgba(37, 139, 193, 0.10) 25%,
        rgba(45, 162, 222, 0.10) 50%,
        rgba(48, 180, 250, 0.10) 75%,
        rgba(48, 180, 250, 0.10) 100%);
}
.css3menu li:active{
    background: rgba(255, 0, 0, 0.10);
}
.css3menu a{
    float: left;
    padding: 10px 10px;
    color: #999;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
    text-shadow:
        0px 0px 0px rgba(0,0,0,0.6),
        0px 0px 7px rgba(254,255,255,0.1);
}
.css3menu a:hover{
    color: #ffffff;
}
.css3menu a:active{
    color: #ffffff;
}
.css3menu li:hover > ul{
    display: block;
}
.css3menu li:active > ul{
    display: block;
}
.css3menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 36px;
    left: 0;
    z-index: 99999;
    background: -moz-linear-gradient(
        top,
        #ffffff 0%,
        #ebf4c3);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#ffffff),
        to(#ebf4c3));
    background: -ms-linear-gradient(
        top,
        #ffffff 0%,
        #ebf4c3 100%);
    background: -o-linear-gradient(
        top,
        #ffffff 0%,
        #ebf4c3 100%);
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ebf4c3 100%);
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    border: 1px solid #6d8000;
}
.css3menu ul li{
    border-left: 0px;
    border-right: 0px;
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 1px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 1px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 1px 0 #777777;
}
.css3menu ul li:first-child{
    padding-left: 0px;
    margin: 0;
}
.css3menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.css3menu ul li:hover{
    background: rgba(255, 0, 0, 0.10);
}
.css3menu ul li:active{
    background: rgba(255, 0, 0, 0.10);
}
.css3menu ul a{
    color: #141414;
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    height: 16px;
    width: 180px;
}
.css3menu ul a:hover{
    color: #141414;
}
.css3menu ul a:active{
    color: #ffffff;
}
.css3menu ul li:first-child a{
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.css3menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}
.css3menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
.css3menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}


.mainmenuicondata {
    line-height: 16px;
    float: left;
    padding-right: 10px;
}
.submenuicondata {
    line-height: 16px;
    float: left;
    padding-right: 10px;
}

.mainmenuicondata.icon1 {
    padding-right: 18px;
    background: url("bottom.png") no-repeat 0 -4px;
    background-size: 8px 8px;
    background-position: right center;
    min-height: 8px;
}

Answer 1

我所说的菜单并不是移动设备的最佳解决方案。但是，如果您想保留这种风格，我建议您将以下媒体规则添加到CSS中，使菜单项至少以较小的屏幕为中心。

@media screen and (max-width: 682px){
    .css3menu a{
        display: inline-block;
        float: none;
        text-align: center;
    }
    .css3menu {
        text-align: center;
    }
    .css3menu > li{
        float: none;
        width: 60%;
        margin: 0 auto;
    }   
    .css3menu > li:first-child{
        margin: 0 auto;
    }
}

用于使下拉导航栏响应的代码

1 个答案: