Question

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

菜单示例位于[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%;
}

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

Answer 2

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

}

<li>未填写CSS子菜单</ul> </li>中<ul>的空格

2 个答案: