مشکل hover در منو

وبمستر

توسط hasti در 5 سال پیش
0 8.6k 1 5 سال پیش
hasti daniel
0

درود برشما
این کد طراحی یه منو هست.ولی نمی دونم چرا HOVERمشکل داره؟

<style type="text/css">
    
			#nav
			{ 
				width:900px;
				height:60px;
				margin:0 auto;
				background-color:#EBEBEB; 
				margin-top:10px;
				 
			} 
			
			#nav ul
			{
				margin:0; 
				padding:0; 
				list-style-type:none; 
			}
			#nav ul li
			{
				float:left; 
			} 
			
			#nav ul li a
			{
				text-decoration:none; 
				color:#999; 
				padding-left:30px;
				display:block; 
				padding-top:16px; 
				height:44px;  
				float:left; 
			}  
			
			#nav ul li a:hover
			{ 
				background-color:#900; 
				border-top:3px solid #000; 
				color:#FFF;
				height:41px; 
				text-align:center;
				 
			} 
			
			#nav-one
			{
				
				background-color:#900; 
				color:#FFF;
				border-top:3px solid #000;
				display:block;
				height:41px; 
				
			}
  
    		<div id="nav">
            
            	<ul>
                	<li><a href="#" title="HOME" id="nav-one">HOME</a></li> 
                    <li><a href="#" title="STYLEDEMEO">STYLEDEMEO</a></li>
                    <li><a href="#" title="FULLWIDTH">FULLWIDTH</a></li>
                    <li><a href="#" title="DROPDOWN">DROPDOWN</a></li>
                    <li><a href="#" title="GALLERY">GALLERY</a></li>
                    <li><a href="#" title="PORTFOLIO">PORTFOLIO</a></li>
                </ul>
            </div>  
    
    </style>
آخرین ویرایش: 14-10-2014 ساعت 22:31، توسط Reza
0

سلام.
نگفتید Hover چه مشکلی داره؟
من منو رو یکم درستش کردم:

<style type="text/css">
    
			#nav
			{ 
				width:900px;
				margin:0 auto;
				background-color:#EBEBEB; 
				margin-top:10px;
				 
			} 
			
			#nav ul
			{
				margin:0; 
				padding:0; 
				list-style-type:none; 
				text-align: center;
			}
			#nav ul li
			{
				display: inline-block;
			} 
			
			#nav ul li a
			{
				text-decoration:none; 
				color:#999; 
				padding: 10px 20px;
			}  
			
			#nav ul li a:hover
			{ 
				background-color:#900; 
				border-top:3px solid #000; 
				color:#FFF;
				 
			} 
			
			#nav-one
			{
				
				background-color:#900; 
				color:#FFF;
				border-top:3px solid #000;
				display:block;
				
			}
  </style>
    		<div id="nav">
            
            	<ul>
                	<li><a href="#" title="HOME" id="nav-one">HOME</a></li> 
                    <li><a href="#" title="STYLEDEMEO">STYLEDEMEO</a></li>
                    <li><a href="#" title="FULLWIDTH">FULLWIDTH</a></li>
                    <li><a href="#" title="DROPDOWN">DROPDOWN</a></li>
                    <li><a href="#" title="GALLERY">GALLERY</a></li>
                    <li><a href="#" title="PORTFOLIO">PORTFOLIO</a></li>
                </ul>
            </div>
آخرین ویرایش: 14-10-2014 ساعت 22:32، توسط Reza

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.