css 我的下拉菜单不能水平显示，下拉按钮之间有空格,有吗？

iq0todco 于 2023-01-22 发布在其他

关注(0)|答案(6)|浏览(99)

我的菜单：

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

拜托，有人能帮帮我吗？

css

来源：https://stackoverflow.com/questions/22736887/my-dropdown-menu-doesnt-take-in-horizontal-and-there-is-a-space-between-the-dro

6条答案

按热度按时间

huwehgph1#

你身高有问题。改变这些密码;

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

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

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

赞(0）回复(0）举报 2023-01-22

62lalag42#

我认为空格来自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;
}

对于水平菜单，你可以设置subul位置为绝对值，并设置它的子菜单向左浮动

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

赞(0）回复(0）举报 2023-01-22

r7knjye23#

你需要简化你的代码，问题是在css中，尝试以下代码：
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: 0.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;
  }
}

联森：

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

赞(0）回复(0）举报 2023-01-22

34gzjxbg4#

试试这个款式，希望这是你要找的。

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

赞(0）回复(0）举报 2023-01-22

aemubtdh5#

我不太明白你的意思。
本节适用于submenu：

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

改变这高度到39px（举例来说）如果你想要更少的空间之间的项目.是那你寻找什么？

赞(0）回复(0）举报 2023-01-22

hzbexzde6#

你的问题出在css上。你的身高不合适。使用自动定位功能，并在bootstrap中描述你的函数，使你能够轻松地控制它。小心，因为bootstrap会覆盖html代码，所以无论你在代码块中添加什么都是无效的。记住;任何你在html中遇到的问题都可以在bootstrap中解决。另外，注意不要覆盖你的整个html和css。我建议在使用bootstrap时不要使用嵌入式css。

赞(0）回复(0）举报 2023-01-22

我来回答

css 我的下拉菜单不能水平显示，下拉按钮之间有空格,有吗？

6条答案

相关问题

热门标签

最新问答