菜单与CSS3对齐

Question

我创建的菜单在左侧具有此边距，但我无法修复，我尝试使用位置和浮点数更改CSS代码，但没有成功。 / p>

  *{margin: 0; paddind:0;}

  body{
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;}

  .menu{
  list-style:none;
  border:1px solid #c0c0c0;
  float:left;}

  .menu li{
  border-right:1px solid #c0c0c0;}

  .menu li a{color:#333; text-decoration:none; padding:5px 10px; display:block;}

  .menu li a:hover{
  background:#333;
  color:#fff;
  -moz-boz-shadow:0 3px 10px 0 #ccc;
  -webkit-box-shadow:0 3px 10px 0 #ccc;
  text-shadow: 0px 0px 5px #fff;}

  .menu li ul{
  position:absolute;
  top:25px;
  left:112px;
  background-color:#fff;
  display:none;}

  .menu li:hover ul{display:block;}

  .menu li ul li{
  border:1px solid #c0c0c0;
  display:block;
  width:150px;}

<nav>
   <ul class="menu">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">O que fazemos?</a>
     <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">SEO</a></li>
      <li><a href="#">Design</a></li>
     </ul>
    </li>
   <li><a href="#">Links</a></li>
   <li><a href="#">Sugestões</a></li>
  </nav>

我需要一个没有空白的菜单，所以它没有这种外观

Answer 1

您在*{...}样式规则上有错字。将paddind更改为padding。

就这样

*{margin: 0; padding:0;}

  body{
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;}

  .menu{
  list-style:none;
  border:1px solid #c0c0c0;
  float:left;}

  .menu li{
  border-right:1px solid #c0c0c0;}

  .menu li a{color:#333; text-decoration:none; padding:5px 10px; display:block;}

  .menu li a:hover{
  background:#333;
  color:#fff;
  -moz-boz-shadow:0 3px 10px 0 #ccc;
  -webkit-box-shadow:0 3px 10px 0 #ccc;
  text-shadow: 0px 0px 5px #fff;}

  .menu li ul{
  position:absolute;
  top:25px;
  left:112px;
  display:none;}

  .menu li:hover ul{display:block;}

  .menu li ul li{
  border:1px solid #c0c0c0;
  display:block;
  width:150px;}

<nav>
   <ul class="menu">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">O que fazemos?</a>
     <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">SEO</a></li>
      <li><a href="#">Design</a></li>
     </ul>
    </li>
   <li><a href="#">Links</a></li>
   <li><a href="#">Sugestões</a></li>
  </nav>