使用子菜单实现菜单

Question

我想创建一个看起来像我创建的图片中的菜单。

我对CSS部分有一些问题。

         <ul>
            <li>
                <a href="#">Header</a>
                <ul>
                    <li>
                        <img src="">
                        <a href="#">test</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Header 2</a>
                <ul>
                    <li><a href="#">test2</a></li>
                    <li><a href="#">test3</a></li>
                    <li><a href="#">test4</a></li>
                </ul>
            </li>
        </ul>

CSS-部分

.plane ul {
list-style-type: none;
padding-left: 20px;
}

.plane ul li {
}

.plane ul li a {
color: #7d7d7d;
text-decoration: none;
}

.plane ul li a:hover {
color: #3a3a3a;
cursor: pointer;
}

.plane ul li a.current {
color: black;
}

.plane ul li ul li {
float: left;
border: 1px solid black;
padding: 5px;
margin: 5px;
width: 125px;
height: 60px;
border-radius: 2px;
}

.plane ul li ul li img {
width: 120px;
height: 40px;
padding-bottom: 5px;
}

.plane ul li ul li:hover {
background-color: #eeeeee;
}

希望你能帮我解决这个问题。它看起来很容易，但我无法弄清楚我做错了什么。

Answer 1

只需添加：

.plane ul  li {
    display:inline-block;
}

DEMO

Answer 2

尝试将列表项目类型从列表项目更改为阻止。

前

.plane ul  li {
    clear:both;
    display:block;
}

然后

.plane ul  li ul li{
     float left;
     clear:none;
 }

经过测试和工作：D