Question

您好我试图创建一个下拉菜单但问题是下拉列表是水平列表而不是垂直列表，
（在＆＃39; Health＆＃39;菜单下）它还显示了一些缩进和idk为什么 Tbh，我只是按照教程中的说明进行操作，我只是改变了一些它看起来我想成为怎样。如果你还能解决一些你认为很棒的问题，非常感谢你。

＆＃13;

.nav {  /*http://www.mattboldt.com/building-great-navbars-toolbars-display-table/ */
		height: 50px;
		width: 100%;	
		margin: 50px 0px 0px 0px;
	}
	
	.nav li {
		display: table-cell; /* makes it horizontal list*/
		font-family: "Calibri", Helvetica, sans-serif;
		font-size: 20px;
		padding: 10px 50px 20px 10px;
		/*border-left:#e0e0e0 1px solid;
        border-right:#e0e0e0 1px solid; */
    }
	
	.nav ul {
	background: #557AB2;  /* background color*/
	text-align: center;
	border-radius: 10px; /* makes the box circular edge*/
	list-style: none;
	position: relative; /* allows to see the box*/
	 /* removes excess space in the box (only shows the length from 1st item to last item, not the whole nav bar*/
	}
	
	
		.nav ul ul { /* dropdown menu for 'Health'. 'Nutrition' and 'Mental Health' nested under it.*/
				/* hides nutrition and Mental Health    FOR LIST UNDER HEALTH*/
						display: none;
						position: absolute;
						
		}
		
			

		.nav ul li:hover > ul { /*allows drop down for 'Health' */
						display: block;
		}

	
				.nav ul li a {
						display: block; 
						text-decoration: none;/* removes any text decoration (underline) */
				}

＆＃13;

<nav class="nav">
			<ul> 
				<li><a title="Home">Home</a></li> 
				<li><a href="writing.html" title="Writing tips">Writing</a></li>
				<li><a href="referencing.html" title="APA referencing help">APA   Referencing</a></li>	
				<li><a href="health.html" title="Health tips">Health</a>
					<ul>
							<li><a href="nutrition.html" title="Nutrition 		posts">Nutrition</a></li>
							<li><a href="mentalHealth.html" title="All about mental health">Mental Health</a></li>	
					</ul>
				</li>
				
				<li><a href="takeABreak.html" title="Take a break">Take a break</a></li>
	
			</ul>
		</nav>
	</header>

＆＃13;

Answer 1

这是因为你把它作为display:table-cell给了它。使用display:block将解决您的问题。检查以下内容。

.nav {  /*http://www.mattboldt.com/building-great-navbars-toolbars-display-table/ */
		height: 50px;
		width: 100%;	
		margin: 50px 0px 0px 0px;
	}
	
	.nav li {
		display: table-cell; /* makes it horizontal list*/
		font-family: "Calibri", Helvetica, sans-serif;
		font-size: 20px;
		padding: 10px 50px 20px 10px;
		/*border-left:#e0e0e0 1px solid;
        border-right:#e0e0e0 1px solid; */
    }
	
	.nav ul {
	background: #557AB2;  /* background color*/
	text-align: center;
	border-radius: 10px; /* makes the box circular edge*/
	list-style: none;
	position: relative; /* allows to see the box*/
	 /* removes excess space in the box (only shows the length from 1st item to last item, not the whole nav bar*/
	}
	
	
		.nav ul ul { /* dropdown menu for 'Health'. 'Nutrition' and 'Mental Health' nested under it.*/
				/* hides nutrition and Mental Health    FOR LIST UNDER HEALTH*/
						display: none;
						position: absolute;
						top: 50px;
                        padding: 0;
		}
		
.submenu {
    display: block !important;
  padding: 10px 20px !important;
}
			

		.nav ul li:hover > ul { /*allows drop down for 'Health' */
						display: block;
		}

	
				.nav ul li a {
						display: block; 
						text-decoration: none;/* removes any text decoration (underline) */
				}

<nav class="nav">
			<ul> 
				<li><a title="Home">Home</a></li> 
				<li><a href="writing.html" title="Writing tips">Writing</a></li>
				<li><a href="referencing.html" title="APA referencing help">APA   Referencing</a></li>	
				<li><a href="health.html" title="Health tips">Health</a>
					<ul>
							<li class="submenu"><a href="nutrition.html" title="Nutrition 		posts">Nutrition</a></li>
							<li class="submenu"><a href="mentalHealth.html" title="All about mental health">Mental Health</a></li>	
					</ul>
				</li>
				
				<li><a href="takeABreak.html" title="Take a break">Take a break</a></li>
	
			</ul>
		</nav>
	</header>

Answer 2

一切都是正确的，你需要做的是添加一个CSS。

<ul>
  [*>NODE]
</ul>
[>NODE]
    <li id="languages-box-holder">
  [?ENABLED]
    <a href="[=URL]" target="[=TARGET]" class="dark-color">[=TEXT]</a>
[?ELSE]
    <span>[=TEXT]</span>
[/?]
[?NODE]
    <ul class="languages-box popup-box cream-bg">
    <li class="arrow-top"><span class="shadow cream-bg"></span></li>
    <li class="focusor-top"></li>
    [*>NODE]
    </ul>
[/?]
</li>
[/>]

然后一切都将以垂直方式显示

如果你不想填充，只需使用

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

垂直列表而不是水平列表用于下拉列表

2 个答案: