小编use*_*880的帖子

CSS下拉菜单悬停效果

我试图制作一个简单的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>
Run Code Online (Sandbox Code Playgroud)

html css

6
推荐指数
1
解决办法
6万
查看次数

标签 统计

css ×1

html ×1