Здравствуйте уважаемые гуру... Вопрос от новичка...

Сообщение сайта

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

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

Здравствуйте уважаемые гуру... Вопрос от новичка...

Опции

Marinec

Topic Starter сообщение

22.7.2013, 15:50; Ответить: Marinec

Сообщение #1

Новичок

Группа: Viewer
Сообщений: 6
Регистрация: 14.7.2012
Поблагодарили: 0 раз
Репутация:

Есть меню 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]

Ответить с цитированием данного сообщения

Degradator

24.7.2013, 14:25; Ответить: Degradator

Сообщение #2

Группа: Active User
Сообщений: 2113
Регистрация: 2.7.2012
Поблагодарили: 18 раз
Репутация:

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

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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Предложение по форуму от новичка	22	Yogsvet	5444	7.3.2024, 20:09 автор: Lumex
Посоветуйте оффер казино для новичка	5	Megaspryt	1642	23.1.2024, 15:31 автор: markp_1xBet
Вопрос - платное размещение баннеров на сайте	10	WGN	3180	14.12.2020, 14:20 автор: Peterson
Ищу себя. Вёрстка, Программирование, Продающие тексты и другое от Новичка бесплатно	0	iCrew	1549	11.5.2020, 12:37 автор: iCrew
Вопрос по рекламе в "инстаграме" Только активные аккаунты могут создавать или редактировать рекламу	8	Zubkov	16046	17.1.2020, 17:49 автор: Forumacc

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 16.4.2024, 20:15

Дизайн