Html 菜单栏不整洁_Html_Css - Fatal编程技术网

Html 菜单栏不整洁

html css

Html 菜单栏不整洁,html,css,Html,Css,我想做一个菜单栏。这是我的密码： <html> <head> <style> #reportingmenunav { margin: 0; padding: 0; } #reportingmenunav ul { margin: 0; padding: 0; line-height: 30px; } #reportingmenunav li { margin: 0; padding: 0; list

我想做一个菜单栏。这是我的密码：

<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>


#报告梅努纳{
保证金：0；
填充：0；
}
#报告Menuna ul{
保证金：0；
填充：0；
线高：30px；
}
#李美楠报道{
保证金：0；
填充：0；
列表样式类型：无；
边框：1px纯黑；
宽度：50px；
}

A1





B1

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

A2和A3边界比A1和B1厚

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

使用此选项，代码中有一个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>


#报告梅努纳{
保证金：0；
填充：0；
}
#报告Menuna ul{
保证金：0；
填充：0；
线高：30px；
}
#李美楠报道{
保证金：0；
填充：0；
列表样式类型：无；
边框：1px纯黑；
宽度：50px；
}

A1



B1

试试这个：

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;
}

#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;
}

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>