水平列表你好,我想要創建一個下拉菜單
但問題是下拉是在水平列表,而不是垂直的,
(根據「健康」菜單),它也顯示一些縮進和idk爲什麼。
Tbh,我只是遵循教程的指示,我只是改變了它的一些 看看我想如何。如果您還可以請更正一些您認爲很棒的問題,非常感謝您。垂直列表,而不是爲下拉
.nav { /*http://www.mattboldt.com/building-great-navbars-toolbars-display-table/ */
\t \t height: 50px;
\t \t width: 100%; \t
\t \t margin: 50px 0px 0px 0px;
\t }
\t
\t .nav li {
\t \t display: table-cell; /* makes it horizontal list*/
\t \t font-family: "Calibri", Helvetica, sans-serif;
\t \t font-size: 20px;
\t \t padding: 10px 50px 20px 10px;
\t \t /*border-left:#e0e0e0 1px solid;
border-right:#e0e0e0 1px solid; */
}
\t
\t .nav ul {
\t background: #557AB2; /* background color*/
\t text-align: center;
\t border-radius: 10px; /* makes the box circular edge*/
\t list-style: none;
\t position: relative; /* allows to see the box*/
\t /* removes excess space in the box (only shows the length from 1st item to last item, not the whole nav bar*/
\t }
\t
\t
\t \t .nav ul ul { /* dropdown menu for 'Health'. 'Nutrition' and 'Mental Health' nested under it.*/
\t \t \t \t /* hides nutrition and Mental Health FOR LIST UNDER HEALTH*/
\t \t \t \t \t \t display: none;
\t \t \t \t \t \t position: absolute;
\t \t \t \t \t \t
\t \t }
\t \t
\t \t \t
\t \t .nav ul li:hover > ul { /*allows drop down for 'Health' */
\t \t \t \t \t \t display: block;
\t \t }
\t
\t \t \t \t .nav ul li a {
\t \t \t \t \t \t display: block;
\t \t \t \t \t \t text-decoration: none;/* removes any text decoration (underline) */
\t \t \t \t }
\t
<nav class="nav">
\t \t \t <ul>
\t \t \t \t <li><a title="Home">Home</a></li>
\t \t \t \t <li><a href="writing.html" title="Writing tips">Writing</a></li>
\t \t \t \t <li><a href="referencing.html" title="APA referencing help">APA Referencing</a></li> \t
\t \t \t \t <li><a href="health.html" title="Health tips">Health</a>
\t \t \t \t \t <ul>
\t \t \t \t \t \t \t <li><a href="nutrition.html" title="Nutrition \t \t posts">Nutrition</a></li>
\t \t \t \t \t \t \t <li><a href="mentalHealth.html" title="All about mental health">Mental Health</a></li> \t
\t \t \t \t \t </ul>
\t \t \t \t </li>
\t \t \t \t
\t \t \t \t <li><a href="takeABreak.html" title="Take a break">Take a break</a></li>
\t
\t \t \t </ul>
\t \t </nav>
\t </header> \t
謝謝!作爲初學者,這很容易理解 –
另外,如果你不介意可以ü請幫助我中心對齊導航欄中的菜單文本pls –