Two things in your css are giving you trouble.
nav{ position: absolute; } means this div will not fill the width.
horizontal{ margin: 40 auto;} 40 is not valid.
You MUST specify a measurement unit in CSS, so it should be 40px if I’m guessing your intention, but other units are available.
Here is amended css you can try.
nav {
width: 100%;
background-color: #006600;
}
.horizontal {
list-style-type: none;
margin: 40px auto;
width: 640px;
padding: 0;
overflow: hidden;
}
Step 1) Add HTML:
Example
<!-- The navigation menu -->
<div class="navbar">
<a class="active" href="#">Home</a>
<a href="#">Planning</a>
<a href="#">Takken</a>
<a href="#">Kleding</a>
<a href="#">Contact</a>
<a href="#">Inschrijven</a>
</div>
And CSS:
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 15%;; /* Four links of equal widths */
text-align: center;
}
I am working on a horizontal navigation bar with a dropdown menu. I’m quite new to making codes so this is maybe a stupid question. My navigation is sticking to the left of my website, but I need it to stay in line with the text and I can’t get the navigation bar threw my whole webpage how do I fix this?
photo of my website with the 2 problems:
enter image description here
nav {
position: absolute;
}
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
width: 70px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
h1 {
margin-top: 80px;
}
<nav id="mainnav">
<ul class="horizontal">
<li><a href="#">Home</a></li>
<li><a href="planning/planning.html" title="">Planning</a></li>
<li><a href="takken/takken.html" title="">Takken</a>
<ul>
<li><a href="takken/kapoenen/kapoenen.html">Kapoenen</a></li>
<li><a href="takken/kawellen/kawellen.html">Kawellen</a></li>
<li><a href="takken/kajo's/kajo.html">Kajoo's</a></li>
<li><a href="takken/jojoo's/jojoo.html">Jojoo's</a></li>
<li><a href="takken/Givers/givers.html">Givers</a></li>
<li><a href="takken/Jin/jin.html">Jin</a></li>
<li><a href="takken/Akabe/akabe.html">Akabe</a></li>
</ul>
</li>
<li><a href="kleding/kleding.html" title="">Kleding</a></li>
<li><a href="contact/contact.html" title="">Contact</a>
<ul>
<li><a href="contact/leiding/leiding.html">Leiding</a></li>
<li><a href="contact/verhuur/verhuur.html">Verhuur</a></li>
</ul>
</li>
<li><a href="inschrijven/inschrijven.html" title="">Inschrijven</a></li>
</ul>
</nav>
That helped me a lot! thank you! but now if my dropdown menu pops up, the whole area turns green, I added a photo of my problem
