課程
/前端開發
/JavaScript
/形形色色的下拉菜單
為什么設置了magin-top:-20px后，中文菜單不在上面顯示呢？
2015-04-16
源自：形形色色的下拉菜單 4-3
正在回答
.top-nav 設置了overflow：auto；不管導航條放在哪里，hover的時候漢字都不會出現的
line-height: 20px;我認為是這句話起到了作用，我們設置了固定高度，margin:-20px以后中文超出了這個高度就不能顯示了
.top-nav?li?a ????????{ ????????????/*margin-top:20px;*/ ????????????line-height:?20px; ????????????text-decoration:?none; ????????????background:?#DDDDDD; ????????????color:?#666666; ????????????display:?block; ????????????width:?80px; ????????????text-align:?center; ????????}
是因為設置margin-top：-20后，超出了瀏覽器的可視區域。上邊代碼默認margin-top是0，相當于把它擠出去了。上邊代碼去掉注釋后，漢字就顯示了。所以覺得這種方法不好啊。。
dajunxiao
qq_我的不二說_0
慕碼人3910529 回復 qq_我的不二說_0
我也想問
是不是你沒設置hover狀態？
? ? ? ? /*設置正常狀態英文菜單隱藏*/
? ? ? ? .top-nav ?li a span{display:none;}
? ? ? ??
? ? ? ? /*鼠標移動到鏈接上面時將英文菜單顯示*/.top-nav ?li a:hover span{display:block;
? ? ? ? color:White
? ? ? ? ;}
? ? ? ? /*鼠標移動到鏈接上面時將中文菜單位置上移*/
? ? ? ? .top-nav ?li a:hover{margin-top:-20px;}
舉報
本教程從易到難，循循漸進，運用不同技術實現動態下拉菜單
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-10-26
.top-nav 設置了overflow：auto；不管導航條放在哪里，hover的時候漢字都不會出現的
2015-11-17
line-height: 20px;我認為是這句話起到了作用，我們設置了固定高度，margin:-20px以后中文超出了這個高度就不能顯示了
2015-07-27
.top-nav?li?a ????????{ ????????????/*margin-top:20px;*/ ????????????line-height:?20px; ????????????text-decoration:?none; ????????????background:?#DDDDDD; ????????????color:?#666666; ????????????display:?block; ????????????width:?80px; ????????????text-align:?center; ????????}是因為設置margin-top：-20后，超出了瀏覽器的可視區域。上邊代碼默認margin-top是0，相當于把它擠出去了。上邊代碼去掉注釋后，漢字就顯示了。所以覺得這種方法不好啊。。
2015-07-26
我也想問
2015-04-26
是不是你沒設置hover狀態？
? ? ? ? /*設置正常狀態英文菜單隱藏*/
? ? ? ? .top-nav ?li a span{display:none;}
? ? ? ??
? ? ? ? /*鼠標移動到鏈接上面時將英文菜單顯示*/.top-nav ?li a:hover span{display:block;
? ? ? ? color:White
? ? ? ? ;}
? ? ? ??
? ? ? ? /*鼠標移動到鏈接上面時將中文菜單位置上移*/
? ? ? ? .top-nav ?li a:hover{margin-top:-20px;}