css繼承讓我失望

我目前正在使用超級魚的菜單。它可以通過CSS完全自定義，但我遇到了一個非常令人沮喪的問題。css繼承讓我失望

第二層菜單以某種方式從我不知道的地方繼承了值，而不管我做什麼來改變它，完全破壞了整個佈局。它看起來好像文本在某種程度上是整條線，然後它應該是。但是，鼠標懸停樣式正在運行，因爲它應該是。

另一個令人沮喪的事情是，我需要將文本從tier1菜單項移動到欄的底部 - 我迄今爲止所嘗試的任何內容都只移動了文本而不是整個項目。如果有人有解決方案，它將不勝感激。

你可以看到我的意思是：http://redaxo.witconsult.de/ 它涉及的菜單項2和5（Leistungen & KONTAKT）的層2menues

這裏我相信代碼負責的問題：整個代碼這裏：http://redaxo.witconsult.de/files/superfish.css

謝謝！

.sf-menu { 
    float:   left; 
    margin-bottom: 1em; 

} 

.sf-menu a { 
    text-indent: 7px; 
} 


.sf-menu a, .sf-menu a:visited { 
    /* visited pseudo selector so IE6 applies text colour*/ 
    color: #333; 
} 

.sf-menu li {  /*///////////// menu lvl 1 /////////////*/ 
    color:   #333; 
    width:   118px; 
    line-height: 85px; 
    font-weight: normal; 
    font-size:  14px; 
    text-decoration:none; 
    background:  url(../images/menu/menuitem.png); 
} 

.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active { 
    color:   #DDD; 
    line-height: 85px; 
    background:  url(../images/menu/menuitem-mo.png); 
} 

.sf-menu li li { /*///////////// submenu lvl 2 ///////////////////*/ 
    color:  #ddd; 
    font-size: 12px; 
    top:  50px; 
    height:  26px; 
    background:  url(../images/png_black40per.png); 
} 

.sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active { 
    color: #333; 
    line-height: 26px; 
    background: url(../images/png_white40per.png);

來源

2011-03-17 j00ls

Firefox的[Firebug]（http://getfirebug.com/）擴展應該讓你看到繼承樣式來自哪裏。 – drudge 2011-03-17 23:28:49

'line-height：85px;'這會阻止菜單中的文本處於底部。 – Sam 2011-03-18 02:01:14

非常感謝！ line-height屬性是我的問題的根源......我通過將它們替換爲「line =」來解決它。現在，但是我有問題，所有的文本始終對齊在元素的頂部。 valign不起作用，我沒有看到任何其他方式將文本移動到底部/中間。不應該vertical-align：bottom;實現這個？不知何故，文字根本不響應垂直對齊。 :( – j00ls 2011-03-18 22:21:51

爲了應對新的問題 - 該文本是在頂部，而不是現在的底部 - 改變你的錨元素的高度<a>並添加一些padding-top：

/* superfish.css line 59 */ 
.sf-menu a { 
    color:#DDDDDD; 
    text-indent:7px; 
    height:   50px; /* ADDED */ 
    padding-top:   35px; /* ADDED */ 
} 
/* superfish.css line 78 */ 
.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active { 
    color:   #DDD; 
    height:   50px; /* CHANGED */ 
    background:  url(../images/menu/menuitem-mo.png); 
    padding-top:   35px; /* ADDED */ 
}

...如果你不能編輯superfish.css添加一條規則是這樣一個在別處：

#site-content .sf-menu li a { 
    height:   50px; 
    padding-top:   35px; 
}

PS請更新問題的身體來體現茶nges在你的問題;）

來源

2011-03-19 13:07:23

謝謝，我會馬上嘗試！:)關於你的PS：在這裏常見的是刪除舊的問題，並用新的替換它，或者我應該在上面添加新的問題？對不起，我真的很喜歡這個網站的工作原理，但我是新手，仍然需要弄清楚最佳使用標準是什麼。 – j00ls 2011-03-19 18:19:59

@ j00ls - 通常，問一個新問題是更常規的方式去做事情。但是因爲我回答了你的「新」問題......我不確定。 – 2011-03-19 19:33:31

好的，下次我會這樣做:)謝謝！ – j00ls 2011-03-19 21:52:32

css繼承讓我失望

回答

相關問題