降低菜单的高度

Question

我想降低菜单的高度，所以我在#cssmenu中有height:30px;，但文字不在菜单的中心。

#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
  background:#CDCDCD;
}

#cssmenu ul,
#cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#cssmenu ul {
  position: relative;
  z-index: 597;
}

#cssmenu ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul ul ul {
  top: 0;
  left: 190px;
  width: 190px;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
}
#cssmenu ul ul {
  bottom: 0;
  left: 0;
}
#cssmenu ul ul {
  margin-top: 0;
}
#cssmenu ul ul li {
  font-weight: normal;
}
#cssmenu a {
  display: block;
  line-height: 1em;
  text-decoration: none;
  height:30px;
}
/* Custom CSS Styles */

#cssmenu > ul {
  *display: inline-block;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu ul {
  text-transform: uppercase;
}
#cssmenu ul ul {
  border-top: 3px solid #5f7a77;
  text-transform: none;
  min-width: 190px;
}
#cssmenu ul ul a {
  background: #759b98;
  color: #ffffff;
  border-bottom: 1px solid #3c4d60;
  border-top: 0 none;
  line-height: 100%;
  padding: 12px 12px;
  font-size: 12px;
}
#cssmenu ul ul ul {
  border-top: 0 none;
}
#cssmenu ul ul li {
  position: relative;
}

#cssmenu ul ul li:hover > a {
  background: #5f7a77;
  color: #ffffff;
}

#cssmenu ul ul li.has-sub > a:after {
	  content: '+';
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -8px;
}
#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
	background: #5f7a77;
	color: #ffffff;
}
#cssmenu ul li.has-sub > a:after {
	  content: '+';
  margin-left: 5px;
}
#cssmenu ul li.last ul {
  left: auto;
  right: 0;
}
#cssmenu ul li.last ul ul {
  left: auto;
  right: 99.5%;
}
#cssmenu a {


  color: #3c4d60;
  padding: 0 15px;
}
#cssmenu > ul > li > a {
  line-height: 48px;
  font-size: 12px;
}

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Answer 1

将您的行高更改为30px：

#cssmenu > ul > li > a {
  line-height: 30px;
}

Answer 2

属性float:left和vertical-align无法协同工作。要在此菜单上的项目上进行垂直对齐，您可以使用line-height。我做了这个改变：

#cssmenu ul li.has-sub > a:after {
  content: '+';
  display:inline-block; /*Add to keep + sign aligned too*/
  margin-left: 5px;
}
#cssmenu > ul > li > a {
  /*line-height: 48px; Remove this line to keep the next value*/
  font-size: 12px;
}
/*Add all this next Selector CSS*/
#cssmenu ul li > a span {
  display:inline-block;
  vertical-align:middle;
  line-height:30px;
}

＆＃13;

＆＃13;

#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
  background:#CDCDCD;
}

#cssmenu ul,
#cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#cssmenu ul {
  position: relative;
  z-index: 597;
}

#cssmenu ul li {
  float: left;
  min-height: 1px;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul ul ul {
  top: 0;
  left: 190px;
  width: 190px;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
}
#cssmenu ul ul {
  bottom: 0;
  left: 0;
}
#cssmenu ul ul {
  margin-top: 0;
}
#cssmenu ul ul li {
  font-weight: normal;
}
#cssmenu a {
  display: block;
  text-decoration: none;
  height:30px;
}
/* Custom CSS Styles */

#cssmenu > ul {
  *display: inline-block;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu ul {
  text-transform: uppercase;
}
#cssmenu ul ul {
  border-top: 3px solid #5f7a77;
  text-transform: none;
  min-width: 190px;
}
#cssmenu ul ul a {
  background: #759b98;
  color: #ffffff;
  border-bottom: 1px solid #3c4d60;
  border-top: 0 none;
  line-height: 100%;
  padding: 12px 12px;
  font-size: 12px;
}
#cssmenu ul ul ul {
  border-top: 0 none;
}
#cssmenu ul ul li {
  position: relative;
}

#cssmenu ul ul li:hover > a {
  background: #5f7a77;
  color: #ffffff;
}

#cssmenu ul ul li.has-sub > a:after {
	  content: '+';
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -8px;
}
#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
	background: #5f7a77;
	color: #ffffff;
}
#cssmenu ul li.has-sub > a:after {
  content: '+';
  display:inline-block;
  margin-left: 5px;
}
#cssmenu ul li.last ul {
  left: auto;
  right: 0;
}
#cssmenu ul li.last ul ul {
  left: auto;
  right: 99.5%;
}
#cssmenu a {


  color: #3c4d60;
  padding: 0 15px;
}
#cssmenu > ul > li > a {
  font-size: 12px;
}
#cssmenu ul li > a span {
  display:inline-block;
  vertical-align:middle;
  line-height:30px;
}

＆＃13;

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;