Wordpress 菜单 CSS 样式问题

Question

我已经开发了基本的 html&css 样式菜单，我现在正尝试将其更改为 wordpress 菜单。这里的问题来自高度波动。 min-height 已设置为 50px，在 codepen 中它仅扩展到 55px 高度，在 wordpress 版本中它将扩展到 65px 高度。对此有任何造型帮助吗？ 55px 的高度看起来还不错，但 65 太高了

#main-nav{
background: #2c2c2c;
margin: 0 auto;
min-height: 50px;
border-bottom: 5px solid #cd2122;
z-index: 12;
}
#main-nav ul li {
text-transform: uppercase;
font-family: arial,Georgia, serif;
font-size:12px;
position: relative;
display: inline-block;
float: left;
border:1px solid #222222;
border-width:0 0 0 1px;
height:50px;
}
#main-nav ul li a {
display: inline-block;
height: 50px;
line-height: 50px;
color: #ddd;
padding:0 14px;
text-shadow:0 1px 1px #000;
border-left:1px solid #383838;
position: relative;}

http://codepen.io/reshogun/pen/rOVmrz

Answer 1

您可以添加一个 55 像素的 max-height 或删除 min-height 并给它一个固定的 55 像素 height：

使用最大高度：Codepen

#main-nav{
background: #2c2c2c;
margin: 0 auto;
min-height: 50px;
max-height: 55px;
border-bottom: 5px solid #cd2122;
z-index: 12;
}

使用高度：Codepen

#main-nav{
background: #2c2c2c;
margin: 0 auto;
height: 55px;
border-bottom: 5px solid #cd2122;
z-index: 12;
}

Answer 2

我检查了您在菜单样式中所做的给定链接，这不仅是因为您使用的是 WordPress，而且是一些未使用 css 代码的错误。所以下面是您必须进行的 CSS 更改并检查它是否可以正常工作

body {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #666666;
  font-size: 14px;
  line-height: 20px;
  padding: 0 !important;
  height: 2999px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #454545;
  font-weight: 300;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  margin: 0 0 15px;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
.clear {
  clear: both;
}
.bold {
  font-weight: bold;
}
a {
  color: #1c1c1c;
  text-decoration: none;
}
a:hover {
  color: #7ab80e;
  text-decoration: none;
}
ul,
ol {
  padding: 0;
  margin: 0 0 10px 25px;
}


#main-nav{
    background: #2c2c2c;
    margin: 0 auto;
    border-bottom: 5px solid #cd2122;
    z-index: 12;
    position:relative;
}
#main-nav ul li {
  text-transform: uppercase;
  font-family: arial,Georgia, serif;
  font-size:12px;
  position: relative;
  display: inline-block;
  border:1px solid #222222;
  border-width:0 0 0 1px;
  float:left;
}
#main-nav ul li a {
  display: inline-block;

  color: #ddd;
  padding:12px;
  text-shadow:0 1px 1px #000;
  border-left:1px solid #383838;
  position: relative;
}

谢谢 苏拉布