html - 使用子菜单实现菜单

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