6

我试图制作一个简单的 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>
4

4 回答 4

7

尝试这个：

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

小提琴

问题是您的菜单 ul 是可见的（总是），但是由于 this 规则的选择器，它们里面的 li 是不可见的（总是）ul#sub1 li。

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

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

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

小提琴

于 2013-09-18T03:07:05.520 回答
3

不要对此类事情使用可见性属性。试试下面的代码，它会解决你的问题：

你的 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：（在包含下拉列表而不是 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

于 2013-09-18T04:56:54.997 回答
2

这里有完整的 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

于 2014-12-15T20:27:10.957 回答
-1

应用这个....

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

应用这个..不要使用额外的类或 id。

于 2016-11-22T21:26:21.880 回答