내 드롭 다운 메뉴가 가로로 표시되지 않고 드롭 다운 버튼 사이에 공백이 있습니다. 어떤 사람?

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

나는 당신이 의미하는 바를 완전히 이해하지 못했습니다.

이 섹션은 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

사용하면, 좋은 내용이지만 더 많은 인기를 끌고와 작업을 빠르고 쉽게 끝낼 수 있습니다 것처럼 또한 부트 스트랩을 배우고 싶은 경우에, 모든 장치에서 작동하는이 부트 스트랩 반응하는 메뉴를 선택합니다. 여기

이다 Responsive Bootstrap MenuPraize하여 : 사람들은 당신이 원하는 것을 추측 할 수 있도록, 당신이 달성 하려는지 분명하지 않다

<div class="container"> 
    <div class="row"> 
     <h1>Название сайта</h1> 
     <div class="navbar navbar-inverse"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <!--<a href="#" class="navbar-brand">Название компании</a>--> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu"> 
         <span class="sr-only">Открыть навигацию</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 
       <div class="collapse navbar-collapse" id="responsive-menu"> 
        <ul class="nav navbar-nav"> 
         <li><a href="#">Пункт 1</a></li> 
         <li><a href="#">Пункт 2</a></li> 
         <li><a href="#">Пункт 3</a></li> 
         <li><a href="#">Пункт 4</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>