当前位置: 首页 > 知识库问答 >
问题:

我的下拉菜单不接受水平和有一个空间之间的下拉按钮。任何一个?

霍锦
2023-03-14

我的菜单

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

拜托,能帮我一个吗?

共有2个答案

宫高义
2023-03-14

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

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

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

#cssmenu ul li a:hover, #cssmenu ul li.active a {
    height: 15px;
}
岳奇逸
2023-03-14

我不知道我是否完全理解你的意思。

此部分用于子菜单:

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

如果希望项目之间的空间更小,则将高度更改为39px(例如)。这就是你要找的吗?

 类似资料:
  • 主要内容:实例,分割的按钮下拉菜单,实例,按钮下拉菜单的大小,实例,按钮上拉菜单,实例本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单,只需要简单地在一个 .btn-group 容器中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。 下面的实例演示了一个基本的简单的按钮下拉菜单: 实例 <div class="btn-group"> <button type="but

  • 我在stackoverflow上搜索此问题,但找不到任何内容。 我一直在用CSS制作一个下拉菜单。将鼠标悬停在下拉菜单上时,下拉项将水平显示,而不是垂直显示。 HTML CSS 如何垂直获取下拉列表项?

  • 问题内容: 我有一个jQuery下拉菜单和一个模态窗口,它是ajax的触发器。当您单击ajax的链接时,就会出现问题,当您关闭它时,下拉列表将不再起作用。因此,当您不单击ajax时,下拉列表将起作用。单击链接并将其关闭时,下拉菜单未显示下拉菜单。 试试看,源代码在这里: 逐步重现: 将鼠标悬停在最右边的“ Lorem”上,然后会出现一个下拉菜单。 退出鼠标悬停,然后单击标题为“单击此处获取ajax

  • 问题内容: 我有两个下拉菜单,其中的选项不是从数据库中获取的。 第一个,让用户选择一个类别。 第二个选项取决于第一个下拉菜单中的选择。例如,如果用户选择“ 第一个” 选项,则第二个下拉列表将显示 但是当用户改变主意,或先选择 第二个 选项时,第二个下拉列表现在将显示 我的问题是我该如何实现?不用数据库就可以做到吗? 谢谢! 问题答案: 参见下文,查看 不使用数据库 的 工作示例 。 使用MySQL

  • 本文向大家介绍BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案,包括了BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案的使用技巧和注意事项,需要的朋友参考一下 最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,对照教程感觉代码没错

  • 我正在尝试制作一个下拉菜单,其中。单击时会显示下拉内容,如果用户单击栏中的任何其他下拉列表,下拉内容将消失。问题是我有多个下拉列表,我想我只是需要帮助修改我现有的javascript。我希望侧边栏(nav)只显示当前活动的下拉菜单。在“我的代码”上,当您打开下拉列表时,它仍然会打开,直到用户再次单击下拉箭头以关闭该特定下拉列表。