【发布时间】:2018-05-19 09:26:58
【问题描述】:
部门菜单悬停时闪烁我想创建下拉菜单请帮助! 我正在做网站设计,我想在标题下方创建一个下拉菜单 这是我的 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 }
我试过了,但菜单下拉菜单闪烁,请帮忙!
提前致谢!
【问题讨论】:
-
请验证 HTML validator.w3.org。缺少一些结束标签。之后,将 CSS 和 HTML 放在 one stack sn-p 中。