Question

我一直在练习我的菜单css技能并遇到了不必要的填充情况。＆＃34; test2＆＃34;的下拉菜单和＆＃34; test3＆＃34;在菜单中，文本左侧有填充。我不知道是什么原因造成的。有什么建议吗？

由于

HTML

<nav role="navigation">
<ul>
   <li id="active"><a href="">test1</a></li>
   <li><a href="">test2</a>
      <ul>
         <li><a href="">subtest2</a></li>
         <li><a href="">subtest2</a></li>
         <li><a href="">subtest2</a></li>
      </ul>
   </li>
      <li><a href="">test3</a>
      <ul>
         <li><a href="">subtest3</a></li>
         <li><a href="">subtest3</a></li>
         <li><a href="">subtest3</a></li>
      </ul>
   </li>
   <li><a href="">test4</a></li>
   <li><a href="">test5</a></li>
   <li><a href="">test6</a></li>
</ul>
</nav>

CSS

nav {
position : relative;
text-align : center;
margin : 0px auto;
top : 0;
left : 0;
right : 0;
bottom : 0;
width : 100%;
z-index : 1;
}

nav ul {
list-style : none;
position : relative;
display : inline-table;
margin : 0px auto;
}

nav ul li {
float : left;
transition : all 0.2s ease-in-out;
}

nav ul li:hover {
background : rgba(0, 0, 0, 0.15);
}

nav ul li:hover > ul {
display : block;
}

nav ul li {
transition : all 0.2s ease-in-out;
}

nav ul li a {
display : block;
padding : 30px 20px;
color : #222;
font-size : 0.9em;
letter-spacing : 1px;
text-decoration : none;
text-transform : uppercase;
}

nav ul ul {
display : none;
background : #fff;
position : absolute;
top : 100%;
box-shadow : -3px 3px 10px -2px rgba(0, 0, 0, 0.1);
border : rgba(0, 0, 0, 0.1) solid 1px;
}

nav ul ul li {
float : none;
position : relative;
}

nav ul ul li a {
padding : 15px 30px;
border-bottom : 1px solid rgba(0, 0, 0, 0.05);
}

nav ul ul ul {
position : absolute;
left : 100%;
top : 0;
}

#active {
    background: rgba(0, 0, 0, 0.15)
}

Answer 1

定义

nav ul ul{
 padding:0;
}

<强> demo

菜单：不需要的填充

1 个答案: