CSS: sub-menu

At this moment I have this:

.main-navigation .main-nav ul li a,
.menu-toggle {
      line-height: 30px;
}

.main-navigation ul ul {
    top: 30px;
}

.navigation-search input {
    height: 30px;
    line-height: 0;
}

The sub-menu is also 30px heigh, but I want that sub-menu is shorter e.g. 20px. How can I change this?

I’ve tried this:

.sub-menu,
.sub-menu a {
line-height: 20px !important;
}

But unfortunately the height of the sub-menu is still 30px.

Thanks in advance!