Подсветка родительского пункта меню
Всем привет,
Ребята подскажите пожалуйста. Есть меню и при выборе дочернего пункта, текст родительского пункта перестает подсвечиваться (именно сам текст который меняется с помощью "a:hover"). Хотелось бы чтобы когда дочерние пункты активны, то и родительский пункт оставался подсвеченным. Вот сам код html: <ul id="menu"> <li> <a href="#">About us<span>Learn more about BestHost</span></a> <ul> <li><a href="#">Our team</a></li> <li><a href="#">Our datacenter</a></li> <li><a href="#">Our Blog</a></li> </ul> </li> </ul> Вод код css: #menu { padding: 0; margin: 0; font-size: 100%; } #menu li { list-style: none; float: left; height: 84px; padding: 0; margin: 0 0 0 10px; width: 206px; text-align: center; background: #78c2e6; position: relative; } #menu li:hover { background: #91c46d; } #menu li a { display: table-cell; width: 206px; height: 84px; color: #212121; text-decoration: none; text-transform:uppercase; text-align:center; vertical-align:middle; font-size: 16px; } #menu li a:hover { color: #fff; } #menu li span { position: relative; display: block; text-align: center; vertical-align:middle; text-decoration: none; text-transform:none; font-size: 13px; } #menu li ul { list-style: none; padding: 10px 0 0 0; margin: 0; width: 206px; display: none; position: absolute; left: 0; top: 84px; } #menu li ul li { float: none; width: 206px; height: 44px; margin: 0; text-align: center; background: #91c46d; } #menu li ul li:hover { background: #6ab636; } #menu li ul li a { display: table-cell; width: 206px; height: 44px; color: #fff; text-decoration: none; text-transform: none; text-align:center; vertical-align:middle; font-size: 16px; } #menu li:hover ul { display: block; } Можно ли как-то яваскриптом это подправить? |
Цитата:
Создайте для a:hover background-color (или border) - подсвечивайте его при наведении Есть еще идея, запоминать все переходы в Куки(если в меню все ссылки на текущий сайт) И, при загрузке страницы тестим куки и добавляем класс активности к нужным пунктам |
Цитата:
|
Цитата:
Как вариант... <!DOCTYPE html> <html> <head> <!-- <script src="http://code.jquery.com/jquery-latest.js"></script> <link rel="stylesheet" type="text/css" href="tmp.css" /> --> <style type="text/css"> #menu { padding: 0; margin: 0; font-size: 100%; } #menu li { list-style: none; float: left; height: 84px; padding: 0; margin: 0 0 0 10px; width: 206px; text-align: center; background: #78c2e6; position: relative; } #menu li:hover { background: #91c46d; } #menu li a { display: table-cell; width: 206px; height: 84px; color: #212121; text-decoration: none; text-transform:uppercase; text-align:center; vertical-align:middle; font-size: 16px; } #menu li:hover a { color: #fff; } #menu li span { position: relative; display: block; text-align: center; vertical-align:middle; text-decoration: none; text-transform:none; font-size: 13px; } #menu li ul { list-style: none; padding: 10px 0 0 0; margin: 0; width: 206px; display: none; position: absolute; left: 0; top: 84px; } #menu li ul li { float: none; width: 206px; height: 44px; margin: 0; text-align: center; background: #91c46d; } #menu li ul li:hover { background: #6ab636; } #menu li ul li a { display: table-cell; width: 206px; height: 44px; color: #fff; text-decoration: none; text-transform: none; text-align:center; vertical-align:middle; font-size: 16px; } #menu li:hover ul { display: block; } </style> <script type="text/javascript"> </script> </head> <body> <ul id="menu"> <li> <a href="#">About us<span>Learn more about BestHost</span></a> <ul> <li><a href="#">Our team</a></li> <li><a href="#">Our datacenter</a></li> <li><a href="#">Our Blog</a></li> </ul> </li> </ul> </body> </html> |
Deff, ссылка сама себе родитель и дочь? :)
|
Цитата:
|
:-? Я чот на :link циклонулсо (с hover
|
посмеялся :lol: ...
Вот есть у нас родительский пункт "<a href="#">About us</a>" Когда опускаешся на дочерние пункты, то естественно курсор сдвигаеш вниз и a:hover перестает работать, таким образом текст в родительском блоке принимает исходный цвет (черный). Можно ли как-то это обойти, чтобы пока работаеш с дочерними пунктами цвет текста в родительском пункте оставался белый (как при наведении)? Спасибо |
Цитата:
Почитай про ДОМ - там четко расписано про родительские и дочерние элементы. Цитата:
|
Цитата:
|
Часовой пояс GMT +3, время: 05:16. |