CSS下拉菜单不起作用 [英] CSS Drop Down Menu Not working

问题描述

我正在学习CSS的基础知识，并试图创建一个下拉菜单，我尝试使用普通CSS创建一个下拉菜单，但是它不起作用.

i'm learning the basic of CSS and trying to create a dropdown menu, i tried creating a dropdown menu using plain CSS, but it's not working.

到目前为止，我尝试了以下代码:

So far I tried this code:

CSS

<!-- because of the * default code it takes out all margin and padding or idententation -->
*{
    margin: 0px;
    padding: 0px;}

body
{
    font-family: verdana;
    background-color: ABC;
    padding: 50px;
}

h1
{
    text-align: center;
    border-bottom: 2px solid #009;
    margin-bottom: 50px;
}

/*rules for navigation menu */
/*============================================*/
ul#navmenu, ul.sub1
{
    list-style-type: none;<!-- sets bullets to none -->

}

ul#navmenu li
{
    outline: 1px solid red;
    width: 125px;
    text- align: center;
    position: relative;
    float: left;
    margin-right: 4px;
}

ul#navmenu a
{
    text-decoration: none;
    display: block; <!-- this code makes the link a button instead  pointing specifically on the link -->
    width: 125px;
    height: 25px;
    line-height: 25px;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 5px;
}

ul#navmenu .sub1 li
{

}

ul#navmenu .sub1 a 
{
    margin-top: 0px;
}

ul#navmenu li:hover > a
{
 background-color: #CFC; <!-- sets all link color when hovering to yellow  -->
}

ul#navmenu li:hover a: hover
{
    background-color: #FF0;  <!-- sets all link color when hovering to yellow  -->
}

ul#navmenu ul.sub1
{
    display: none;
    position: absolute;
    top: 26px;
    left: 0px;

}

ul#navmenu li:hover .sub1
{
    display: block;
}

HTML

<h1>Navigation Menu</h1>

<ul id="navmenu">
<li><a href="#">Hyperlink 1</a></li>
<li><a href="#">Hyperlink 2</a></li>
    <ul id="sub1"> 
        <li><a href="#">Hyperlink 2.1</a></li>
        <li><a href="#">Hyperlink 2.2</a></li>
    </ul>
<li><a href="#">Hyperlink 3</a></li>
<li><a href="#">Hyperlink 4</a></li>
</ul>

</body>
</html>

下拉菜单不起作用，它没有隐藏子菜单，我不知道为什么.

The dropdown menu is not working, it's not hiding the sub menus, i don't know why.

这是使用Internet Explorer的图片屏幕截图:

Here is the picture screenshot using Internet Explorer:

IE

使用Google Chrome浏览器时:

While using Google Chrome:

Chrome

我无法继续:(任何建议，为什么下拉菜单不起作用以及为什么使用其他浏览器显示的菜单有所不同? 有没有一种方法可以编码CSS下拉菜单，使其在任何浏览器上都显示相同的内容?预先感谢.

I can't move on:( Any suggestion why dropdown menu is not working and why it's showing differently using other browsers? Is there a way on how to code CSS dropdown menu where it will show the same on any browser? Thanks in advance.

推荐答案

JSFIDDLE

屏幕截图:

使用正确的HTML好友:

Use correct HTML buddy:

<ul id="navmenu">
<li><a href="#">Hyperlink 1</a></li>
<li><a href="#">Hyperlink 2</a>
    <ul id="sub1"> 
        <li><a href="#">Hyperlink 2.1</a></li>
        <li><a href="#">Hyperlink 2.2</a></li>
    </ul>
</li>
<li><a href="#">Hyperlink 3</a></li>
<li><a href="#">Hyperlink 4</a></li>
</ul>

然后，添加以下CSS:

And, add this CSS:

li ul{
    display:none;
}

li:hover ul{
    display:block;
}

这篇关于CSS下拉菜单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！