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;
    }

HTML-CSS菜单不工作子菜单

1 个答案: