Как сделать активным меню и подменю ?

Stych · August 17, 2011

Есть простое меню на css. При наведении на ссылку меняется фон и появляется подменю. Как можно сделать что бы при переходе на подменю, у ссылки основного меню оставалось свойство hover. Т.е при наведении на "3-А", свойство hover было и у "3" и у "А" .Помоему только средствами css такое не сделать, нужен javascript, или я ошибаюсь?

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>

<body>
<style type="text/css">
/*левое меню*/
.left_menu{ font-size:12px;} 
/*выравнивание списка*/
div.left_menu ul{ margin:0px; margin-bottom:5px; padding:0px; list-style:none; width:200px; border-bottom:1px solid #9d6512;}
div.left_menu ul li{ position: relative;}

/*подменю*/
div.left_menu li ul{ position: absolute; width:180px;
left:190px!important;
left:199px;
top:5px!important;
top:0px;
display:none; font-size:11px;}

div.left_menu li:hover ul{ display:block;}
/*для ява скрипта*/
div.left_menu li:hover ul, div.left_menu li.over ul{ display:block;}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

/*стилизация ссылок  левого меню*/
div.left_menu ul li a{ border:1px solid #9d6512; display:block; height:30px; line-height:30px; text-decoration:none; color:#000; margin-bottom:2px; text-align:center; background-image: url(img/fon_left_button.jpg);}
 /*div*/      
div.left_menu ul li div a{ border:1px solid #9d6512; display:block; 
height: 30px; 
line-height: inherit !important; 
line-height:15px; 
padding-bottom:0px!important; padding-top:0px!important; 
padding-bottom:2px; padding-top:2px; 
text-decoration:none; color:#000; background-image: url(img/fon_left_button.jpg);}

/*для подменю*/

ul{z-index:1;}
li ul{ z-index:3; position:relative;}



div.left_menu li ul li a{ border:1px solid #9d6512; border-bottom:0px;  display:block; height:25px; line-height:25px; text-decoration:none; margin-bottom:0px; color:#000; text-align:center; background-color:#F90; background-image: url(img/fon_left_podmenu.png);}

div.left_menu li ul li div a { border:1px solid #9d6512; border-bottom:0px; display:block; 
height: 30px; 
line-height: inherit !important; 
line-height:15px; 
padding-bottom:0px!important; padding-top:0px!important; 
padding-bottom:2px; padding-top:2px; 
text-decoration:none; color:#000; background-color:#F90; background-image:url(img/fon_left_podmenu.png);}

/*при наведении*/
div.left_menu ul li  a:hover,
div.left_menu ul li div a:hover
{ background-image:url(img/fon_left_button_hover.jpg);}
/*для подменю*/
div.left_menu li ul li  a:hover,
div.left_menu li ul li div a:hover
{ background-color:#e9e7e4; background-image: url(img/fon_left_podmenu_hover.png);}
</style>


    <!--левое меню-->
    <div class="left_menu">	
<ul>			
<li><a href="#">1</a></li>		
<li><a href="#">2</a>
<ul>
<li><a href="">А</a></li>
<li><a href="">Б</a></li>
<li><a href="">В</a></li>
<li><a href="">Г</a></li>
</ul>
</li>
<li><a href="#">3</a>
<ul>
<li><a href="">А</a></li>
<li><a href="">Б</a></li>
<li><a href="">В</a></li>
<li><a href="">Г</a></li>
</ul>
</li>			
<li><a href="#">4</a>
<ul>
<li><a href="">А</a></li>
<li><a href="">Б</a></li>
<li><a href="">В</a></li>
<li><a href="">Г</a></li>
<li><a href="">Д</a></li>
<li><a href="">Е</a></li>
</ul>
</li>
<li><a href="#">5</a>
<ul>
<li><a href="">А</a></li>
<li><a href="">Б</a></li>
<li><a href="">В</a></li>
<li><a href="">Г</a></li>
<li><a href="">Д</a></li>
<li><a href="">Е</a></li>
</ul>
</li>         
<li><a href="#">6</a>
<ul>
<li><a href="">А</a></li>
<li><a href="">Б</a></li>
<li><a href="">В</a></li>
<li><a href="">Г</a></li>
<li><a href="">Д</a></li>
<li><a href="">Е</a></li>
<li><a href="">Ж</a></li>
<li><a href="">З</a></li>
</ul>
</li>
<li><a href="#">7</a></li>
</ul>
</div>

<!--конец меню-->

Edited August 17, 2011 by Stych

Softlink · August 17, 2011

У меня завалялась менюшка одна, там, по-моему, как раз ваш случай реализован, посмотрите\покопайтесь http://www.alpatriott.ru/works/primer/menu.html

Stych · August 18, 2011

Спасибо, как раз, то что нужно.

Sign In

Как сделать активным меню и подменю ?

Question

Stych

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

Stych

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information