Question

我试图制作一个简单的css下拉菜单。将鼠标悬停在链接上时，我无法实现下拉子菜单。下面是我的html和css规则，谢谢。

    ul#menu li
    {
        position:relative;
        list-style-type:none;
        float: left;
        padding:0px;
        width: 125px;
        height: 25px;
    }
    ul#sub1 li
    {
        position:absolute;
        left:0;
        width:125px;
        visibility: hidden;
    }
    ul#menu li:hover #sub1
    {
        visibility:visible;
    }


    <ul id="menu">
        <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>

Answer 1

试试这个：

ul#sub1 {
    position:absolute;
    left:0;
    width:125px;
    visibility: hidden;
}
ul#menu li:hover #sub1 {
    visibility:visible;
}

<强> Fiddle

问题是您的菜单ul是可见的（始终），但由于此规则ul#sub1 li的选择器，其中的li是不可见的（始终）。

请记住可见性：隐藏隐藏元素但仍占用DOM中的空间，而display：none隐藏元素并将其从页面元素流中取出

此外，你一定不需要在css选择器中使用id，特别是对于这样的菜单。你可以在没有它的情况下实现它，考虑到许多级别菜单的情况，通过使用id，你将无限期地编写选择器。相反，你可以尝试这样的事情。

ul#menu ul {
    padding:0px;
}
ul#menu li {
    position:relative;
    list-style-type:none;
    float: left;
    width: 125px;
}
ul#menu li > ul {
    display: none;
}
ul#menu li:hover > ul {
    display:block;
}

<强> Fiddle

Answer 2

不要使用可见性属性。尝试以下代码，它将解决您的问题：

你的CSS：

ul#menu li{
    float: left;
    list-style-type:none;
    width: 125px;
}
li#sub1 ul{
    display: none;
}
ul#menu li#sub1:hover ul{
    display: block;
}

更新了HTML :(在包含dropdown而不是ul的li上应用id）

<ul id="menu">
    <li><a href="#">Hyperlink 1</a></li>
    <li id="sub1"><a href="#">Hyperlink 2</a>
        <ul> 
            <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>

此外，您可以查看此页面，了解展示和展示效果的工作原理 - http://www.tutorialrepublic.com/css-tutorial/css-visibility.php

Answer 3

这里是完整的HTML + CSS脚本来解决您的问题

<style>
ul#menu li
{
   position:relative;
   list-style-type:none;
   float: left;
   padding:0px;
   width: 125px;
   height: 25px;
}

ul#menu li ul#sub1
{
   background:red;
   display:none;
   padding:0px;
   margin:0px;
   border:0px;
   position:absolute;
   width:230px;
   z-index:200;
}

ul#menu li:hover ul#sub1
{
   display:block;
}

ul#menu li ul a:hover, ul#menu li ul li:hover a
{
   background:green;
   color:#ffffff;
   text-decoration:none;
}
</style>


<ul id="menu">
    <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>

您可以尝试自己进行任何修改： http://www.okeschool.com/code-editor/css/how-to-make-drop-down-menu-with-css-and-image.html

Answer 4

申请这个....

<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
    ul li
    {
        position:relative;
        list-style-type:none;
       /* float: left;*/ /*dont use this for this kind of menu */
       display: inline-block;
        padding:0px;
        width: 125px;
        height: 25px;
        background: yellow;
    }
    #sub1
    {
        
        display: none;
        position:absolute;
    }
    ul li:hover ul#sub1
    {
       /* visibility:visible;*//*dont use this for this kind of menu  */
        display: block; /* use this*/
        right:0;
       
    }


    
</style>

<body>
    <ul>
        <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>
</body>

申请This One ..不要使用额外的课程或id。

CSS下拉菜单悬停效果

4 个答案: