WordPress的菜單CSS樣式問題

Question

我已經開發了基本的html＆css樣式菜單，現在正嘗試更改為wordpress菜單。 這里的問題來自高度波動。 最小高度已設置為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

您可以添加max-height 55px，也可以刪除min-height並將其固定height為55px：

使用最大高度： 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;
}

感謝Sourabh