I've been experimenting with building a website from scratch, opting for a simple and blocky design. I placed the navigation at the top of the page in an unordered list format containing <a> elements within list tags, all enclosed within a <nav> tag like this;
* {
margin: 0;
}
html,
body {
height: 100%;
margin: 0;
}
.bdy {
display: block;
margin: 0;
background-color: #d2d2d2;
height: 85%;
float: left;
width: 100%;
}
nav.navbar {
margin: 0;
padding: 0;
height: 15%;
width: 100%;
}
nav ul {
float: left;
list-style-type: none;
height: 100%;
text-align: center;
background-color: #326ada;
width: 97.9%;
}
nav.navbar li {
display: inline-block;
float: left;
bottom: 0;
margin-left: 1%;
margin-top: 10%;
}
nav li a {
text-decoration: none;
color: white;
}<nav class="navbar">
<ul>
<li><a href="#" class="first">Home</a></li>
<li><a href="#">Assignments</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<div class="bdy">
<p>content</p>
</div>I'm aiming to position the unordered list elements always at the bottom of the Navigation area (Blue), approximately 10px from the bottom. Using margins with percentages hasn't yielded the desired outcome. Is there a way to float the list downward without disrupting the existing order?