I'm struggling to align the navigation bar I've designed in the center of the page.
Here is the HTML Code:
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Mr. A</a></li>
<li><a href="#">Intro</a>
<ul>
<li><a href="#">Daily Agenda</a></li>
<li><a href="#">Handouts</a></li>
<li><a href="#">Student Work</a></li>
</ul>
</li>
<li><a href="#">Digital Design</a>
<ul>
<li><a href="#">Daily Agenda</a></li>
<li><a href="#">Handouts</a></li>
<li><a href="#">Student Work</a></li>
</ul>
</li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">Daily Agenda</a></li>
<li><a href="#">Handouts</a></li>
<li><a href="#">Student Work</a></li>
</ul>
</li>
<li><a href="#">AP Computer Science</a>
<ul>
<li><a href="#">Daily Agenda</a></li>
<li><a href="#">Handouts</a></li>
</ul>
</li>
<li><a href="#">FBLA</a>
<ul>
<li><a href="#">Membership</a></li>
<li><a href="#">Competitions</a></li>
<li><a href="#">Conferences</a></li>
</ul>
</li>
</ul>
</div>
</body>
This is the CSS Code:
html {
background-color:#2f2f4f;
}
div {
position:relative;
}
.menu {
position:absolute;
}
.menu ul {
padding:0;
margin:0;
line-height:30px;
}
.menu li {
position:relative;
float:left;
list-style:none;
border-bottom-style:solid;
border-top-style:solid;
border-color:#c5b358;
border-width:1px;
}
.menu ul ul {
position:absolute;
visibility:hidden;
padding:0;
margin:0;
}
.menu ul li a {
text-align:center;
font:"Georgia", serif;
font-size:18px;
color:#c5b358;
width:250px;
height:50px;
display:table-cell;
text-decoration:none;
vertical-align:middle;
}
.menu ul li:hover {
background-color:#2f4f2f;
text-decoration:none;
}
.menu ul li:hover ul {
visibility:visible;
z-index:1;
}
.menu ul li:hover ul li a {
background:#2f4f2f;
z-index:1;
border-bottom:none;
opacity:0.9;
text-decoration:none;
}
.menu ul li ul li:hover {
background:#2f4f2f;
opacity:0.8;
text-decoration:underline;
}
I have tried several options but nothing seems to be working. As someone new to web design, it's been a challenge getting to this point.