我的下拉菜单不是水平的，下拉按钮之间有一个空格。任何人？

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); /* 让我们导入可爱的 google 字体，请将此行放在样式表的顶部 */ /* 菜单 CSS */#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a { 填充：0； 边距：0； 行高：1； 字体家族：'Capriola'，无衬线； } #cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after { 内容： ''; 显示：表格； } #cssmenu:after,#cssmenu > ul:after { 明确：两者； } #cssmenu { 缩放：1； 高度：69px； 背景：url(ImagensCSS/bottom-bg.png) 重复-x 中心底部； 边框半径：2px； 宽度：100%； } #cssmenu ul { 背景：url（ImagensCSS/nav-bg.png）重复-x 0px 4px； 高度：69px； } #cssmenu ul li { 向左飘浮; 列表样式：无； } #cssmenu ul li a { 显示：块； 高度：37px； 填充：22px 30px 0； 边距：4px 2px 0； 边框半径：2px 2px 0 0； 文字装饰：无； 字体大小：15px； 白颜色; 文字阴影：0 1px 1px rgba(0, 0, 0, 0.75); 字体粗细：400； 不透明度：0.9； } #cssmenu ul li:first-child a { 边距：4px 2px 0 0； } #cssmenu ul li a：悬停， #cssmenu ul li.active a { 背景：url(ImagensCSS/color.png) 中底； 显示：块； 高度：37px； 边距顶部：0px； 填充顶部：26px； 颜色：#004f7c； 文字阴影：0 1px 1px rgba(255, 255, 255, 0.55); 不透明度：1； } #cssmenu li ul { 显示：无； } #cssmenu li:hover ul { 显示：块； } #cssmenu li:hover li { 浮动：无； 顶部：0； } #子菜单{ 边距：0； 填充：0； 显示：块； } #子菜单李{ 背景：url（ImagensCSS/nav-bg.png）重复-x 0px 4px； 高度：69px； 边距：0； 填充：0； 显示：块； } #页脚{ 位置：固定； 底部：0； 宽度：100%； 背景：url（ImagensCSS/nav-bg.png）重复-x 0px 4px； 颜色：#FFF； } ＃横幅 { 背景：网址（ImagensCSS/Banner.png）； 宽度：800 像素； 高度：200px； }

请问有什么可以帮帮我的吗？

Answer 1

不确定我完全理解你的意思。

此部分适用于submenu：

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

如果您希望项目之间的空间更小，请将高度更改为39px（例如）。 这就是你要找的吗？

Answer 2

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

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

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

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

Answer 3

试试这种风格。我希望这就是你要找的。

#cssmenu ul li {
display: inline-block;
float: left;
list-style: outside none none;
}

Answer 4

我认为空间来自a 上边距。尝试将其设置为零。

#cssmenu ul li a {
    display: block;
    height: 37px;
    padding: 22px 30px 0;
    margin: 0px 2px 0; /* <- set top margin to zero */
    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: .9;
}

对于水平菜单，您可以将子 ul 位置设置为绝对位置并将其子级设置为向左浮动

#cssmenu li:hover ul {
    display: block;
    position: absolute; /* set it to absolute  */
}
#cssmenu li:hover li {
    float: left; /* set floating to display inline  */
    top: 0;
}

Answer 5

您的问题出在 CSS 中。你的身高不合适。使用自动定位功能并在引导程序中描述您的功能，以便您轻松控制它。小心，因为引导程序会覆盖 html 代码，因此您添加到该代码块中的任何内容都将无效。记住;您在 html 中遇到的任何问题都可以在引导程序中解决。另外，请注意不要覆盖整个 html 和 css。我建议在使用引导程序时不要使用嵌入式 css。

Answer 6

你需要简化你的代码，问题出在css，试试这个代码：

#cssmenu ul li a {
display: inline-block;
height: 37px;
padding: 22px 30px 0;
margin: 0px 2px 0; /* <- set top margin to zero */
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
font-weight: 400;
opacity: .9;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
  float: left;
  display: block;
  margin-right: 10px;
}

}

@media screen and (max-width: 600px) {
.#cssmenu.responsive {position: relative;}
.#cssmenu.responsive .icon {
  position: absolute;
  left: 0;
  top: 0;
}
.cssmenu.responsive a {
  float: none;
  display: block;
  text-align: left;
   }
 }

    <script>
  function myFunction() {
  var x = document.getElementById("cssmenu");
  if (x.className === "cssmenu") {
  x.className += " responsive";
  } else {
  x.className = "cssmenu";
    }
  }
  </script>