menu rozwijane , poziome

0

Witam serdecznie,
chciałabym zaimplementować podobne menu co znajduję się na tej str:
http://portal.bluesoft.net.pl/web/guest/home

już mam prawie gotowe :) , ale mam 2 problemy:

  1. chciałabym, aby nie było możliwości klikania na link , tylko w momencie najechania na link rozwijało się menu. Mam tak zrobione ale pokazuje się znaczek myszki do kliknięcia, a ja bym chciała aby pozostało zwykła strzałka myszki.
  2. jak użytkownik najedzie myszką na link np: < a href=" index.php ">< img src=" zdjecia/pr2.png " alt="Prawo rodzinne" /> </a> to zdjęcie tego linku zostaje przesunięte. Ja bym chciała aby pozostało w tym samym miejscu.

Strona gdzie buduję przykład znajduję się :
http://bulicka.ugu.pl/test/index.php

Działają na razie mi odwołania Prawo rodzinne i Prawo spółdzielce.

To mój kod HTML:

<ul>
 <li> <a href="index.php"><img src="zdjecia/pc2.png" alt="Prawo cywilne" />    </a> </li>
 <li> <div id="rodzinne"><a href="index.php"><img src="zdjecia/pr2.png" alt="rodzinne" /> </a> </div> </li>
 <li> <div id="spoldzielcze"><a href="index.php"><img src="zdjecia/ps2.png" alt="spółdzielcze" /> </a> </div> </li>
 <li> <a href="index.php"><img src="zdjecia/pn2.png" alt="Prawo nieruchomości" />    </a>  </li>
 <li> <a href="index.php"><img src="zdjecia/pa.png" alt="Prawo administracyjne" />    </a>  </li>
 <li> <a href="index.php"><img src="zdjecia/pp2.png" alt="Prawo pracy" />     </a>  </li>
        
</ul>

a to kod CSS:

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

#rodzinne  #spoldzielcze a{
	background: white;
}

ul li {
	float: left;
}

#rodzinne a:hover {

	background: url('zdjecia/tekst_pr.png') repeat-y top;
	padding-left:250px;
	padding-top: 10px;
	padding-bottom: 800px;
}
#spoldzielcze a:hover {

	background: url('zdjecia/tekst_ps.png') repeat-y top;
	padding-left:250px;
	padding-top: 10px;
	padding-bottom: 800px;
}

Proszę uprzejmie o wskazówkę czego mi brakuje. Czyli jak usunąć, aby podczas najechania na link nie zmieniała się myszka z strzałki na rączkę i zdjęcie np linku < a href=" index.php ">< img src=" zdjecia/pr2.png " alt="rodzinne" /> pozostało w tym samym miejscu nawet jak użytkownik najedzie na link?

0

Kasiu droga, ponownie: nie rób menu `na zdjęciach''... to nieładne, niegrzeczne i problematyczne... CSS, CSS, CSS.

  1. właściwość css cursor:default - ew. sprawdź czy różne przeglądarki nie interpretują tego różnie - ustawiasz to dla linków menu - właściwie powinno starczyć dla a.hover, ale sprawdź sobie

Ustaw id dla elementu ul w którym masz menu (np. <ul id="menu">), bo wtedy możesz sobie np. napisać

#menu a.hover {cursor:default; }

I będzie się to odnosiło tylko do elementów a znajdujących się wewnątrz menu,

  1. zostaje przesunięte, bo w #rodzinne a:hover masz ustawiony padding-left: 250px - to kawał na prawo (hover to najechanie na element, padding to odsunięcie elementu), to samo spoldzielcze.

  2. masz trochę pomieszane :
    w li masz wstawiony obrazek (w linku), a potem w hover podmieniasz tło... na dobrą sprawę, powinnaś mieć tło dla normalnego elementu i tło dla 'najechanego' elementu. Nie sprawdzałem, ale może być i tak, że tego ustawionego obrazka w tle nawet nie zobaczysz w "najechaniu" (bo przysłania go obrazek w img)

I na dobranoc, polecę ci stronkę: http://www.dynamicdrive.com/style - znajdziesz tam przykłady różnych menu na css-ie. Zresztą nie tylko menu :)

0
DZIĘKUJE  

1 podpowiedź mi działa :) :) :)

tylko jeszcze z drugą sobie nie mogę poradzić.
Tak masz racje na zdjęciach jest nie ładnie, tekst strasznie nie wyraźnie widać

1 użytkowników online, w tym zalogowanych: 0, gości: 1