html - 在 Div 管理方面需要帮助

标签 html css

我是一名初学者网站开发人员,我想制作我大学的元素,但由于我的导航 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/

相关文章:

html - UTF-8 编码的 HTML 文档通常以 BOM 开头吗?

javascript - AngularJS + D3 多个指令用于仅查看一个更新

javascript - 如何使父div的ajax旋转动画中心?

html - body 元素的填充值增加了

javascript - 将多页应用程序转换为单页

javascript - SVG 路径和图像

html - iPad Safari 上的下拉问题

html - 如何使用iframe中的链接更改父页面

javascript - 如何停止在 Jquery 中克隆属性或标记

css - 悬停动画后使动画停留