Je suis occupé à créer un site Web et j'ai des problèmes avec un menu de navigation verticale. Ma première approche était d'essayer de supprimer quelques lignes de code pour voir si quelque chose bloque ce que je veux faire, mais je n'arrive pas à le trouver.
La deuxième chose que j'ai essayé de faire était de rechercher un menu de navigation verticale similaire à la mienne, mais je ne pouvais pas trouver exactement similaire.
Donc, ma question est comment puis-je résoudre ce problème?
Voici comment il agit maintenant: Image now.
Voilà comment je veux agir: How I want it.Qu'est-ce que j'ai fait de mal avec mon site web html/css?
Mon code est ici:
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>Si quelqu'un pouvait me dire ce que j'ai fait de mal et comment je peux résoudre ce problème.
Ce serait extrêmement utile et grand :)
