實施ul li菜單項

我想創建一個ul li菜單，我想將每個li元素放在前一個元素上。實施ul li菜單項

我不知道我是否可以用言語我的意思解釋，所以我做了展示所需效果的圖像： image http://oi45.tinypic.com/2q07p1k.jpg

我怎樣才能做到這一點使用純CSS？是否有可能，或者我必須使用JavaScript？

這是我到目前爲止已經試過：

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

li { 
    position: relative; 
} 

li a { 
    display: block; 
    position: absolute; 
    top: -30px; 
    z-index: 1; 
    width: 225px; 
    height: 115px; 
}

但每個li出現超過前一個相同的地方。

來源

2012-12-13 zelazowy

當你將鼠標懸停在它上面時，你是否希望「li」完全顯示？ – Sean

你不會移動你的'li'元素......你正在移動他們中的'a'元素。 –

你能解釋一下你試圖在這裏展示什麼嗎？我可能有更好的解決方案。 – Gallen

您可以使用負邊距來「提升」li元素。

http://jsfiddle.net/tomprogramming/mbe9W/

相關CSS

li { padding:10px; border:1px solid #000; margin-top:-10px; } 
li:first-of-type { 
margin-top:0; 
}

來源

2012-12-13 20:50:37

哦，那很簡單...它是exaclty我想要的，非常感謝你:) – zelazowy

鮮爲人知的技巧，這個利潤率可以是負面的，也可以是積極的:)很高興它有幫助。 –

是的，我知道，我試過了，但以某種無效的方式，它不起作用;） – zelazowy

我認爲這是接近：

<ul> 
<li><a class="a" href="#">A</a></li> 
<li><a class="b" href="#">B</a></li> 
<li><a class="c" href="#">C</a></li> 
</ul>

CSS：

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    padding-top:30px; 
} 

li { 
    position: relative; 
    height:50px; 
} 

li a { 
    display: block; 
    position: absolute; 
    height:20px; 
    top: -30px; 
    left:0; 
    width:225px; 
    height:115px; 

} 

.a { 
    border:1px solid #ff0000 
} 
.b { 
    border:1px solid #00ff00 
} 

.c { 
    border:1px solid #ffff00 
}

來源

2012-12-13 20:55:21

是的，這也可以，謝謝。 – zelazowy

實施ul li菜單項

回答

相關問題