Форум Сайтостроение Веб-строительство

раздвижное меню на css

S2
На сайте с 12.06.2011
Offline
118
sotex2
975

при нажатии на одну из категорий выпадает список подкатегорий, и когда нажимаешь на одну из подкатегорий выполняется данный запрос, но при этом меню сворачивается. как сделать, чтоб при переходе на данную подкатегорию меню не сворачиволось. мое меню

<!DOCTYPE html>

<html lang="en" >

<head>

<meta charset="utf-8" />

<title>CSS3 onclick Vertical Metal menu | Script Tutorials</title>

<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">

<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">

</head>

<body>

<div class="container">

<ul id="nav">

<li><a href="#"><img src="images/t1.png" /> Home</a></li>

<li><a href="#" class="sub" tabindex="1">

<img src="images/t2.png" />HTML/CSS</a><img src="images/up.gif" alt="" />

<ul>

<li><a href="#"><img src="images/empty.gif" />Link 1</a></li>

<li><a href="#"><img src="images/empty.gif" />Link 2</a></li>

<li><a href="#"><img src="images/empty.gif" />Link 3</a></li>

<li><a href="#"><img src="images/empty.gif" />Link 4</a></li>

<li><a href="#"><img src="images/empty.gif" />Link 5</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

css/menu.css

#nav {

border:3px solid #3e4547;

box-shadow:2px 2px 8px #000000;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

}

#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 {

background-color:#d4d5d8;

color:#000;

display:block;

font-size:12px;

font-weight:bold;

line-height:28px;

outline:0;

padding-left:15px;

text-decoration:none;

}

#nav li a.sub {

background:#d4d5d8 url("../images/down.gif") no-repeat;

}

#nav li a + img {

cursor:pointer;

display:none;

height:28px;

left:0;

position:absolute;

top:0;

width:200px;

}

#nav li a img {

border-width:0px;

height:24px;

line-height:28px;

margin-right:8px;

vertical-align:middle;

width:24px;

}

#nav li a:hover {

background-color:#bcbdc1;

}

#nav ul li a {

background-color:#eee;

border-bottom:1px solid #ccc;

color:#000;

font-size:11px;

line-height:22px;

}

#nav ul li a:hover {

background-color:#ddd;

color:#444;

}

#nav ul li a img {

background: url("../images/bulb.png") no-repeat;

border-width:0px;

height:16px;

line-height:22px;

margin-right:5px;

vertical-align:middle;

width:16px;

}

#nav ul li:nth-child(odd) a img {

background:url("../images/bulb2.png") no-repeat;

}

#nav a.sub:focus {

background:#bcbdc1;

outline:0;

}

#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;

}

#nav a:focus + img, #nav a:active + img {

display:block;

}

#nav a.sub:active {

background:#bcbdc1;

outline:0;

}

#nav a:active ~ ul li {

margin-top:0;

}

#nav ul:hover {

display:block;

}

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий