我是一名初学者网站开发人员,我想制作我大学的元素,但由于我的导航 div 和导航 div 中的小 div 不会立即转换或转换,所以卡在了开始阶段。当我在其中一个具有绝对位置的 em 上应用过渡(也将绝对位置应用于其他三个小 div)时,除第一个之外的所有三个 em 都消失了。代码已链接。我想让导航就像 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
}
最佳答案
我认为首先您需要研究如何构建“CSS Mega Drop Down Menu”。 (这通常就是它们的名称,您应该能够找到一个很好的示例,您可以从中构建您的样式。)
“经典”下拉菜单通常包含嵌套(或在您的情况下为 div)在父列表项中的列表。
“Here ” 是一个很好的分步示例,我认为应该让您开始运行。
关于html - 在 Div 管理方面需要帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23594846/