如何完全使导航栏水平 [英] How do I completely make my navigation bar horizontal

问题描述

我正忙着使用HTML和CSS在我的投资组合网站上工作。对于我的下拉导航栏，我看了一个教程，它给了我一个非常酷的结果，我唯一想要改变的是导航栏中的子元素下拉的方式。此时它们垂直下降，但我希望它们水平，正好位于其他链接下方。谁能帮我？ < style>部分看起来可能非常混乱，对不起！

Hi, I'm busy working on my portfolio website using HTML and CSS. For my drop down navigation bar I watched a tutorial which gave me a pretty cool result, the only thing I want to change is the way the sub elements in the navigation bar drop down. At this moment they drop down vertically but I want them horizontal and right underneath the other links. Who can help me? The <style> part looks probably incredibly messy, sorry for that!

<style>


.vastmenu{
	position: fixed;
	margin-left: 25%;
	margin-right: auto;
	margin-top: 0px;
	width: 100%;
}

/*rules for navigatie menu*/
#navmenu {
	max-width: 100%; /*zodat het blok groot (klein) genoeg is om te centreren*/
	margin-left: auto; /*eerst testen voordat je de volgende regel typt; blok verschuift zoveel mogelijk naar rechts*/
	margin-right: auto; /*deze drukt de box weer terug naar links, samen met margin-left drukken ze het blok naar het midden. Centreren dus!*/
	margin-top: -15px;
}

ul#navmenu, ul.sub1{
	list-style-type: none;
	margin-right: auto;
	margin-left: auto;
	font-size: 12pt;
}

ul#navmenu li{
	/*outline: 1px solid red;*/
	margin-right: auto;
	margin-left: auto;
	width: auto;
	text-align: center;
	position: relative;
	float: left;
	margin-right: 5px;
}

ul#navmenu a{
	text-decoration: none;
	position: relative;
	display: block;
	width: 150px;
	height: 35px;
	line-height: 25px;
	border-radius: 2px;
	float: left;
}

ul#navmenu .sub1 a{
	margin-top: 0px;

}

ul#navmenu li:hover >a {
	font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
}

ul#navmenu li:hover a:hover{
	font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
}

ul#navmenu ul.sub1{
	display: none;
	position: absolute;
	float: left;
	top: 25px;
	left: 0px;
}

ul#navmenu li:hover .sub1{
	display: block;
}


</style>



&lt;!--<div class="vastmenu"><ul id="navmenu">
 	<li><a href="#">//link1</a></li>
 	<li><a href="#">//link 2</a>
 		<ul class="sub1">
 			<li><a href="#">sublink2.1</a>
 			<li><a href="#">sublink2.2</a>
 			<li><a href="#">sublink2.3</a>
 		</li></li></li></ul>
 	</li>
 	<li><a href="#">//link3</a>
 		<ul class="sub1">
 			<li><a href="#">sublink3.1</a>
 			<li><a href="#">sublink3.2</a>
 			<li><a href="#">sublink3.3</a>
 			<li><a href="#">sublink3.4</a>
 		</li></li></li></li></ul>
 	</li>
 	<li><a href="#">//link4</a>
 		<ul class="sub1">
 			<li><a href="#">sublink4.1</a>
 			<li><a href="#">sublink4.2</a>
 			<li><a href="#">sublink4.3</a>
  			<li><a href="#.html">sublink4.4</a>
 			<li><a href="#">sublink4.5</a>
 		</li></li></li></li></li></ul>
 	</li>
 	<li><a href="#">//link5</a>
			<ul class="sub1">
 			<li><a href="#">sublink5.1</a>
 			<li><a href="#">sublink5.2</a>
 			<li><a href="#">sublink5.3</a>
 		</li></li></li></ul>
 	</li></ul></div>
--&gt;</pre>

推荐答案

这里有一些菜单 [ ^ ]



一些更多 [ ^ ]



此处更多内容 [ ^ ]



这里的好人 [ ^ ]

Here are some menus[^]

Some more[^]

More here[^]

Nice one here[^]

查找并修改CSS

Hi,
Find and modify the css

ul#navmenu ul.sub1{
	display: none;
	position: absolute;
	float: left;
	top: 0;
	left: 150px;
}

这篇关于如何完全使导航栏水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！