2015-05-07 59 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

非常感谢科坦! –