开始HTML**

<代码><；a href="；"；>；ابحث في الموقع</a><；UL类="；子菜单"；>；<；Li>；<；a href="；"；>；<；/a>；<；/Li>；<；Li>；<；a href="；"；>；<；/a>；<；/Li>；<；Li>；<；a href="；"；>；<；/a>；<；/Li>；<；/UL>；<；/Li>；<；/UL>；

启动**CSS

<代码>UL{边距：0；填充：0；列表样式：无；}a{text-decoration：none；}.导航{宽度：300px；边距：20px自动；}.menu{位置：相对；}.子菜单{位置：绝对；宽度：200px；方框阴影：0 1px 1px RGBA（0，0，0，.5）；填充：5px；显示：无；}

    <a href="">ابحث في الموقع</a>
        <ul class="submenu">
        <li><a href="">الرئيسيه</a></li>
        <li><a href="">تواصل معنا </a></li>    
        <li><a href="">المدونه </a></li>    
        </ul>
    </li>
</ul>

顺晟科技：

因为你使用了：hover，它又消失了。要切换子菜单，您可以使用JavaScript来更改类。

所以添加 ul{margin: 0; padding: 0; list-style: none;} a{text-decoration: none;} .navigation{width:300px; margin: 20px auto;} .menu{position: relative;} .submenu{position: absolute; width: 200px; box-shadow: 0 1px 1px rgba(0, 0, 0, .5); padding: 5px; display: none;} 添加到要单击的元素，并将ID添加到要切换的元素类： .menu:hover .submenu{display: block;} .

然后是您的函数（在其他元素下，以确保它们在脚本之前加载）：

<代码><；脚本>；函数myFunction（）{var element=document.getElementById（"；子菜单"；）；element.ClassList.toggle（"；myStyle"；）；}<；/脚本>；

请看这里的例子。