مشکل hover در منو

وبمستر

توسط hasti در 4 سال پیش
0 633 1 4 سال پیش
hastidaniel
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

خوش آمدید

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

لطفا ابتدا لاگین کنید