Rozwijane menu zamyka się po najechaniu na hover.

pytanie zadane 5 stycznia 2016 w HTML i CSS przez Jordi Początkujący (290 p.)

Witam, mam pewien problem, mianowicie stworzyłem stronę o tematyce sportowej i gdy najadę na rozwijane menu "Zawodnicy" ono się rozwija, lecz gdy zjadę niżej wybierając kategorię "Napastnicy", która jest na samym dole menu zamyka się,ponieważ podświetla się artykuł, który ma w CSS`ie ustawiony hover na zmianę koloru.

Mówiąc prościej mam rozwijane menu, gdy się rozwinie, niektóre kategorie zasłaniają część artykułu, który jak wyżej napisałem zmienia kolor po najechaniu, gdy najadę kursorem na te kategorię menu się wyłącza, ponieważ zmienia się kolor artykułu.

Kolejnym problemem jest to, że ten owy artykuł podświetla się po najechaniu na część, która nie jest w jego obrębie, lecz jest np. o 20px w prawo lub w dół.

Nie będę wrzucał całego kodu, ponieważ wszystko jest w HTML i CSS, więc mam kilkanaście podstron.

Całość jest w paczce poniżej, możecie zobaczyć jak to wygląda w praktyce.

Będę bardzo wdzięczny za każdą pomoc.

http://www59.zippyshare.com/v/1KTegqiH/file.html

1 odpowiedź

odpowiedź 5 stycznia 2016 przez niezalogowany

Skopiuj pliki na jedną z tych stron, bo nikt nie będzie ściągać twoich plików

https://jsfiddle.net/

http://codepen.io/

komentarz 5 stycznia 2016 przez Jordi Początkujący (290 p.)

Z tego co widzę da się wgrać tylko jeden kod, więc jak mam wkleić tam kilkanaście podstron?

komentarz 5 stycznia 2016 przez niezalogowany

No piszesz że masz problem z menu, to wklej tylko stronę główną html i style CSS do tego pliku

komentarz 5 stycznia 2016 przez Jordi Początkujący (290 p.)

http://codepen.io/anon/pen/zrZZxd

komentarz 6 stycznia 2016 przez Czort Nałogowiec (32,500 p.)
edycja 6 stycznia 2016 przez Czort

Co do samego menu to listę dobrze umieścić w tagach <nav></nav> albo jak już chcesz się trzymać starej wersji html to <div id="nav"></div>. Co do tego przypadku to wystarczy do ol w css dopisać:

ol{
position:absolute;
z-index:1000;
}

Edit: Dodatkowo popraw wewnętrzną listę <ul>, znaczniki html są nieprawidłowo zagnieżdżone, np. <li><a href="napastnicy.html">Napastnicy</li></a>

komentarz 6 stycznia 2016 przez Jordi Początkujący (290 p.)

Dzięki, rozwijane menu poprawnie działa, lecz nie bardzo zrozumiałem ostatnie zdanie.

I to podświetlanie artykułu z prawej strony i dołu mimo,że nie najadę na niego myszką ,lecz np. 20px obok.

komentarz 6 stycznia 2016 przez Czort Nałogowiec (32,500 p.)

Na chłopski rozum: znacznik, który jest wewnątrz drugiego ma być wewnątrz a nie kończyć się gdziekolwiek, czyli <li><a></a></li>.

komentarz 11 stycznia 2016 przez Jordi Początkujący (290 p.)

Dalej nie rozumiem :D

Chodzi mi o to, że podświetla mi artykuł mimo, że na niego nie najechałem, tylko najechałem obok(prawo lub dół).

.artykul
{
	height: 120px;
	text-align: left;
	width: 580px;
	border-top: 1px dotted black;
	border-bottom: 1px dotted black;
}

.artykul:hover
{
	background-color: #ababab;
}

<div id="content">
		<div  class="artykul"><div class="miniaturka"><img src="Grafiki/1.png"><a href="artykul1.html"><div class="tekst">Znamy nominacje do złotej piłki!<br><font size="1">Wśród nominowanych znalazło się sześciu piłkarzy Barcelony.</a></div></div></div><br><br></font>
		<div  class="artykul"><div class="miniaturka"><img src="Grafiki/2.png"><a href="artykul2.html"><div class="tekst">Claudio Bravo najlepszym zawodnikiem Chile!<br><font size="1">Bravo odebrał nagrodę osobiście podczas ceremonii, która odbyła się w Santiago de Chile. </font></a></div></div></div><br><br>
		<div  class="artykul"><div class="miniaturka"><img src="Grafiki/3.png"><a href="artykul3.html"><div class="tekst">Turan i Vidal nominowani na mecz z Espanyol`em!<br><font size="1">Luis Enrique:Turan i Vidal na pewno zagrają w jutrzejszym meczu.</a></div></div></div><br><br></font>
		<div  class="artykul"><div class="miniaturka"><img src="Grafiki/4.png"><a href="artykul4.html"><div class="tekst">Barca rozważa sprzedaż ter Stegena!<br><font size="1">Jeśli do klubu wpłynie oferta w wysokości 28 mln,Barca sprzeda ter Stegena.</a></div></div></div>
		</div>