This is how I do my nav bar: https://www.workingbath.com/
HTML
<div id=”nav” class=”clearfix”>
< ul>< li class=”page_item”>< a href=”<?php bloginfo(‘url’); ?>” title=”Home”>Home< /a>
< /li>
<?php wp_list_pages(‘title_li=’); ?>
< /ul>
</div>
CSS
#nav {
position: relative;
background: #f1f1f1;
border-bottom: 10px solid #fff;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
margin: 0;
padding: 0;
}
#nav ul li a {
text-decoration: none;
color: #777;
display: block;
padding: 10px;
}
#nav ul li a:hover {
color: #fff;
}
* html #nav ul li { width: 1%; }
* html #nav ul li a { height: 1%; }
nav ul li a:hover { background: #394d65; }
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {height: 1%;}