Question

我一直在寻找我的问题的答案，大多数人似乎都说使用“text-align：center;”和“display：inline-block”。但是，我仍然无法让我的下拉菜单以响应的方式集中在页面上。我是编码的新手，所以如果你能指出我正确的方向，那就太棒了。

以下是导航菜单的HTML：

<nav>
        <ul id="nav">
        <li><a href="#">Skating</a>
                <ul class="skating">
                    <li><a href="#">Schedule</a></li>
                    <li><a href="#">Special Sessions</a></li>
                    <li><a href="#">Discount Coupons</a></li>
                    <li><a href="#">Skating Lessons</a></li>
                </ul></li>
           <li><a href="#">Party Info</a>
                <ul class="partyinfo">
                    <li><a href="#">Birthday Party</a></li>
                    <li><a href="#">Private Party</a></li>
                    <li><a href="#">Adult Skate Party</a></li>
                    <li><a href="#">Fundraisers</a></li>
                    <li><a href="#">Party Forms</a></li>
                </ul></li>
            <li><a href="#">Roller Hockey</a>
                <ul class="hockey">
                    <li><a href="#">7-10 Year Old</a></li>
                    <li><a href="#">11-14 Year Old</a></li>
                    <li><a href="#">League Information</a></li>
                </ul></li>
            <li><a href="#">About Us</a>
                <ul class="about">
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Directions</a></li>
                    <li><a href="#">Photo Gallery</a></li>
                </ul></li>
        </ul>
</nav>

这是与HTML文件对应的CSS文件

* {
margin: 0px;
padding: 0px;
}

header {
text-align: center;
}



ul#nav li {
width: 125px;
text-align: center;
position: relative;
margin-right:5px;
float: left;
line-height: 25px;
border-radius: 10px;
display: inline-block;
padding: 5px;
}

ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #f3f3f3;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}

ul#nav, ul.skating, ul.partyinfo, ul.hockey, ul.about {
list-style-type: none;
display: inline-block;
text-align: center;
font-size: 1em;

}

ul#nav li:hover > a {
background-color: yellow;
}

ul#nav ul.skating, ul.partyinfo, ul.hockey, ul.about {
display:none;
}

ul#nav li:hover ul.skating {
display: block;
}

ul#nav li:hover ul.partyinfo {
display: block;
}

ul#nav li:hover ul.hockey {
display: block;
}

ul#nav li:hover ul.about {
display: block;
}


img.header {
float:right;
}

对不起基本问题，但感谢所有帮助。如果您发现我的代码有任何其他问题，请随时告诉我，以便我可以继续改进。

谢谢。

Answer 1

这是基础知识。您需要在子菜单上使用绝对位置并将text-align:center应用于父级ul

JSfiddle

HTML - 未更改

CSS

* {
margin: 0px;
padding: 0px;
}

ul#nav {
 text-align: center;
 vertical-align:top;
}

ul#nav li {
width: 125px;
position: relative;
margin-right:5px;
line-height: 25px;
border-radius: 10px;
display: inline-block;
padding: 5px;
}

ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #f3f3f3;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}

ul.skating, ul.partyinfo, ul.hockey, ul.about {
list-style-type: none;
display: inline-block;
text-align: center;
font-size: 1em;

position: absolute;
top:100%;

}

ul#nav li:hover > a {
background-color: yellow;
}

ul#nav ul.skating, ul.partyinfo, ul.hockey, ul.about {
display:none;
}

ul#nav li:hover ul.skating {
display: block;
}

ul#nav li:hover ul.partyinfo {
display: block;
}

ul#nav li:hover ul.hockey {
display: block;
}

ul#nav li:hover ul.about {
display: block;

您最好使用较少的ID标签，并在子菜单上使用可重复使用的类。

CSS - 中心水平下拉导航

1 个答案: