CSS導航欄背景消失設置浮動屬性

所以我一直在建設這個CSS導航欄，我有幾個問題希望有人可以幫助。這是Navigation bar。但將「.cssmenu ul li」的浮動屬性設置爲左側時，整個綠色背景消失Navigation with float enabled。爲什麼會發生？此外，我還使用了：before僞類來創建下劃線擴展效果，但即使我已將寬度設置爲100％，懸停時也不會拉伸到整個寬度。在此先感謝。CSS導航欄背景消失設置浮動屬性

自上實現在.cssmenu UL李float屬性「鏈接jsfiddle.net必須附有代碼」

.cssmenu{ 
    width : auto; 
    background : #27ae60; 
} 

.cssmenu ul{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    line-height: 1; 
    display: block; 
    zoom: 1; 
} 

.cssmenu ul li{ 
    display: block; 
    padding: 0; 

}

事情搞糟。

來源

2014-06-05 Nash Vail

什麼是這裏的終極目標是什麼？要讓黑線跨越整個列表？ –

不，整個li元素都是懸停的 –

浮動元素的父元素不會擴展到其子元素的大小。想想這個像孩子們是position: absolute。

要強制父元素包含所有浮動子元素，請將父元素添加爲overflow: hidden。在你的情況，你想補充一點，以.cssmenu：

.cssmenu { 
    overflow: hidden; 
}

JSFiddle

至於下劃線，設置:before元素來100%寬度使得下劃線的寬度相同a元素。這是文本的寬度。

相反，你應該在:before元素添加到li元素：

.cssmenu ul li:before { 
    ... 
} 

.cssmenu ul li:hover:before { 
    ... 
}

現在100％的寬度是指li元素，這是一個菜單項的「全」寬的寬度。

注：您還可以改變:before元素如top，left等

JSFiddle

來源

2014-06-05 16:54:10

非常感謝，您還可以幫我解決其他問題，請 –

您是CSS超級英雄。謝謝 –

@nashmaniac Nah，還不完全:) –

使用

.cssmenu { 
    overflow: hidden; 
}

演示

的一些指標

來源

2014-06-05 16:57:09 Tushar

你試試g內聯導航元素？想知道你想要完成什麼，這可能會幫助我們更好地回答你的問題。我有點不清楚，但這裏什麼也沒有！

這裏是我的鏡頭：

http://jsfiddle.net/jasonbelmonti/CYR7V/

這是你希望達到什麼樣的？

這是我使用的CSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700); 

.cssmenu{ 
    width : auto; 
    background : #27ae60; 
    overflow: hidden; 
} 

.cssmenu ul{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    line-height: 1; 
    display: block; 
    zoom: 1; 
} 

.cssmenu ul li{ 
    display: inline-block; 
    width: 33%; 
    padding-top: 15px; 
    padding-bottom: 17px; 

} 

.cssmenu ul li a{ 
    display : block; 
    position : relative; 
    font-family: "Open Sans"; 
    color : #fff; 
    text-decoration: none; 
    padding : 0 px; 
    text-transform: uppercase; 
    transition : all .3s; 
    font-size :14px; 

} 

.cssmenu ul li a span 
{ 
padding-left: 15px; 
} 

.cssmenu ul li a:before{ 
    content : ' '; 
    display : block; 
    height :3px; 
    width : 0px; 
    background : #2c3e50; 
    position : relative; 
    top : 30px; 
    left : -25px; 
    transition : all .3s; 

} 

.cssmenu ul li a:hover:before{ 
    width : 100%; 
    left: 0; 
} 

.cssmenu ul li a:hover{ 
    color : #34495e; 
}

來源

2014-06-05 17:10:00

CSS導航欄背景消失設置浮動屬性

回答

相關問題