HTML-CSS 메뉴 dont work 하위 메뉴

Question

하위 항목이있는 메뉴를 만들었습니다. Urunler 탐색 메뉴를 가리키면 하위 항목이 열리지 만 하위 항목을 가리키면 해당 항목이 손실됩니다. 따라서 나는 원하는 하위 항목을 클릭하거나 열 수 없습니다. 여기

html로 코드 : 여기

<div id="top_menu"> 
<ul id="menu_list"> 
    <li style="padding-right:50px;color:white">Telefon no: +90(312) 1234567</li> 
    <li class="selected"><a href="index.html">Ana Sayfa</a></li> 
    <li><a href="satisdakiler.html">Satıştakiler</a></li> 
    <li><a href="urunler.html">Ürünler</a> 
    <ul class="sub_item"> 
    <li><a href="#">Dekoratif Ürünler</a></li> 
    <li><a href="#">Hediyelik Ürünler</a></li> 
    <li><a href="#">Heykeller</a></li> 
    <li><a href="#">Promosyon Ürünleri</a></li> 
    <li><a href="#">Rolyef</a></li> 
    <li><a href="#">Işıklı Taşlar</a></li> 
    <li><a href="#">Maketler</a></li> 
    </ul> 

    </li><!--end of urunlers li--> 
    <li><a href="modelvekalip.html">Model ve Kalıp</a></li> 
    <li><a href="kaplama.html">Kaplama</a></li> 
    <li><a href="hakkimizda.html">Hakkımızda</a></li> 
    <li><a href="iletisim.html">İletişim</a></li> 
    </ul> 
    </div> <!--End of top_menu --> 

CSS 코드 :

#top_menu { 
margin-top:0px; 
height:50px; 
background-color:#242424; 
width:%100; 
padding-top:30px; 
padding-left:-20px; 
position:relative; 
} 

    #menu_list { 
list-style:none; 
width:1000px; 
font-size:14px; 
margin-left:-30px; 

} 

    #menu_list li{ 
color:#2C2C2C; 
display:inline; 
padding-right:40px; 

} 



    #menu_list li a:hover{ 
color:#7F7F7F; 
    text-decoration:none; 
} 



    a{/* unvisited link */ 
color:#D3D3D3; 
text-decoration:none; 
} 

    /*a:hover {color:#7F7F7F; 
    text-decoration:none;} /* mouse over link */ 

    .selected a{ 
color:#CC3300; 
} 
    .selected .sub_item li a{ 
color:#D3D3D3; 
} 
    .selected .sub_item li a:hover{ 
color:#7F7F7F; 
} 


    .sub_item { 
display: none; 
height:230px; 
width:135px; 
} 

    .sub_item li a { 
text-align:center; 
} 

    #menu_list li:hover ul.sub_item { 
display: block; 
} 

    #menu_list .sub_item { 
display: none; 
position: absolute; 
top: 82px; 
left: 430px; 
padding: 10px; 
z-index: 90; 
    } 
    #menu_list li:hover ul.{ 
display: block; 
border: 1px solid #ececec; 
    } 
    .sub_item li a { 
display:block; 
} 
    .sub_item { 
display:block; 
position:absolute; 
background-color:#242424; 
} 

Answer 1

demo

CSS는

remove top: 82px; 

    #menu_list .sub_item { 
display: none; 
position: absolute; 
margin:0; 
left: 430px; 
padding: 10px; 
z-index: 90; 
    }