是否可以在CSS中重新創建此菜單？

-4

翻滾文字和下方沿着藍線移動的藍色塊。如果我通過相對位置執行操作，並將藍色塊設置爲頂部20px，則它也會向下移動文本。

有沒有一種方法可以純粹在CSS中完成此操作，還是應該使用上半部分設置爲透明GIF和底部藍色的背景圖像？

到目前爲止，我已經試過的代碼是：

#menu ul { 
    list-style:none; 
    margin:0; 
    padding:10px; 
    text-align:center; 
} 
#menu ul li { 
    display:block; 
    float:left; 
    list-style:none; 
    margin-right: 40px; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #FFF; 
    font-size: 14px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    height: 39px; 
} 
#menu ul li a { 
    display:block; 
    margin:0px; 
    padding:0px; 
    color:#FFF; 
    text-decoration:none; 
    font-family: Arial, Helvetica, sans-serif; 
    margin-right: 5px; 
    margin-left: 5px; 
    padding-left: 10px; 
    padding-right: 10px; 
} 
#menu ul li a:hover { 
    color:#fff; 
    margin-bottom:5px; 
    padding-bottom:5px; 
} 
#menu ul li a.active, 
#menu ul li a.active:hover { 
    color:#fff; 
    background-color: #0488C5; 
    font-weight:bold; 
}

我仍然在學習，所以藉口任何錯誤！

來源

2012-09-13 GT22

+11

是有可能............. –

有你嘗試任何事情了嗎？ – sandeep

首先，要更具體。你期望的目標平臺是什麼？你有什麼嘗試？你的標記和CSS是怎樣的？沒有人想做別人的工作。 –

Click here for a demo。

<ul> 
    <li><a href="#" class="active">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Products</a></li> 
</ul> 

ul { 
    width: 100%; 
    border-bottom: 3px solid blue; 
    overflow: hidden; 
} 

li { 
    float: left; 
    margin: 0 20px 0 20px;     
} 

li a { 
    border-bottom: 20px solid #fff; 
    display: block; 
} 

li a:hover, .active { 
    border-bottom: 20px solid blue; 
}

然後，您可以使用懸停狀態稱爲類似「激活」，您可以在該網頁時，應用其他類。

你應該能夠調整這個例子來滿足你的需求。

你不需要任何圖像。 CSS不僅僅能夠爲你做到這一點。

來源

2012-09-13 10:00:41 SpaceBeers

謝謝！這是我需要的這一行：border-bottom：20px純藍色; – GT22

不用擔心。通過賦予與背景相同的顏色，您可以僞造邊框不在那裏。比邊距和填充更容易。很高興有幫助。 – SpaceBeers

將三個錨定在一個無序列表中，並通過將列表顯示設置爲none來浮動列表項目，從而使它們在線顯示。進一步爲每個錨點添加一個空跨度，您可以使用：hover僞選擇器進行樣式設置。

學習CSS，它的樂趣！

來源

2012-09-13 09:57:50 Raybiez

....................................

Live demo

您好，現在這是可能習慣於after in css

作爲一個簡單的例子是這樣的

HTML

級

<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Home</a></li> 
</ul>

的CSS

ul{ 
list-style:none; 
    border-bottom:solid 10px blue; 
} 
li{ 
display:inline-block; 
    vertical-align:top; 
    background:red; 
} 
li a{ 
text-decoration:none; 
    display:inline-block; 
    vertical-align:top; 
    position:relative; 
    padding-left:10px; 
    padding-right:10px; 
    padding-bottom:10px; 
} 

li:hover a:after{ 
content:''; 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:0; 
    height:10px; 
    background:blue; 
}

LIve demo

來源

2012-09-13 10:01:36

+1的評論:) – AlphaMale

是否可以在CSS中重新創建此菜單？

回答

相關問題