html - 在部门菜单的悬停上闪烁我想创建下拉菜单
问题描述
在部门菜单的悬停上闪烁我想创建下拉菜单请帮助！我正在做网站设计，我想在标题下方创建一个下拉菜单，这是我的 html 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<div class="header">
<div class="logo1"><img src="logo1.jpg" alt="" height="100" width="100"></div>
<div class="text1"><strong>AGNIHOTRI COLLEGE OF ENGINEERING,<br>WARDHA</strong>
<br><div style="float:left;text-align:center;font-size:12px;color:brown;padding-left:50px">(Near Bypass Highway,Nagthana Road Sindi(Meghe))<br>Email:ace@agnihotri.org
<br>Phone:07152-250152
</div> </div>
<div class="logo2"><img src="12.png" alt="" height="100" width="100"></div>
</div>
<div class="navbar">
<ul>
<li><a href="#">AGI</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Governance</a></li>
<li><a href="#">Campus</a></li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">Basic Science</a></li>
<li><a href="#">Machanical Engineering</a></li>
<li><a href="#">Civil Engineering</a></li>
<li><a href="#">Computer science & Engineering</a></li>
<li><a href="#">Electronics & Communication Engineering</a></li>
<li><a href="#">M.Tech(computer science & Engg.)</a></li>
<li><a href="#">M.Tech(Electronics)</a></li>
</ul> </li>
<li><a href="#">Addmission</a></li>
<li><a href="#">Facility</a></li>
<li><a href="#">Gallary</a></li>
</ul>
</div>
<div class="middle">
<div class="mid-wrapper">
<img src="3.jpg" width="934px" height="250px">
</div>
</div>
<div class="web">
<div class="section">
<div class="section-left" style="padding-left:10px">
<h2 style="text-align:center;background-color:brown;color:white"><b>News</b></h2>
<p style="color:black;text-align:center"><marquee direction="up"><b>ALL THE BEST STUDENTS <br>FOR UNIVERSITY EXAM:<b></p><br>
<p style="color:blue;text-align:center">University Summer 2018<br> Exam Timetables<br> Are Available In<br> The Download Section: </marquee></p>
<div class="video">
<h2 style="text-align:center;background-color:brown;color:white"><b>Video</b></h2>
<video controls autoplay width="200px" height="100px" >
<source src="college.mp4" type="video/mp4">
</video>
<br></div>
<div class="image" style="padding-left:10px">
<h2 style="text-align:center;background-color:brown;color:white"><b>Image</b></h2>
<img src="img1.jpg" alt="" width="170px" height="90px">
<br></div>
</div>
<div class="section-right">
<h2 style="background-color:brown;color:white;width:500px;height:30px;text-align:center">Welcome to <span>Agnihotri College Of Engineering</span></h2>
<p style="color:blue;font-size:14px">Agnihotri College Of Engineering Nagthana Road is a Affiliated college institution.... We represnt the same Fact in user-friendly way<br> </p>
<hr>
<div style="background-color:brown;color:white;width:150px;height:20px;text-align:center">Our Vision</div>
<p></p><br><br>
<div style="background-color:brown;color:white;width:150px;height:20px;text-align:center">Our Misson</div>
<p></p><br><br>
<hr>
</div>
<div class="mid">
<div class="bottam-right">
<h2 style="text-align:center;background-color:brown;color:white">President's Message</h2>
<img src="" alt="" height="3" width="285">
<div style="border-right: 1px solid white; width: 289px; float: left; margin-top: 10px;"></div>
<br><b>I Feel proud and happy</b>to introduce to you ACE and welcome to this prestigious institution,ACE is a managing unprecdented growth through prolifaration of a varity of knowlegeas part
<br><a href="#" class="link2" style="float: right;">read more</a>
</div>
<h2 style="text-align:center;background-color:brown;color:white">Scretory"s Message</span></h2>
<img src="" alt="" height="3" width="285px">
<div style="border-right: 1px solid white; width: 289px; float:left; margin-top: 10px;"></div>
<br><b> I Feel proud and happy</b>to introduce to you ACE and welcome to this prestigious institution,ACE is a managing unprecdented growth through prolifaration of a varity of knowlegeas part
<br><a href="#" class="link2" style="float: right;">read more</a>
</div>
<div class="">
<br><br><br>
<h2 style="text-align:center;background-color:brown;color:white;padding-top:10px">Principle's Message</h2>
<img src="" alt="" height="3" width="285">
<div style="border-right: 1px solid white; width: 289px; float: left; margin-top:5px;"></div>
<br><b>I Feel proud and happy</b>to introduce to you ACE and welcome to this prestigious institution,ACE is a managing unprecdented growth through prolifaration of a varity of knowlegeas part
<br><a href="#" class="link2" style="float: right;">read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>这是CSS：
在部门的悬停菜单上我想要下拉菜单
body{background-color:black}
.main{ margin:0 auto; padding:0px;background-color:white;font-family:Arial,Helentica;font-size:12px; color:#000;width:814px;background-color:white}
.header{width:814px;height:123px;padding:65px 0px 0px 120px;font-size:12px; color:black;font-family:Arial;background-color:white}
.logo1{float:left;padding-right:50px;}
.logo2{float:right;padding-right:50px}
.text1{float:left;text-align:center;font-size:20px;color:brown}
.navbar{float:left;padding:0px;margin:0px;background-color:gray;height:30px;position:absolute;width:934px}
.navbar ul{ display:inline; list-style:none;}
.navbar li{float:left;text-align:center;font:normal bold 12px/2.5em Arial,verdana;text-decoration:none;}
.navbar ul li a{ padding:0 40px 0 20px; border-left:1px solid black;text-decoration:none;color:white;display:block-line;height:50px;}
.navbar li:hover, a:hover {background-color:black;}
.navbar li ul {display: none; height: auto;margin: 0;padding:0}
.navbar li:hover ul {display: block}
.navbar li ul li {background-color:gray;border:1px solid black}
.navbar li ul li a:hover{background-color:black;}
.mid-wrapper{padding:39px 0px}
.section-left{float:left}
.section-right{float:right}
.news{margin:0px;padding: 20px; width: 256px; float: left;display: block;}
.section-left{background:white;font-weight:none;float:left;}
.section-left li{list-style:none;padding-left:10px;}
.video{ background:white; color:white;padding-left:10px;}
.section-right{background-color:white;font-weight:none;padding-left:10px; width:576px;}
.bottam-right{width:286px;float:left;padding-left:10px;background:white;height:auto;}
.bottam-left{padding-left:37px; background-color:white;width:50px}
.bottam-middle li{list-style:none;padding-left:10px;}
.section-right p{padding:0 0 0 20px }我试过但菜单下拉菜单闪烁请帮忙！
提前致谢！
解决方案
.main{ margin:0 auto; padding:0px;background-color:white;font-family:Arial,Helentica;font-size:12px; color:#000;width:814px;background-color:white}
.header{width:814px;height:123px;padding:65px 0px 0px 120px;font-size:12px; color:black;font-family:Arial;background-color:white}
.logo1{float:left;padding-right:50px;}
.logo2{float:right;padding-right:50px}
.text1{float:left;text-align:center;font-size:20px;color:brown}
.navbar{float:left;padding:0px;margin:0px;background-color:gray;height:30px;position:absolute;width:934px}
.navbar ul{ display:inline; list-style:none; margin: 0;
padding: 0;}
.navbar li{float:left;text-align:center;font:normal bold 12px/2.5em Arial,verdana;text-decoration:none; position:relative}
.navbar ul li a{ padding:0 40px 0 20px; border-left:1px solid black;text-decoration:none;color:white;display:block-line;height:50px;}
.navbar li:hover, a:hover {background-color:black;}
.navbar li ul {display: none; height: auto;margin: 0;padding:0; position:absolute; left:0; top:30px}
.navbar li:hover ul {display: block}
.navbar li ul li {background-color:gray;border-bottom:1px solid black; float:none}
.navbar li ul li a { display:block; text-align:left;
height: auto; padding:5px 10px;
border: none;
width: 220px;}
.navbar li ul li a:hover{background-color:black;}
.mid-wrapper{padding:39px 0px}
.section-left{float:left}
.section-right{float:right} <div class="main">
<div class="header">
<div class="logo1"><img src="logo1.jpg" alt="" height="100" width="100"></div>
<div class="text1"><strong>AGNIHOTRI COLLEGE OF ENGINEERING,<br>WARDHA</strong>
<br><div style="float:left;text-align:center;font-size:12px;color:brown;padding-left:50px">(Near Bypass Highway,Nagthana Road Sindi(Meghe))<br>Email:ace@agnihotri.org
<br>Phone:07152-250152
</div> </div>
<div class="logo2"><img src="12.png" alt="" height="100" width="100"></div>
</div>
<div class="navbar">
<ul>
<li><a href="#">AGI</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Governance</a></li>
<li><a href="#">Campus</a></li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">Basic Science</a></li>
<li><a href="#">Machanical Engineering</a></li>
<li><a href="#">Civil Engineering</a></li>
<li><a href="#">Computer science & Engineering</a></li>
<li><a href="#">Electronics & Communication Engineering</a></li>
<li><a href="#">M.Tech(computer science & Engg.)</a></li>
<li><a href="#">M.Tech(Electronics)</a></li>
</ul> </li>
<li><a href="#">Addmission</a></li>
<li><a href="#">Facility</a></li>
<li><a href="#">Gallary</a></li>
</ul>
</div>
<div class="middle">
<div class="mid-wrapper">
<img src="3.jpg" width="934px" height="250px">
</div>
</div>
<div class="web">
<div class="section">
<div class="section-left" style="padding-left:10px">
<h2 style="text-align:center;background-color:brown;color:white"><b>News</b></h2>
<p style="color:black;text-align:center"><marquee direction="up"><b>ALL THE BEST STUDENTS <br>FOR UNIVERSITY EXAM:<b></p><br>
<p style="color:blue;text-align:center">University Summer 2018<br> Exam Timetables<br> Are Available In<br> The Download Section: </marquee></p>
<div class="video">
<h2 style="text-align:center;background-color:brown;color:white"><b>Video</b></h2>
<video controls autoplay width="200px" height="100px" >
<source src="college.mp4" type="video/mp4">
</video>
<br></div>
<div class="image" style="padding-left:10px">
<h2 style="text-align:center;background-color:brown;color:white"><b>Image</b></h2>
<img src="img1.jpg" alt="" width="170px" height="90px">
<br></div>
</div>
<div class="section-right">
<h2 style="background-color:brown;color:white;width:500px;height:30px;text-align:center">Welcome to <span>Agnihotri College Of Engineering</span></h2>
<p style="color:blue;font-size:14px">Agnihotri College Of Engineering Nagthana Road is a Affiliated college institution.... We represnt the same Fact in user-friendly way<br> </p>
<hr>
<div style="background-color:brown;color:white;width:150px;height:20px;text-align:center">Our Vision</div>
<p></p><br><br>
<div style="background-color:brown;color:white;width:150px;height:20px;text-align:center">Our Misson</div>
<p></p><br><br>
<hr>
</div>
<div class="mid">
<div class="bottam-right">
<h2 style="text-align:center;background-color:brown;color:white">President's Message</h2>
<img src="" alt="" height="3" width="285">
<div style="border-right: 1px solid white; width: 289px; float: left; margin-top: 10px;"></div>
<br><b>I Feel proud and happy</b>to introduce to you ACE and welcome to this prestigious institution,ACE is a managing unprecdented growth through prolifaration of a varity of knowlegeas part
<br><a href="#" class="link2" style="float: right;">read more</a>
</div>
<h2 style="text-align:center;background-color:brown;color:white">Scretory"s Message</span></h2>
<img src="" alt="" height="3" width="285px">
<div style="border-right: 1px solid white; width: 289px; float:left; margin-top: 10px;"></div>
<br><b> I Feel proud and happy</b>to introduce to you ACE and welcome to this prestigious institution,ACE is a managing unprecdented growth through prolifaration of a varity of knowlegeas part
<br><a href="#" class="link2" style="float: right;">read more</a>
</div>
<div class="">
<br><br><br>
<h2 style="text-align:center;background-color:brown;color:white;padding-top:10px">Principle's Message</h2>
<img src="" alt="" height="3" width="285">
<div style="border-right: 1px solid white; width: 289px; float: left; margin-top:5px;"></div>
<br><b>I Feel proud and happy</b>to introduce to you ACE and welcome to this prestigious institution,ACE is a managing unprecdented growth through prolifaration of a varity of knowlegeas part
<br><a href="#" class="link2" style="float: right;">read more</a>
</div>
</div>
</div>
</div>
</div>
</div>希望这对您有用，但请确保您的 HTML 格式正确。
推荐阅读
- wordpress - 如何使用 GCLB 和 Wordpress 返回 301 修复 catch-22
- python - 在 Django 部署中需要帮助
- r - 使用 dplyr 为任意数量的具有随机名称的列按组计算总和和相对比例
- java - 为具有两个 When 语句的测试获取 WrongTYpeOfReturnValue
- android - 如何在 VerticalScroller（android 开发人员撰写）中显示指标？
- c - C - 得到分段错误（核心转储）
- contextmenu - SwiftUI 上下文菜单未传递正确的变量
- javascript - 页面加载时未加载 Javascript 函数
- spring-data-jpa - 为什么 jpa 将枚举参数绑定为 varbinary
- flutter - Flutter中如何获取当前关注的是哪个focusNode？