Question

我正在忙着制作一个网站，并且在垂直导航菜单上遇到了麻烦。我的第一种方法是尝试删除一些代码行，以查看是否阻止了我想要它做的事情，但我似乎无法找到它。
我试图做的第二件事是搜索一个类似于我的垂直导航菜单，但我找不到一个完全相似的所以我的问题是如何解决这个问题？这就是它现在的行动方式： Image now.
这就是我希望它采取行动的方式： How I want it.

我的代码在这里：

＆＃13;

body{
	background-color:purple;
	height:100%;
}
.list{
	list-style-type: none;
	background-color:black;
	origin: top left;
	margin:8px 0 -50px -40px;
	width:210px;
	height:100%;
	
}
.button{
	background:grey;
	margin: 0px 0px 0px 20px;
	padding:20px 25px 16px 25px;
	width:100px;
	border-radius:0 0 0 0;
	
	
	display:block;
	text-align:center;
	font-size:17px;
	font-weight:bold;
	font-family:Baskerville;
	color:black;
	text-decoration:none;
	transition-duration:0.4s;
}
.buttonA{
	background:#675bcc;
	margin: 0px 0px 0px 20px;
	padding:20px 25px 16px 25px;
	width:100px;
	border-radius:10px 10px 0 0;
	
	
	display:block;
	text-align:center;
	font-size:17px;
	font-weight:bold;
	font-family:Baskerville;
	color:white;
	text-decoration:none;
	transition-duration:0.4s;
}
.buttonB{
	background:grey;
	margin: 0px 0px 0px 20px;
	padding:20px 25px 16px 25px;
	width:100px;
	border-radius:0 0 10px 10px;
	
	
	display:block;
	text-align:center;
	font-size:17px;
	font-weight:bold;
	font-family:Baskerville;
	color:black;
	text-decoration:none;
	transition-duration:0.4s;
}
.button:hover, .buttonB:hover{
	background-color:purple;
	color:white;
	opacity:0.8;
}
.active-has-sub{
	
}
.has-sub{
	list-style-type: none;
	float:left;
	z-index:1;
	display:inline;	
	position:relative;
	top: -35px;
	left:140px;
}
.has-sub> a{
	text-decoration:none;
	text-align:left;
	
	background:grey;
	padding:20px 25px 16px 25px;
	font-size:15px;
}

.nav{
	background-color:black;
	origin: top left;
	margin:-8px 0 -50px -8px;
	width:210px;
	height:100%;
	z-index:1;

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="nav">
<img src="" alt="logo.png" width=200px height=100px>
<ul class="list">

<li>
<a class="buttonA" href="#">Home</a>
</li>

<li class="active-has-sub" ><a class="button" href="javascript:void(0)">Herplaatsen</a> 
      <ul>
         <li class="has-sub"><a href="#">Ik wil herplaatsen</a></li>
         <li class="has-sub"><a href="#">Sub Product</a></li>
      </ul>
</li>

<li><a class="button" href="javascript:void(0)">Rescue's</a>

</li>
<li>
<a class="button" href="javascript:void(0)">Wil</a>
</li>
<li>
<a class="button" href="javascript:void(0)">Handig</a>
</li>
<li>
<a class="button" href="javascript:void(0)">Vakantie</a>
</li>
<li>
<a class="button" href="javascript:void(0)">Opendag</a>
</li>
<li>
<a class="button" href="javascript:void(0)">Doneren</a>
</li>
<li>
<a class="button" href="javascript:void(0)">Sponser</a>
</li>
<li>
<a class="button" href="javascript:void(0)">Contact</a>
</li>
<li>
<a class="buttonB" href="javascript:void(0)">Vakantieadres</a>
</li>
<br> 
</ul>
</div>
</body>
</html>

＆＃13;

如果有人能告诉我我做错了什么以及如何解决这个问题。
这将是非常有帮助和伟大的:)）

Answer 1

<ul> HTML标记只是创建一个无序列表，它只会创建一个普通的垂直列表，通过查看您共享的示例，它看起来就像您想要的水平列表。一种方法是使用<form> HTML标记，它会创建一个包含同一行所有内容的表单。

以下是此示例：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <form>
        <a href="<link1>">Menu option 1</a>
        <a href="<link2>">Menu option 2</a>
    </form>
</body>
</html>

这样做是这样的： Click here for image.

这不是最好的方法，但它是最简单的方法之一。

祝你好运！

我的html / css网站出了什么问题？

1 个答案: