html - 如何自定义我的悬停导航栏选项卡

Question

悬停导航栏中的选项卡菜单不水平。选项卡文本的背景区域比导航栏的其余部分宽得多。甚至下拉菜单中的文本在单词之间也有很大的差距。我试图解决这个问题，但我对 HTML 不是很熟练。我在下面包含了导航栏的整个 html 代码:

#wctopdropcont{ /* width of the main bar categories */
width:100%;
height:40px;
display:block;
padding: 5.5px 0 0 0;
margin-left: 0;

z-index:100;
top:0px;
left:0px;
position:fixed;

background:#f8f8f8; 
opacity: 0.9;
filter: alpha(opacity=90);
  }

#wctopdropnav{ /* social */
float: left;
width:97%;
height:7px;
display:block;
padding:0;
margin-left:30px; 
}
#wctopdropnav ul{
float:left;
margin:0;
padding:0;

} 
#wctopdropnav li{
float:left;
list-style:none;
line-height:35px;
margin:0;
padding:6.5px;/* height of the clicked bar */
background:#f8f8f8; 
}

#wctopdropnav li a, #wctopdropnav li a:link{
color:#000000;
float: left;
display:block;
margin: 0px;
text-transform: uppercase;
font-size: 9.5px!important;
font-family: karla, arial!important;
padding: 5px;
text-decoration:none;
font-weight: normal!important;
letter-spacing : 0.09em;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active,    #wctopdropnav .current_page_item a  {
color:black;
font-weight: normal;
padding: 5px;
background: #f8f8f8; /* Old browsers */
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
filter:black;  
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 10px;
background:#f8f8f8;
color: #000000;
width: 95px;
margin: 0;
padding: 0 1px;
line-height: 20px;
position: relative; 
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: black;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
filter: #f8f8f8;
}

#wctopdropnav li ul{
 z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:22px 0 0 0;
padding: 4px 0 0 0;
}

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
left:auto
}

#wctopdropnav li:hover, #wctopdropnav li.sfhover{
 position:static
 }

我的博客网址如下:http://www.blankesque.com问题非常明显。

任何帮助将不胜感激。提前谢谢你。

Answer 1

导航周围的填充来自此处的大 line-height:

#wctopdropnav li {
    float: left;
    list-style: none;
    line-height: 35px; /* <--- HERE */
    margin: 0;
    padding: 6.5px;
    background: #f8f8f8;
}

下 zipper 接的垂直间距受此处的 line-height 影响:

#wctopdropnav li li a,
#wctopdropnav li li a:link,
#wctopdropnav li li a:visited {
    font-size: 10px;
    background: #f8f8f8;
    color: #000000;
    width: 95px;
    margin: 0;
    padding: 0 1px;
    line-height: 20px;  /* <--- HERE */
    position: relative;
}

减少值或删除这些属性。