menu li {display：-webkit-inline-box; position：relative;}

Question

我是HTML和CSS的初学者。当我练习CSS下拉菜单时，子菜单是内联的，没有正确对齐。让我知道我所做的错误并纠正错误。

#menu{ list-style-type:none; margin:0; padding:0; }
#menu li{ display:inline; }
#menu li a{ text-decoration:none; background-color:#FFAAFF; color:Black; display:inline-block; padding: 20px 40px; }
#menu li a:hover{ background-color:#AA7FFF; color:White; }

.submenu{ display:none;position:absolute; top:66px; margin:0; padding:0; }
.submenu li a{ display:inline-block; }
#menu li:hover .submenu{ display:inline-block; }

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Drop down menu</title>
    <link href="login.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <ul id="menu">
        <li><a href="#">Menu 1</a>
            <ul class="submenu">
                <li><a href="#">Sub menu 1.1</a></li>
                <li><a href="#">Sub menu 1.2</a></li>
                <li><a href="#">Sub menu 1.3</a></li>
                <li><a href="#">Sub menu 1.4</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 2</a>
            <ul class="submenu">
                <li><a href="#">Sub menu 2.1</a></li>
                <li><a href="#">Sub menu 2.2</a></li>
                <li><a href="#">Sub menu 2.3</a></li>
                <li><a href="#">Sub menu 2.4</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a>
            <ul class="submenu">
                <li><a href="#">Sub menu 3.1</a></li>
                <li><a href="#">Sub menu 3.2</a></li>
                <li><a href="#">Sub menu 3.3</a></li>
                <li><a href="#">Sub menu 3.4</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 5</a></li>
     </ul>     
</body>
</html>

Answer 1

HI现在添加此css定义您的.submenu和#menu li此css

.submenu{    top: 100%;left: 0;}

#menu li {
    display: inline-block;
    position: relative;
}

＆＃13;

#menu{ list-style-type:none; margin:0; padding:0; }
#menu li{ display:inline; }
#menu li a{ text-decoration:none; background-color:#FFAAFF; color:Black; display:inline-block; padding: 20px 40px; }
#menu li a:hover{ background-color:#AA7FFF; color:White; }

.submenu{ display:none;position:absolute; top:66px; margin:0; padding:0; }
.submenu li a{ display:inline-block; }
#menu li:hover .submenu{ display:inline-block; }
.submenu{    top: 100%;left: 0;}

#menu li {
display: inline-block;
position: relative;
}

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Drop down menu</title>
    <link href="login.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <ul id="menu">
        <li><a href="#">Menu 1</a>
            <ul class="submenu">
                <li><a href="#">Sub menu 1.1</a></li>
                <li><a href="#">Sub menu 1.2</a></li>
                <li><a href="#">Sub menu 1.3</a></li>
                <li><a href="#">Sub menu 1.4</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 2</a>
            <ul class="submenu">
                <li><a href="#">Sub menu 2.1</a></li>
                <li><a href="#">Sub menu 2.2</a></li>
                <li><a href="#">Sub menu 2.3</a></li>
                <li><a href="#">Sub menu 2.4</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a>
            <ul class="submenu">
                <li><a href="#">Sub menu 3.1</a></li>
                <li><a href="#">Sub menu 3.2</a></li>
                <li><a href="#">Sub menu 3.3</a></li>
                <li><a href="#">Sub menu 3.4</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 5</a></li>
     </ul>     
</body>
</html>

＆＃13;

Answer 2

menu li {display：-webkit-inline-box; position：relative;}

使用此CSS 并且必须检查所有浏览器的显示

你能纠正我的错误吗？

2 个答案:

menu li {display：-webkit-inline-box; position：relative;}