-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>誰かが私に言うことができれば私が間違っていたこと、そしてこれをどのように修正できるのか。 :)
