Есть меню Li при переходе на подменю Ul подсветка у Li пропадает. Я знаю что наверное эта тема уже миллион раз обсуждалась, но ответа я так и не нашел. Я так понял решение может быть в Java скрипте, уже второй день вожусь так и не могу решить данную задачу...
<!DOCTYPE html>
<html>
<head>
<title>Вертикальное выпадающее меню</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
function over_link(lank) {$(lank).animate({padding: '15px'}, 300)}
function out_link(lank) {$(lank).animate({padding: '0px'}, 300)}
</script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<style>
#leftt p a {margin:5px; display:block;
transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-opera-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;}
#leftt p a:hover {cursor: pointer;
transform:translate(15px,0);
-moz-transform:translate(15px,0);
-webkit-transform:translate(15px,0);
-khtml-transform:translate(15px,0);
-opera-transform:translate(15px,0);
-ms-transform:translate(15px,0);}
</style>
</head>
<body bgcolor="#FFFF99"><div>
<ul class="menu" id="leftt">
<li><div id="leftt"><p><a href="">1С бухгалтерия</a></p></div>
<ul>
<li><a href="">1С бухгалтерия</a></li>
</ul>
<li><div id="leftt"><p><a href="">Гаджеты, прошивки, soft</a></p></div>
<ul>
<li><a href="">Android</a></li>
<li><a href="">Новости</a></li>
<li><a href="">Обои для смартфонов</a></li>
<li><a href="">Программы для android</a></li>
<li><a href="">Гаджеты</a></li>
<li><a href="">Tips&Tricks</a></li>
</ul>
</li>
<li><div id="leftt"><p><a href="">Создание и раскрутка сайтов</a></p></div>
<ul>
<li><a href="">Ruby on Rails</a></li>
<li><a href="">Как заработать на сайте (Марафон $$$)</a></li>
<li><a href="">web-дизайн</a></li>
<li><a href="">web-заметки</a></li>
<li><a href="">Программирование</a></li>
<li><a href="">Раскрутка сайтов</a></li>
<li><a href="">Создание сателлитов (сатострой)</a></li>
<li><a href="">Wordpress</a></li>
</ul>
<li><div id="leftt"><p><a href="">Обзоры игр</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
<li><div id="leftt"><p><a href="">Операционные системы</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
<li><div id="leftt"><p><a href="">Социальные сети</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
<li><div id="leftt"><p><a href="">Новости поисковых систем</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
<li><div id="leftt"><p><a href="">Другие темы</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
<li><div id="leftt"><p><a href="">Программы для ПК</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
<li><div id="leftt"><p><a href="">Обслуживание и защита ПК</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
<li><div id="leftt"><p><a href="">Техно-статьи</a></p></div>
<ul>
<li><a href="">CSS1</a></li>
<li><a href="">CSS2</a></li>
<li><a href="">CSS3</a></li>
</ul>
</ul> </div>
</body>
</html>
[CSS]*{
margin: 0;
padding: 0;
}
body {
margin: 10px;
}
ul.menu {
margin: 0;
padding: 0;
display: inline-block;
background-color: #b8d9ff;
display: block;
width: 310px;
}
ul.menu li {
list-style: none;
position: relative;
}
ul.menu li a {
padding: 2px 2px 2px;
color: #4a1e0f;
font-size: 13px;
font-weight: bold;
font-family: Arial;
text-decoration: none;
display: block;
border-top: 1px solid #;
}
ul.menu li a:hover {
background-color: #df3a00;
}
ul.menu li:hover ul {
background-color: #df3a00;
}
/*Выпадающее меню*/
ul.menu li ul {
display: none;
}
ul.menu li:hover ul {
display: inline-block;
position: absolute;
left: 320px;
top: 0px;
background-color: #FFFFFF;
background:rgba;
opacity:95;
width: 226px;
z-index: 1000;
}[/CSS]