-1
我忙於製作網站，並且無法使用垂直導航菜單。我的第一個方法是嘗試刪除一些代碼行，以查看是否有東西阻止了我想要的操作，但我似乎無法找到它。
我試圖做的第二件事是尋找類似於我的垂直導航菜單，但我找不到一個完全相似的。
所以我的問題是我該如何解決這個問題？
這是怎麼回事，現在採取行動： Image now.
這是我希望它採取行動： How I want it.我的html/css網站有什麼問題？
我的代碼是在這裏：
body{
\t background-color:purple;
\t height:100%;
}
.list{
\t list-style-type: none;
\t background-color:black;
\t origin: top left;
\t margin:8px 0 -50px -40px;
\t width:210px;
\t height:100%;
\t
}
.button{
\t background:grey;
\t margin: 0px 0px 0px 20px;
\t padding:20px 25px 16px 25px;
\t width:100px;
\t border-radius:0 0 0 0;
\t
\t
\t display:block;
\t text-align:center;
\t font-size:17px;
\t font-weight:bold;
\t font-family:Baskerville;
\t color:black;
\t text-decoration:none;
\t transition-duration:0.4s;
}
.buttonA{
\t background:#675bcc;
\t margin: 0px 0px 0px 20px;
\t padding:20px 25px 16px 25px;
\t width:100px;
\t border-radius:10px 10px 0 0;
\t
\t
\t display:block;
\t text-align:center;
\t font-size:17px;
\t font-weight:bold;
\t font-family:Baskerville;
\t color:white;
\t text-decoration:none;
\t transition-duration:0.4s;
}
.buttonB{
\t background:grey;
\t margin: 0px 0px 0px 20px;
\t padding:20px 25px 16px 25px;
\t width:100px;
\t border-radius:0 0 10px 10px;
\t
\t
\t display:block;
\t text-align:center;
\t font-size:17px;
\t font-weight:bold;
\t font-family:Baskerville;
\t color:black;
\t text-decoration:none;
\t transition-duration:0.4s;
}
.button:hover, .buttonB:hover{
\t background-color:purple;
\t color:white;
\t opacity:0.8;
}
.active-has-sub{
\t
}
.has-sub{
\t list-style-type: none;
\t float:left;
\t z-index:1;
\t display:inline; \t
\t position:relative;
\t top: -35px;
\t left:140px;
}
.has-sub> a{
\t text-decoration:none;
\t text-align:left;
\t
\t background:grey;
\t padding:20px 25px 16px 25px;
\t font-size:15px;
}
.nav{
\t background-color:black;
\t origin: top left;
\t margin:-8px 0 -50px -8px;
\t width:210px;
\t height:100%;
\t z-index:1;<!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>如果有人能告訴我我做錯了什麼以及如何解決這個問題。
這將是非常有益的和偉大的:)
