Question

我想制作菜单栏。这是我的代码：

<html>
<head>
<style>
#reportingmenunav {
    margin: 0;
    padding: 0;
}

#reportingmenunav ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
}

#reportingmenunav li {
   margin: 0;
   padding: 0;
   list-style-type: none;
   border: 1px solid black;  
   width: 50px;
}
</style>
</head>

<body>
<div id="reportingmenunav">
    <ul>
       <li>A1
            <ul>
                <li><a href="#">A2</a></li>
                <li><a href="#">A3</a></li>
           </ul>        
      </li>
      <li>B1</li>
   </ul>
</div>
</body>
</html>

从上面的代码中，我得到以下输出：

A2和A3边框比A1和B1厚。

如何清除它们以使它们整洁（如A1和B1）？

Answer 1

试试这个：

<强> CSS：

#reportingmenunav {
    margin: 0;
    padding: 0;
}

#reportingmenunav ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
}

#reportingmenunav .menu > li {
   margin: 0;
   padding: 0;
   list-style-type: none;
   border: 1px solid black;  
   width: 50px;
}

#reportingmenunav .sub-menu > li {
    border-top: 1px solid black;
}

#reportingmenunav .menu > li:last-child {
    border-top: none;
}

HTML：

<div id="reportingmenunav">
    <ul class="menu">
       <li>A1
            <ul class="sub-menu">
                <li><a href="#">A2</a></li>
                <li><a href="#">A3</a></li>
           </ul>        
      </li>
      <li>B1</li>
   </ul>
</div>

Js fiddle：http://jsfiddle.net/55kq7zkd/

注意：IE9（不是IE8）支持last-child

要支持IE8，您可以使用first-child而不是last-child作为链接： http://jsfiddle.net/55kq7zkd/1/

<强> CSS：

#reportingmenunav {
    margin: 0;
    padding: 0;
}

#reportingmenunav ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
}

#reportingmenunav .menu > li {
   margin: 0;
   padding: 0;
   list-style-type: none;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
   width: 50px;
}

#reportingmenunav .sub-menu > li {
    border-top:1px solid black;
}

#reportingmenunav .menu > li:first-child {
    border-top: 1px solid black;
}

Answer 2

使用此代码中有一个extr ul。

<html>
<head>
<style>
#reportingmenunav {
margin: 0;
padding: 0;
}

#reportingmenunav ul {
margin: 0;
padding: 0;
line-height: 30px;
}

#reportingmenunav li {
margin: 0;
padding: 0;
list-style-type: none;
border: 1px solid black;  
width: 50px;
}
</style>
</head>

<body>
<div id="reportingmenunav">
<ul>
   <li>A1

            <li><a href="#">A2</a></li>
            <li><a href="#">A3</a></li>

  </li>
  <li>B1</li>
</ul>
</div>
</body>
</html>

菜单栏不整洁

2 个答案: