:focus.

: 14.01.2014
: 
: bulatlab.ru

, !

 

. :focus, , . - margin-top ( 23px 0px). transition.

 

HTML :

<!DOCTYPE html>
<html>
	<head>
      <title>CSS3  </title>
      <link rel="stylesheet" href="menu.css" type="text/css" media="screen">
   </head>
   <body>
      <ul id="nav">
         
         <li><a href="#" class="sub" tabindex="1"> 1</a>
				<ul>
					<li><a href="#"> 1</a></li>
					<li><a href="#"> 2</a></li>
					<li><a href="#"> 3</a></li>
					<li><a href="#"> 4</a></li>
					<li><a href="#"> 5</a></li>
				</ul>
         </li>
                  <li><a href="#" class="sub" tabindex="1"> 2</a>
				<ul>
					<li><a href="#"> 1</a></li>
					<li><a href="#"> 2</a></li>
					<li><a href="#"> 3</a></li>
					<li><a href="#"> 4</a></li>
					<li><a href="#"> 5</a></li>
				</ul>
         </li>
         <li><a href="#" class="sub" tabindex="1"> 3</a>
				<ul>
					<li><a href="#"> 1</a></li>
					<li><a href="#"> 2</a></li>
					<li><a href="#"> 3</a></li>
					<li><a href="#"> 4</a></li>
					<li><a href="#"> 5</a></li>
				</ul>
         </li>
         <li><a href="#" class="sub" tabindex="1"> 4</a>
				<ul>
					<li><a href="#"> 1</a></li>
					<li><a href="#"> 2</a></li>
					<li><a href="#"> 3</a></li>
					<li><a href="#"> 4</a></li>
					<li><a href="#"> 5</a></li>
				</ul>
         </li>
         <li><a href="#" class="sub" tabindex="1"> 5</a>
				<ul>
					<li><a href="#"> 1</a></li>
					<li><a href="#"> 2</a></li>
					<li><a href="#"> 3</a></li>
					<li><a href="#"> 4</a></li>
					<li><a href="#"> 5</a></li>
				</ul>
         </li>

      </ul>
   </body>
</html>

 

menu.css:

#nav {border:1px solid #8e8888;}
#nav, #nav ul {
    list-style:none;
    padding:0;
    width:200px;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;
    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
	opacity: .9;
	background-color: #ddd;                     	
	background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
   color:#000;
   display:block;
   font-size:16px;
   font-weight:bold;
   line-height:28px;
   outline:0;
   padding-left:15px;
   text-decoration:none;
}


#nav>li >a:hover {
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
#nav ul li a {
    background-color:#fff;
    color:#444;
    font-size:14px;
    line-height:23px;
	 margin-left:10px;
	 font-weight:normal;
}
#nav ul li a:hover {
    background-color:#fff;
	 color:#119;
	 text-decoration:underline;
}

#nav a:focus ~ ul li {
    margin-top:0;
    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}

 

- ! !

 

  

 

 

 
: 406
: 0
: (0)