My dropdown menu doesn't take in horizontal and there is a space between the dropdown buttons. Any one?

Question

My menu

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

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

Please, can help me any one?

Answer 1

not sure i understood fully what you meant.

this section is for the submenu :

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

change the height to 39px (for example) if you want less space between items. is that what you looking for?

Answer 2

You have height problem. Change these codes;

#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

Try out this style. I hope this is what you are looking for.

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

Answer 4

i think the space comes from a top margin. try setting it to zero.

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

for horizontal menu, you can set sub ul position to absolute & set it's children to float left

#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

Your problem is in the css. Your height isn't proper. Use the auto position function and describe your function in bootstrap to enable you to control it easily. Be careful cuz bootstrap overwrites html codes so whatever you add to that block of code will be void. Remember; any problem you have in html can be fixed in bootstrap. Also, be careful not to override your entire html and css. I recommend not using embedded css when working with bootstrap.

Answer 6

You need to simplify your code, problem is in css, try this code:

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