navbar

I’m having an issue with the navbar in this theme. I’ve looked through the topics here and haven’t seen anything with my exact issue. At first i was having a problem where certain items on my nav bar would display vertically when clicked on instead of staying horizontal. I fixed that problem, but now my menu items overlap eachother. I’ve been digging through the style.css for a few days now and can’t figure out how to correct this.

I should mention i am a total css newb. to correct this issue with the menu items displaying vertically i changed all three instances of “display” here from block to inline-block and that’s when the overlapping started:

.nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none; }
  .nav:before, .nav:after {
    content: " ";
    display: inline-block; }
  .nav:after {
    clear: both; }
  .nav > li {
    position: relative;
    display: inline-block; }
    .nav > li > a {
      position: relative;
      display: inline-block;
      padding: 10px 15px; }

I’ve tried changing them all back to block and then changing them to inline block one at a time to see if i could correct both issues, but to no avail. Any suggestions would be greatly appreciated.