Hi there,
might be worth taking a step back.
Remove this CSS:
/*Main Nav Buttons*/
.main-navigation .main-nav ul li a{
padding: 0px;
border-radius: 200px;
border-style: solid;
border-width: 2px;
border-color: #00a0dd;
}
.main-navigation .main-nav ul li a:hover{
color: #fff;
background-color: #00a0dd;
padding: 0px;
border-radius: 200px;
border-style: solid;
border-width: 2px;
border-color: #00a0dd;
}
.main-navigation .main-nav ul li.current-menu-item:hover > a,
.main-navigation .main-nav ul ul li.current-menu-item:hover > a {
border: none;
color: #fff;
background-color: #00a0dd;
padding: 0px;
border-radius: 200px;
border-style: solid;
border-width: 2px;
border-color: #00a0dd;
}
.main-navigation .main-nav ul li{
padding: 10px;
min-width: 200px;
text-align: center;
}
and try adding this:
#site-navigation .main-nav ul li a{
border-radius: 100px;
border-style: solid;
border-width: 2px;
border-color: #00a0dd;
margin: 5px;
text-align: center;
}
#site-navigation .main-nav ul ul li a {
padding: 12px;
}
#site-navigation .main-nav ul li:hover > a {
color: #fff;
background-color: #00a0dd;
}