2014-05-11 109 views
0

我是一個初學者網站開發人員,我想讓我的大學的項目,但堅持在一開始,因爲我的導航div和導航div中的小div不會立即轉換或過境。當我在絕對位置全部應用轉換時(其他三個小div也應用絕對位置)時,除了第一個以外的全部三個消失。代碼已鏈接。我想導航,就像IMDB的導航。 (具有下行過渡並且在一端具有鏈接和圖片)。
需要幫助部門管理請

- 提前感謝。

HTML代碼:

<body> 
<div id="Papadiv"> 

<header id="Header"> 

    <Div id="Logodiv"> 
    <img src="Images/Logo.jpg" height="100px" width="100px" /> 
    </Div> 
<Div id="Titlediv"> 
<font size="+5" face="Comic Sans MS, cursive">MobilePassion.com</font> 

</Div> 
</header> 



<nav id="Nav1"> 
    <div id="navoption1"> 
    <a href="Index.html"> 
    New Arrivals</a> 
    </div> 
    <div id="navoption2"> 
    <a href="Famousmodels.html"> 
    Famous Models</a> 
    </div> 
    <div id="navoption3"> 
    <a href="Whoweare.html"> 
    Who We Are?</a> 
    </div> 
    <div id="navoption4"> 
    <a href="Contactus.html"> 
    Contact Us</a> 
    </div> 

</nav> 



/* CSS Document */ 



#Nav1 
{ 
background-color: #FDAA2F; 
height:50px; 
width:800px; 

} 

#navoption1 
{ 
background-color:#FD771E; 
height:10px; 
width:160px; 
border-radius:20px; 
float: left; 
color:#722703; 
padding:20px; 
text-align:center; 



} 


#navoption2 
{ 
background-color:#FD771E; 
height:10px; 
width:160px; 
border-radius:20px; 
float: left; 
color:#722703; 
padding:20px; 
text-align:center; 



} 


#navoption3 
{ 
background-color:#FD771E; 
height:10px; 
width:160px; 
border-radius:20px; 
float: left; 
color:#722703; 
padding:20px; 
text-align:center; 

} 


#navoption4 
{ 
background-color:#FD771E; 
height:10px; 
width:160px; 
border-radius:20px; 
float: left; 
color:#722703; 
padding:20px; 
text-align:center; 





#navoption1:hover 
{ 
color:#C13D04; 
background-color: #F5530E; 

animation:alternate; 
text-decoration:blink; 
background-image:url(Rose%20(1).jpg) 
} 

#navoption2:hover 
{ 
color:#C13D04; 
background-color: #F5530E; 

animation:alternate; 
text-decoration:blink 
} 
#navoption3:hover 
{ 
color:#C13D04; 
background-color: #F5530E; 

animation:alternate; 
text-decoration:blink 
} 
#navoption4:hover 
{ 
color:#C13D04; 
background-color: #F5530E; 

animation:alternate; 
text-decoration:blink 
} 
+1

你的HTML標記在哪裏?真的需要整個樣式表來解決這個問題嗎?並請嘗試說出一個真正的問題。你只是描述一個大任務。 – idmean

+0

親愛的真正的問題是我需要使用IMDB的導航進行導航與下拉菜單的詳細信息,而無需使用任何腳本或jQuery。 (只是HTML和CSS)希望你明白。 – user3615189

回答

0

我覺得首先你需要做的關於如何建立一個「超級CSS下拉菜單」一些研究。 (通常他們被稱爲,你應該能找到一個很好的例子,你可以在其中構建你的樣式。)

「經典」下拉菜單通常包含嵌套列表(或在你的情況下 - divs )在父列表項中。

Here」是一個很好的一步一步的例子,我認爲應該讓你離開和運行。

+0

Thnx Tulon。我相信這會幫助你。 – user3615189

+0

如果這是答案,請「接受」,因爲正確的答案非常重要,因爲它既獎勵海報以解決您的問題,並通知其他人您的問題已得到解決。 – rmarq423