Как реализовать меню?

lovezoom2
На сайте с 13.11.2009
Offline
25
407

Есть меню вида

<div id="menu">

<ul>

<li><a href="">Главная</></li>

<li><a href="">Главная2</></li>

<li><a href="">Главная3</></li>

<li><a href="">Главная4</></li>

Как сделать css

чтобы для a:link и a:hover у li были разные background-image ( реализовать не через подключение background-image для <a>, а для <li>)?

Скорая компьютерная помощь (http://www.firemob.ru). Создание сайтов (http://www.dreamlancer.ru)
A2
На сайте с 17.11.2009
Offline
52
#1
4arger
На сайте с 17.12.2008
Offline
95
#2

нифига. ради интереса полазил по интернетам - не нашел в CSSах parent.

скорее всего, реализовать задуманное можно только на JS.

если JS+jQuery прокатит, то вот:

JS


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul#my_menu li a").hover(function() {
$(this).parent().css("background", "url('35-0.gif')");
}, function() {
$(this).parent().css("background", "none");
});
});
</script>

HTML


<ul id="my_menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
P
На сайте с 19.03.2009
Offline
17
#3

Зачем у li background? Можно сделать блочный a, при этом задав размеры у li. Всего-то надо:

* {
padding:0;
margin:0;
}

#menu li {
list-style:none;
display:inline;
float:left;
width:150px;
height:30px;
overflow:hidden;
}

#menu a {
display:block;
background:...;
}

#menu a:hover {
background:...;
}

Можно выпадающее меню реализовать на чистом CSS, правда не работающее в IE6, что лечится небольшим яваскриптом

Помогу с вёрсткой, html, css, js, jquery, php, mysql ($) icq 8938933 Быстрый, удобный и недорогой хостинг (http://sweb.ru/p17046) Виза в Великобританию (http://www.englishexpert.ru/velikobritaniya/viza/viza-v-velikobritaniu/)
Varkolak
На сайте с 03.06.2005
Offline
174
#4

ссылка никак не может повлиять на список - только через ява скрипт!

html/css/js верстка и разработка сайтов на hostcms (хостцмс) - skype: varkolak1, тел: 89675012935, e-mail: anton.yurzanov@gmail.com

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий