<li> 未在 <ul> CSS 子菜单中填充空格

Question

我正在尝试制作CSS菜单，但我不知道为什么子菜单中的li元素不会填充其父菜单ul

菜单示例位于[http://www.ericsicons.com/css_sample.html]

将鼠标悬停在第3项和第4项上，UL容器有一个绿色边框，那么如何去掉边距。

CSS如下

        .mainmenu {
            border-top: 1px solid black;
            border-left: 1px solid black;
            width: 350px;
            padding:0;
            margin: 0;
        }
        .mainmenu a {
            text-decoration: none;
            padding-top: 10px;
            padding-bottom: 10px;
            display: block; 
            width:100%;
        }
        .mainmenu li:hover {
            background-color: lightskyblue;
        }
        .mainmenu li{
            list-style: none;
            text-align: center;
        }
        .mainmenu > li{
            border-right: 1px solid black;
            border-bottom: 1px solid black;
            display:  inline-block;
            width:80px;
        }
        .mainmenu > li li {
            border-top: 1px solid black;
            border-left: 1px solid black;
        }
        .dropdown{
            position: relative;
        }
        .dropdown:hover > .submenu{
            opacity:1;
        }
        /*submenus*/
        .submenu {
            position: absolute;
            border: 1px solid green;
            opacity:0.0;
            -webkit-transition: opacity 1s ease; 
            -moz-transition: opacity 1s ease; 
            -ms-transition: opacity 1s ease; 
            -o-transition: opacity 1s ease; 
            transition: opacity 1s ease;
        }
        .submenu_first{
            top: 30px;
            left: 0px;
        }
        .submenu_other{
            top: 0px;
            left: 70px;
        }

HTML

<ul class="mainmenu">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li class="dropdown"><a href="#">item 3 ></a>
                <ul class="submenu">
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item 2</a></li>
                    <li><a href="#">item 3</a></li>
                </ul>
     </li>
     <li class="dropdown"><a href="#">item 4 ></a>
                <ul class="submenu">
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item 2</a></li>
                    <li><a href="#">item 3</a></li>
                </ul>
     </li>
</ul>

Answer 1

试试这个：

.submenu {
    padding: 0px;
    width: 100%;
}

您还应该删除.submenu中li上的左边框，因为.submenu ul已经有左边框。

Answer 2

.submenu {
padding: 0px;
margin: 0px;
width: 100%;
display: block;

}