个人中心
gpt4 book ai didi

html - 使用 css 和 html 的菜单栏

转载 作者：行者123 更新时间：2023-11-28 08:19:46 24 4
gpt4 key购买 nike

我一直在尝试创建一个菜单栏。但问题是我无法获得主菜单项下方的子菜单，而是它们显示与主菜单项对齐。有人建议对列表项使用 position:relative 但它没有帮助。这是我的代码:

    <!doctype html>
<html>
    <head>

        <style>

        *{
            margin:0px;
            padding:0px;
        }

        body{

            padding:50px;
            font-family:verdana;

        }

        /*-------- Navigation menu-----------------*/
        /*========================================*/


        ul#mainitem , ul.sub1 , ul.sub2{
            list-style-type:none;
        }

        ul#mainitem li{
            outline: 1px solid red;
            width:115px;
            text-align:center;
            position: relative;
            float:left;
        }

        </style>

    </head>

    <body>

        <div class="menu">
            <ul id="mainitem">

                <li><a href="#"> Item1 </a></li>
                <li><a href="#"> Item2 </a></li>
                <li><a href="#"> Item3 </a></li>
                    <ul class="sub1">
                        <li><a href="#"> Item3.1 </a></li>
                        <li><a href="#"> Item3.2 </a></li>
                            <ul class="sub2">
                                <li><a href="#"> Item3.2.1 </a></li>
                                <li><a href="#"> Item3.2.2 </a></li>
                                <li><a href="#"> Item3.2.3 </a></li>
                            </ul>
                        <li><a href="#"> Item3.3 </a></li>
                    </ul>
                <li><a href="#"> Item4 </a></li>
            </ul>


        </div>

    </body>


</html>

谁能帮我解决这个问题!谢谢!

最佳答案

JSFIDDLE

您需要更改您的 HTML:

<div class="menu">
    <ul id="mainitem">
        <li> <a href="#"> Item1 </a>

            <ul class="sub1">
                <li><a href="#"> Item1.1 </a>

                </li>
                <li><a href="#"> Item1.2 </a>

                </li>
            </ul>
        </li>
        <li> <a href="#"> Item2 </a>

            <ul class="sub1">
                <li><a href="#"> Item2.1 </a>

                </li>
                <li><a href="#"> Item2.2 </a>

                </li>
            </ul>
        </li>
        <li> <a href="#"> Item3 </a>

            <ul class="sub1">
                <li><a href="#"> Item3.1 </a>

                </li>
                <li><a href="#"> Item3.2 </a>

                </li>
            </ul>
        </li>
        <li><a href="#"> Item4 </a>

            <ul class="sub1">
                <li><a href="#"> Item4.1 </a>

                </li>
                <li><a href="#"> Item4.2 </a>

                </li>
            </ul>
        </li>
    </ul>
</div>

然后这是菜单的 CSS:

ul#mainitem, ul.sub1, ul.sub2 {
    list-style-type:none;
}
ul.sub1, ul.sub2 {
    position: absolute;
}
ul.sub1 li, ul.sub2 li {
    padding: 20px 0;
    position: relative;
    outline: 1px solid green;
    width: 100%;
    display: inline-block;
}
ul#mainitem > li {
    outline: 1px solid red;
    width:115px;
    text-align:center;
    position: relative;
    float:left;
}

关于html - 使用 css 和 html 的菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28817535/

24 4 0
文章推荐： php - 我需要使用 PHP 在电子邮件中从我的应用程序中获取一个数组
文章推荐： javascript - 将 for 循环迭代器值绑定(bind)到 Javascript 中的回调函数？
文章推荐： javascript - 我如何拥有不同的导航栏颜色？
文章推荐： html - Bootstrap 中的响应式可滚动框架