html - 我的下拉菜单没有水平显示，下拉按钮之间有一个空格。任何人？

Question

我的菜单:

<div id='cssmenu'>
   <ul>
      <li class='active'><a href='index.html'><span>Inicio</span></a></li>
      <li><a href='#'><span>Veiculos</span></a>
            <ul id="submenu">
            <li><a href='#'><span>Cadastrar</span></a></li>
            <li><a href='#'><span>Consultar</span></a></li>
               <li><a href='#'><span>Devolver</span></a></li>
           </ul>
      </li>
      <li><a href='#'><span>Sobre</span></a></li>
      <li class='last'><a href='#'><span>Contato</span></a></li>
   </ul>
</div>

我的 CSS:

@import url(http://fonts.googleapis.com/css?family=Capriola);
/* Let's import the lovely google font, please keep this line at the top of your stylesheet */
/* Menu CSS */
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  padding: 0;
  margin: 0;
  line-height: 1;
  font-family: "Capriola", sans-serif;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
  content: "";
  display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
  clear: both;
}
#cssmenu {
  zoom: 1;
  height: 69px;
  background: url(ImagensCSS/bottom-bg.png) repeat-x center bottom;
  border-radius: 2px;
  width: 100%;
}
#cssmenu ul {
  background: url(ImagensCSS/nav-bg.png) repeat-x 0px 4px;
  height: 69px;
}
#cssmenu ul li {
  float: left;
  list-style: none;
}
#cssmenu ul li a {
  display: block;
  height: 37px;
  padding: 22px 30px 0;
  margin: 4px 2px 0;
  border-radius: 2px 2px 0 0;
  text-decoration: none;
  font-size: 15px;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  font-weight: 400;
  opacity: 0.9;
}
#cssmenu ul li:first-child a {
  margin: 4px 2px 0 0;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active a {
  background: url(ImagensCSS/color.png) center bottom;
  display: block;
  height: 37px;
  margin-top: 0px;
  padding-top: 26px;
  color: #004f7c;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
  opacity: 1;
}

#cssmenu li ul {
  display: none;
}

#cssmenu li:hover ul {
  display: block;
}

#cssmenu li:hover li {
  float: none;
  top: 0;
}

#submenu {
  margin: 0;
  padding: 0;
  display: block;
}

#submenu li {
  background: url(ImagensCSS/nav-bg.png) repeat-x 0px 4px;
  height: 69px;
  margin: 0;
  padding: 0;
  display: block;
}

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: url(ImagensCSS/nav-bg.png) repeat-x 0px 4px;
  color: #fff;
}

#banner {
  background: url(ImagensCSS/Banner.png);
  width: 800px;
  height: 200px;
}

拜托，谁能帮帮我？

Answer 1

你有高度问题。更改这些代码；

#cssmenu ul li a {
    height: 20px;
}

#cssmenu ul li a {
    height: 20px;
}

#cssmenu ul li a:hover, #cssmenu ul li.active a {
    height: 15px;
}