드롭다운 메뉴의 아이콘에 배경색이 칠해지지 않아요

예... 제목 그대로입니다 ㅠㅠ 

위를 보시면 드롭다운 메뉴가 있습니다... 아이콘이 음표 그림이고 백그라운드를 로즈쿼츠색으로 지정했는데요... 

왜 리스트인데... 리스트 스타일에는 배경색이 씌워지지 아니하는걸까요... 

아래처럼 배경색을 지정하려고 했는데 뭔 개짓을 해도 위에처럼 되는 상황입니다. 

해당 부분 HTML이랑 CSS 소스는 다음과 같습니다. 

(HTML)

<nav class="link">
<ul class="menu">
    <li><a href="#">menu 1</a>
        <ul class="sub">
            <li><a href="#">submenu 1</a></li>
            <li><a href="#">submenu 2</a></li>
            <li><a href="#">submenu 3</a></li>
        </ul>
    </li>
    <li><a href="#">menu 2</a>
        <ul class="sub">
            <li><a href="#">submenu 1</a></li>
            <li><a href="#">submenu 2</a></li>
            <li><a href="#">submenu 3</a></li>
        </ul>
    </li>
    <li><a href="#">menu 3</a>
        <ul class="sub">
            <li><a href="#">submenu 1</a></li>
            <li><a href="#">submenu 2</a></li>
            <li><a href="#">submenu 3</a></li>
        </ul>
    </li>
        <li><a href="#">menu 4</a>
        <ul class="sub">
            <li><a href="#">submenu 1</a></li>
            <li><a href="#">submenu 2</a></li>
            <li><a href="#">submenu 3</a></li>
        </ul>
    </li>
</ul>
</nav>

(CSS)

/*header*/
nav {width:100%;margin:auto 0px;position:fixed;font-size:14pt;height:8%;top:0px; left:0px;z-index:99;background-color:#f7cac9;}
nav ul {list-style-type:none;margin:0;padding:0;}
nav ul.menu li {float:left;width:179px;height:48px;list-style-image:url('music.png');}
nav ul.menu li a {display:inline-block;width:100%;height:100%;line-height:48px;text-indent:30px;text-decoration:none;background-color:#f7cac9;color:#91a8d1;}
nav ul.menu li a:hover {color:black;}
nav ul.menu:after {height:0;visibility:hidden;content:".";display:block;clear:both;margin:0;padding:5px;}

+list-style-position을 inside로 하면 더 괴악해지네요 ㄷㄷ 

저거 적용하면 

*

 메뉴

이런 식으로 변형됩니다...