X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Здравствуйте уважаемые гуру... Вопрос от новичка...
Marinec
Marinec
Topic Starter сообщение 22.7.2013, 15:50; Ответить: Marinec
Сообщение #1


Есть меню 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]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 24.7.2013, 14:25; Ответить: Degradator
Сообщение #2


Надеюсь что понял про что вы. Когда вы наводите мыш на внутренний тег, то считается, что мышь уже ушла с того тега, на котором есть подсветка. Есть разные решения - например вот http://learn.javascript.ru/mousemove-events.

Я по другому подхожу к этому - я сравниваю координаты мыши относительно положения блока. Если мыш внутри координат, то вкл. Если снаружи то вкл. Вот скрипт http://traviator.net/js/topMenu.js.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Здравствуйте. Создал сайт дачной тематики, прошу его оценить.
29 murowets 2572 17.11.2020, 18:10
автор: ViktoriaFE
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыImageCMS Вопрос ответ.
7 olegubs 410 10.11.2020, 14:32
автор: Ostromir
Открытая тема (нет новых ответов) Хочешь знать больше про PBN? Задай вопрос Евгению Шестакову
well-fed-webmaster.com
12 JOHNY 779 10.10.2020, 13:39
автор: Mansurka
Открытая тема (нет новых ответов) Небольшое вопрос по bash
0 leoworker 241 26.9.2020, 11:37
автор: leoworker
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВопрос - платное размещение баннеров на сайте
5 WGN 417 24.8.2020, 17:58
автор: albedo


 



RSS Текстовая версия Сейчас: 26.11.2020, 10:43
Дизайн