2013-03-06 168 views
1

我無法將子菜單置於tab2上的父級頂部。我的意思是,當我懸停在tab2下面的子菜單apears。我用我自己製作的按鈕(圖片)。有人可以整理演示中的css代碼嗎?非常感謝你:)這裏是演示http://jsfiddle.net/3Lhe7/子菜單無法正常工作

@charset "utf-8"; 
/* CSS Document */ 

body { 
max-width: 1000px; 
text-align: right; 
/*text-align: center;*/ 
} 

.bg { 
width: 100%; 
height: 100%; 
position: fixed; 
top: 0; 
left: 0; 
z-index: -5000; 
} 

#navigation { 
clear: both; 
width: 60%; 
margin: 0 auto; 
border: 0px; 
text-align: left; 
position: absolute; 
top: 65%; 
left: 20%; 
height: 90px; 
min-width:830px; 
max-width:1000px; 
} 

#navigation ul { 
display: inline-block; 
margin: 0 auto; 
} 

#navigation ul li { 
display: inline; 
position: relative; 
float: left; 
list-style-type: none; 
height: 45px; 
} 

#navigation li ul { 
margin: 0px; 
padding: 0px; 
display: none; 
position: absolute; 
} 

#navigation ul li a { 
list-style: none; 
display: block; 
width: 150px; 
height: 90px; 
padding: 0px; 
} 

#navigation ul li ul { 
display: none; 
} 

#navigation ul li:hover ul { 
display: block; 
bottom: 100%; 
} 

#submenu { 
list-style: none; 
display: block; 
width: 150px; 
height: 45px; 
padding: 0px; 
margin: 0px; 
} 
+3

發佈您的代碼/工作演示 – Sowmya 2013-03-06 11:44:58

+0

您可以添加訪問圖片src到你的代碼演示? – SaidbakR 2013-03-06 11:48:11

+0

爲了整理代碼,請在jsfiddle中使用'TidyUp'按鈕:) – Morpheus 2013-03-06 11:49:57

回答

0

我不知道背後的製作#submenu的身高×45像素,但改變這種(在height屬性)來0你的推理似乎解決了問題。

#submenu { 
    list-style: none; 
    display: block; 
    width: 150px; 
    height: 0; 
    padding: 0px; 
    margin: 0px; 
} 

http://jsfiddle.net/3Lhe7/4/

+0

是的,它解決了這個問題,謝謝:) – 2013-03-07 19:01:28