서브메뉴를 눌렀을 때 배경이 같이 생겨서 나와요...

A-3을 연습하고 있는데...

서브메뉴에 마우스를 오버하면 저렇게 뒷 배경도 일부분 같이나와서 이미지를 가려버리는 현상이 생깁니다.

도대체 왜 이러는걸까요ㅠㅠ...?

html, css 첨부 드립니다...

        <div class="header">
            <div class="logo">
                <a href="#none"><img src="image/logo.png"></a>
            </div>
            <div class="navi">
                <ul class="menu">
                    <li>
                        <a href="#none">회사소개</a>
                        <div class="sub-menu">
                            <a href="#none">인사말</a>
                            <a href="#none">조직구성도</a>
                            <a href="#none">오시는길</a>
                        </div>
                    </li>
                    <li>
                        <a href="#none">사업영역</a>
                        <div class="sub-menu">
                            <a href="#none">전원주택</a>
                            <a href="#none">도시재생</a>
                            <a href="#none">인테리어</a>
                        </div>
                    </li>
                    <li>
                        <a href="#none">입주정보</a>
                        <div class="sub-menu">
                            <a href="#none">입주단지</a>
                            <a href="#none">입주캘린더</a>
                        </div>
                    </li>
                    <li>
                        <a href="#none">고객센터</a>
                        <div class="sub-menu">
                            <a href="#none">공지사항</a>
                            <a href="#none">건축상담</a>
                            <a href="#none">홍보자료실</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

/* 네비게이션 */
.header .navi {
    float: right; 
    margin-top: 50px; 
    margin-right: 25px;}

.menu li {float: left;}
.menu li > a {
    padding: 7px; 
    border: 1px solid #000; 
    width: 180px; 
    display: inline-block; 
    text-align: center; 
    box-sizing: border-box;
    transition: 0.5s;}
.menu li > a:hover {background-color: #000; color: #fff;}

.sub-menu {border: 1px solid #000; }
.sub-menu a {display: block; padding: 5px; text-align: center; transition: 0.5s;}
.sub-menu a:hover {background-color: #000; color: #fff;}