使用 css 和 html 的菜单栏

Question

我一直在尝试创建一个菜单栏。但问题是我无法获得主菜单项下方的子菜单，而是它们显示与主菜单项对齐。有人建议对列表项使用 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>

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

Answer 1

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

Answer 2

JSFiddle:

http://jsfiddle.net/q1ycrfj9/

您希望子菜单位于其父菜单的 li 标记内，并且如果菜单要出现和消失，您希望使用绝对定位。我已经为您完成了下面的第一步，但您需要进行一些清洁和对齐。

HTML

 <body>

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

            <li><a href="#"> Item1 </a></li>
            <li><a href="#"> Item2 </a></li>
            <li><a href="#"> Item3 </a>
                <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>
            <li><a href="#"> Item4 </a></li>
        </ul>


    </div>

</body>

CSS:

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

.sub1{
    width: 115px;
    margin-left: -20px;
    position: absolute;
}


        </style>

使用 css 和 html 的菜单栏

Menubar using css and html

html

css

menubar