*Afgerond* Dropdown in een Responsive navigatie maken

<nav class="nav">
                <ul>
                    <li><a href="futurehouse.php" class="nav__item">Future House</a></li>
                    <li><a href="#" class="nav__item">Music</a>
                        <ul>
                            <li><a href="tracks.php" class="nav_sub_item">Tracks</a></li>
                            <li><a href="podcast.php" class="nav_sub_item">Podcast</a></li>
                        </ul>
                    </li>
                    <li><a href="artist.php" class="nav__item">Artists</a></li>
                    <li><a href="tour.php" class="nav__item">Events</a></li>
                    <li><a href="#" class="nav__item">Media</a>
                        <ul>
                            <li><a href="Photos.php" class="nav_sub_item">Photos</a></li>
                            <li><a href="videos.php" class="nav_sub_item">Videos</a></li>
                        </ul>
                    </li>
                    <li><a href="contact.php" class="nav__item">Contact</a></li> 
                </ul>
            </nav>

.nav {
  float: right;
  width: 68.7384044527%;
  background: url(images/mainNavShadow.png) no-repeat top center;
  margin-right: -35px;
  position:relative;
}
.nav__item {
  display: inline-block;
  font: 1.5em "Dosis", sans-serif;
  color: #ffffff;
  margin-left: -4px;
  padding: 4.453441% 4.38596491228% 5.5%;
  border-left: 1px solid #050505;
  -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.1);
  -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.1);
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.1);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.nav__item:hover {
  background: #151515;
  color: #082f36;
}
.nav__item.nav__item_active {
  background: #151515;
  color: #082f36;
}
.btn-nav-toggle {
  display: none;
  width: 100%;
  font: bold 1.33333333em "Dosis", sans-serif;
  color: #082f36;
  text-transform: uppercase;
  padding: 1.30208333333%;
  background: #000;
  -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2);
  -moz-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2);
}
.btn-nav-toggle:before {
  content: "";
  display: inline-block;
  margin-right: 7px;
  vertical-align: -3px;
  width: 20px;
  height: 20px;
  background: url(images/responsive-nav-icon.png) no-repeat;
}

ul#navigation li:hover > ul
{
    visibility:visible;
    opacity:1;
}


ul#navigation ul, ul#navigation ul li ul {
    list-style: none;
    margin: 0;
    padding: 0;    
    visibility:hidden;
    position: absolute;
    z-index: 99999;
    background:#f8f8f8;
    box-shadow:1px 1px 3px #ccc;
    opacity:0;
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -o-transition:opacity 0.2s linear, visibility 0.2s linear; 
    transition:opacity 0.2s linear, visibility 0.2s linear;     
}


ul#navigation ul {
    top: 43px;
    left: 1px;
}


ul#navigation ul li ul {
    top: 0;
    left: 181px;
}


ul#navigation ul li {
    clear:both;
    width:100%;
    border:0 none;
    border-bottom:1px solid #c9c9c9;
}


ul#navigation ul li a {
    background:none;
    padding:7px 15px;
    color:#616161;
    text-shadow:1px 1px 0px #fff;
    text-decoration:none;
    display:inline-block;
    border:0 none;
    float:left;
    clear:both;
    width:102px;
}


ul#navigation li a.first {
    border-left: 0 none;
}


ul#navigation li a.last {
    border-right: 0 none;
}