Nav bar problem: Children show as active when parent is active

Hi everyone,

I’m building my first website (and a whole new theme for it) and I’m having this problem that I really have tried to solve on my own but I can’t find the way.

I made the menu using the Dashboard, not my own html, and it works perfectly, I have pages and categories on it. Two of the categories have children and here comes the problem: when I am in a category that has children, the category shows as active in the navbar (as it should) but also its children and gran-children show as active, which I don’t want to happen.

How can I change that?

This is my website: https://www.deviatge.org
This is the CSS for my nav-bar:

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
.main-nav{
    border:1px solid #ccc;
    border-width:1px 0;
    height: 50px;
    line-height: 50px;
    list-style:none;
    text-align:center;
    margin:0 0 80px;
    padding:0;
    font-family: Montserrat, sans-serif;
    background: #009978;
}

.main-nav ul {
padding: 0px;
}

.main-nav li{
    display:inline-block;
    position: relative; /* this is needed in order to position sub menus */
    padding: 0 10px;
}

.main-nav a{
    display:inline-block;
    padding:0 10px;
    text-decoration: none;
    color: #FFFFFF;
    text-transform: uppercase;
    font-size: 14px;
}

.main-nav .menu .current-menu-item a {
    color: #000;
    background: #009978;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
}

.main-nav .current_page_item a, .main-nav a:hover {
    color: #000;
    background: #009978;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
}

.main-nav ul ul { /* this targets all sub menus */
    display: none; /* hide all sub menus from view */
    background: #009978;
    position: absolute;
    top: 50px; /* this should be the same height as the top level menu -- height + padding + borders */
    padding: 0px;
}

.main-nav ul ul li { /* this targets all submenu items */
    float: none; /* overwriting our float up above */
    width: 180px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
    display:block;
}

.main-nav ul ul li a { /* target all sub menu item links */
    padding: 5px 5px; /* give our sub menu links a nice button feel */
    font-size: 12px;
    width: 160px;
}

.main-nav ul li:hover > ul {
    display: block; /* show sub menus when hovering over a parent */
}

.main-nav ul ul li:hover > ul {
    font-size: 11px;
}

.main-nav ul ul li ul {
    /* target all second, third, and deeper level sub menus */
    left: 180px; /* this needs to match the sub menu width set above -- width + padding + borders */
    top: 0; /* this ensures the sub menu starts in line with its parent item */
}

Thanks!!