1

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

到目前为止，我尝试了这段代码：

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>

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

这是使用 Internet Explorer 的图片截图：

IE

使用谷歌浏览器时：

铬合金

我无法继续：（任何建议为什么下拉菜单不起作用以及为什么使用其他浏览器显示不同？有没有办法编写 CSS 下拉菜单，它会在任何浏览器上显示相同？提前致谢。

4

5 回答 5

3

JSFIDDLE

屏幕截图：

在此处输入图像描述

使用正确的 HTML 好友：

<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：

li ul{
    display:none;
}

li:hover ul{
    display:block;
}
于 2013-08-19T10:03:25.793 回答
1

像这样

请输入 ul

  • 子菜单

    • 演示

    HTML

    <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

     *{
        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
    {

        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;
    }
li ul{
    display:none;
}

li:hover ul{
    display:block;
}

    演示2

    演示3

    于 2013-08-19T10:05:32.910 回答
    0

    你需要做三件事..

    1.HTML中的更正，其中有'li'标签和孩子'ul'与id =“sub1”。你需要把它写成

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

    // 有一个拼写错误。你在 'ul' 之前关闭了 'li'。最后应该关闭。

    1. 您需要为 sub1 菜单显示：无。

      li ul{ 显示：无；}

    2. 然后在悬停“li”时显示它

      li:hover ul{ 显示:块; }

    已编辑：将其写在样式标签中....

    *{
            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
        {
            list-style-type: none;<!-- sets bullets to none -->

        }

        ul#navmenu li
        {
            width: 125px;
            text- align: center;
            float: left;
            margin-right: 4px;
            background-color: #FFF;
            border: 1px solid #CCC;
            border-radius: 5px;
        }

        ul#navmenu a
        {
            text-decoration: none;
            display: block; <!-- this code makes the link a button instead  pointing specifically on the link -->
            width: 125px;                
            line-height: 25px;

        }
    ul#navmenu li:hover > a
        {
         background-color: #CFC; 
        }
    li ul{
        display:none;
        left: -40px;
        position: relative;
    }        
    li:hover ul{
        display:block;

    }
    ul#sub1 li:hover{
        background-color:red; 
    }

    试试看

    于 2013-08-19T10:32:46.717 回答
    -1

    您的 html 使用错误，ul#sub1应该是<li>

    <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>
    于 2013-08-19T10:05:55.737 回答
    -1

    您必须将 ul 标签放在子菜单中。

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

     *{
        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
    {

        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;
    }
li ul{
    display:none;
}

li:hover ul{
    display:block;
}

    试试这个它肯定会工作......

    于 2021-10-20T02:36:54.813 回答