메뉴 hover display:none display:block 으로 css로 수정하려면 어떻게해야하나요..

http://sejinsign.co.kr/main/index.php

해당 페이지 맨상단에 고객센터가 있습니다. 마우스오버시 메뉴가여러개 나와야하는데 안되네요..

<style>

.top_mypage_cont{float:right; position:relative; margin:16px 0 0 0px; line-height:1; z-index:150;}
.top_mypage_cont .txt_bar{display:inline-block; width:1px; height:10px; margin:0 0 0 10px; background:#dedede; vertical-align:-1px}
.top_mypage_cont> li{float:left; position:relative;}
.top_mypage_cont > li strong{color:#dd3d42;}
/* join 캡션 */
.top_mypage_cont > li .accent span,
.top_mypage_cont > li .accent strong{display:inline-block; min-width:40px; height:16px; color:#ffffff; font-size:11px; letter-spacing:-1px; line-height:16px;
    background:url("../../img/common/bg/bg_accent.png") no-repeat;}
.top_mypage_cont > li .accent{display:block; overflow:hidden; position:absolute; left:50%; top:19px; width:160px; height:23px; padding:6px 0 0 0; margin-left:-80px; text-align:center; z-index:40;
    background:url("../../img/common/bg/bg_accent.png") no-repeat -68px -44px;}
.top_mypage_cont > li .accent span{padding-right:4px; background-position:right 0;}
.top_mypage_cont> li .accent strong{padding-left:3px; background-position:0 0;}

/* 마이페이지 레이어 */
.top_mypage_cont span { float:left; height:26px; width:70px; line-height:15px; font-size:12px; font-weight:900;   }
.top_mypage_cont ul li a{height:15px; text-align:center;}
.top_mypage_cont > a { position: relative; padding:0 10px;  font-size:12px; background:url("../_mplshop/images/ico_bar.gif") no-repeat 0 1px; }
.top_mypage_cont{display:inline-block;}
.top_mypage_cont .top_mypage_tit{display:block; margin-top:-1px;}
.top_mypage_cont .top_mypage_tit a{ position: relative;  display:inline-block; padding:0 10px; color:#000000; font-size:12px; background:url("../_mplshop/images/ico_bar.gif") no-repeat 0 1px;  /*padding:4px 25px 4px 14px;*/}
.top_mypage_cont .top_mypage_tit a:hover>ul{display:block;}
.top_mypage_cont ul{display:block; position:absolute; top:25px; left:-10PX; width:95px; padding:3px 0 3px 0; border:1px solid #999999; background:#ffffff; z-index:40;}
.top_mypage_cont li{}
.top_mypage_cont li a{display:block; padding:6px 5px 7px 10px; }

.top_mypage_cont li a span:hover{ color:#ffffff;}
.top_mypage_cont .sub li a:hover{text-decoration:none;  background:#dd3d42; }
/*.top_mypage_cont a:hover {color:#ff0000;}*/
.top_mypage_cont a:hover .sub{display:block; width:600px; backgoround:black; border:1px solid red;}
.top_mypage_cont + .txt_bar{margin:0;}

</style>

    <div class="top_mypage_cont">
                        <span class="top_mypage_tit"><a href="../service/notice.php">고객센터</a></span>
                        <ul class="sub" style="display:none;">
                          <li><a href="../mypage/order_list.php"><span>주문목록</span></a></li>
                         <li><a href="../mypage/index.php"><span>마이페이지</span></a></li>
                         <li><a href="../mypage/wish_list.php"><span>찜리스트</span></a></li>
                         <li><a href="../board/write.php?&bdId=goodsqa"><span>1:1문의</span></a></li>
                         <li><a href="../board/view.php?&bdId=notice&sno=16"><span>통장사본</span></a></li>
                         <li><a href="../board/view.php?&bdId=notice&sno=15"><span>사업자등록증</span></a></li>
                         <li><a href="../board/view.php?&bdId=notice&sno=24"><span>거래명세표</span></a></li>
                         <li><a href="../board/view.php?&bdId=notice&sno=25"><span>견적서</span></a></li>
                         <li><a href="../board/view.php?&bdId=notice&sno=8"><span>화물&퀵</span></a></li>
                        </ul>
                    </div>    

해당이미지는 임의대로    <ul class="sub" style="display:block;"> 이렇게 해놓은상태입니다.

ㅜㅜ 어케해야 마우스오버시 저렇게 나타날수있을까요..