在部门菜单悬停时闪烁，我想创建下拉菜单请帮忙！ 我在网站设计工作，我想在标题下面创建一个下拉菜单 这是我的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 }
我试过但菜单下拉变得闪烁请帮忙！
提前谢谢！答案 0 :(得分：1)
.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格式正确。
答案 1 :(得分：0)
你可以试试这个，我刚刚在样式中添加了.navbar li ul{position:absolute;width:100%;left:0}：
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;text-decoration:none;color:white;display:block-line;height:50px;width : 100%}
.navbar li:hover, a:hover {background-color:black;}
.navbar li ul {display: none; height: auto;margin: 0;padding:0;}
.navbar li ul{position:absolute;display : none;width:200px}
.navbar li:hover ul {display: block}
.navbar li ul li {background-color:gray;border:1px solid black;display:block;width:100%;text-align:left}
.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 }<!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>