Side bar main menu styling

Hello,

I’m working on a site with a sidebar menu and finding it hard to get the menu working well.

There’s only a few menu items, and a couple of those have sub menu items that visible at all times.

When I inspect the menu, it appears that the span.avia-menu-text areas that are housing the links seem to be getting taller with each menu item, meaning they sit on top of the sub-menu items and make them un-clickable.
Have a look at the screenshots.

This is the menu:

This is inspecting each of the main menu links from the top down:

As you can see, by ‘contact’ the span is so tall it cover s the link above.

I’m pretty sure it’s my messy, bad CSS, which is currently the following:

/* SIDEBAR AND MENU STYLING */

/* show main menu sub options*/
.html_header_left .av-main-nav ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    position: static;
    margin-top: 0px;
    margin-bottom: 20px;
    float: left;
    border: 0;
    background: transparent !important;
    box-shadow: none;
}

/* Sub menu on mobile styling */

@media only screen and (max-width: 768px), (max-height: 650px) { .sub-menu li a {
padding-left: 60px!important;
line-height:16px!important;
}}

/* Burger menu links */

#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li a {
    text-align: center !important;
    font-family: "static",sans-serif;
    font-size: 2.5vw;
    font-weight: 400 !important;
    color: #177F93;
}

#top .av-main-nav ul a { 
  background: transparent !important;
  border: none !important;
}
#top #wrap_all .av-main-nav ul.sub-menu > li > a:hover {
    color: #33D1BD !important;
}

.sub-menu li a{
Font-size: 14px !important;
padding: 2px!important;
line-height:5px!important;
}

@media only screen and (max-width: 768px), (max-height: 650px) { .sub-menu li a {
line-height:20px!important;
}}

What can I do to:
1) get the menu working
2) rewrite the CSS to getting it looking like it does now… but working?

I’ll post a link to the site privately.

Thanks.