2015-05-07 57 views
0

水平列表你好,我想要創建一個下拉菜單
但問題是下拉是在水平列表,而不是垂直的,
(根據「健康」菜單),它也顯示一些縮進和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

回答

0

一切都是正確的,你需要做的就是添加一個CSS。

.nav ul li ul li{display: block;padding: 14px;} 

那麼一切都將顯示在垂直方式

如果你不想填充只使用

.nav ul li ul{padding-left: 0px;} 
+1

謝謝!作爲初學者,這很容易理解 –

+0

另外,如果你不介意可以ü請幫助我中心對齊導航欄中的菜單文本pls –

0

這是因爲你給它一個display:table-cell左右。使用display:block將解決您的問題。檢查下面。

.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 top: 50px; 
 
         padding: 0; 
 
\t \t } 
 
\t \t 
 
.submenu { 
 
    display: block !important; 
 
    padding: 10px 20px !important; 
 
} 
 
\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 }
<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 class="submenu"><a href="nutrition.html" title="Nutrition \t \t posts">Nutrition</a></li> 
 
\t \t \t \t \t \t \t <li class="submenu"><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>

+0

非常感謝科坦! –