Как настроить мои зависающие вкладки панели навигации

Question

Меню вкладок на моей навигационной панели для зависания не является уровнем. Фоновая область abrounf текста вкладок значительно шире, чем остальная панель навигации. И даже текст в выпадающих меню имеет большие пробелы между словами. Я попытался решить эту проблему, но я не очень хорошо разбираюсь в 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 
} 

URL-адрес в своем блоге следующим образом: 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; 
} 

Вертикальное расстояние между вашим ниспадающими связями, осуществляются с помощью 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; 
} 

Уменьшить значение или удалить эти свойства.