styling and centering a menu

by audetwebdesign

HTML

<nav>
    <ul>
		<li><a href="/add_contact.php">Add Contact</a></li>
		<li><a href="/view_contact.php">View Contact</a></li>
		<li><a href="/tickets.php">Tickets</a>
			<ul>
				<li><a>TEST</a></li>
			</ul>
		</li>
		<li><a href="/invoices.php">Invoices</a></li>
		<li><a href="/itemised_calls.php">Itemised Calls</a></li>
    </ul>
</nav>

CSS

nav {
	margin: 0 auto; 
	text-align: center;
	border:1px solid black;
}

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
}

nav ul {
	list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: top;
}

nav ul li {
	float: left;
    margin: 0;
    padding: 0;
}

nav ul li:hover a {
	color: #000000;
}

nav ul li a {
	display: block; 
    padding: 10px 15px;
	color: #000000;
    text-decoration: none;
    background-color: pink;
}		
		
nav ul ul {
    border-radius: 0px;
    padding: 0;
	position: absolute;
}

nav ul ul li {
	float: none; 
	border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    position: relative;
}

nav ul ul li a {
	color: #000000;
}

nav ul ul li a:hover {
	color: #666666;
}
		
nav ul ul ul {
	position: absolute;
    top:0;
}