【问题标题】:On Hover of Department menu getting flickered i want to create drop-down menu在部门菜单的悬停上闪烁我想创建下拉菜单
【发布时间】: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 中。

标签: html css


【解决方案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 格式正确。

【讨论】:

    【解决方案2】:

    你可以试试这个,我刚刚在样式中添加了.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>

    【讨论】:

    • 谢谢先生,它有效,但我需要!水平下拉菜单
    • 你的意思是垂直的吗?目前,菜单是水平的
    • 抱歉垂直下拉菜单
    • @akshadaRohokale 我已将菜单更改为垂直菜单。做检查
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-06
    • 2016-11-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多