problēmas ar css/js drop down menu

[tomsg]

Lūk ieliku piemēru: http://tomy.lathost.lv/menu_test/

 

Uz firefox un operas strādā korekti, bet atverot uz internet explorer - izlecošā menū tiek sabojāta (fonā rādās bildes no pirmā līmeņa menu, mainās izmēri).

 

Pirmā līmeņa menu ar css noformēts saraksts (ul) ar hover effektu. Tiktāl visur ir ok.

Bet kad pievienoju otrā līmeņa dropdown menu - sākas problēmas.

Drop down menu pamats ņemts no - http://dynamicdrive.com/dynamicindex1/anylinkcss.htm , tur ir css un js, kas operē ar div tagos iekļautajiem linkiem, izkārtojot tos kā drop down menu.

 

Kur varētu būt problēma, kapēc uz IE nestrādā korekti (vai arī strādā korekti un kods ir nekorekts?)

 

Un vēl - varbūt kādam ir idejas kā pielabot kodu, lai pēc tam kad es no pirmā līmeņa menu pāreju uz drop down menu - uzreiz neisledzās hover efekts augšējai bildītei pirmajā līmeņa menu.

 

Cerams, ka skaidri izteicos, ja kas - varu noprecizēt.

[xPtv45z]

IE developer toolbars uzrāda, ka apslēptās izvēlnes div ir iekš li, līdz ar to uz a tagiem darbojās definējums .man a{...}.

Kaut kāda iemesla dēļ </li> nenostrādā tā kā vajadzētu. Pārbaudi vai visur ir pēdiņas un vēl visu ko, kas varētu to ietekmēt.

 

Viena ideja ienāca prātā. Vai šādi vispār var veidot?

<ul>
 <li></li>
 [b]<div></div>[/b]
 <li></li>
</ul>

ul tags jau var saturēt tikai li tagus, jeb es kļūdos?

Edited September 27, 2007 by xPtv45z

[andrisp]

ul tikai li, bet li jebkādus.

[tomsg]

Paldies par hintu.

 

Jā, problēma, ka inline elimentā tika ievietots bloka elements, ja pareizi sapratu.

 

Iznesu div tagos esošo kontentu ārpus ul tagiem - un viss aizgāja :)

 

Tagad par otro jautājumu - anyone?

[nemec]

Es taisiitu peec shis te metodes

 

.js

function hovThis(el)

{

el.onmouseout = function()

{

this.className = this.prClass;

return false;

}

el.onmouseover = function()

{

this.prClass = this.className;

this.className = this.prClass + ' hover';

return false;

}

}

.css

ul ul

{

position: absolute;

display: none;

}

li

{

/*hover for IE*/

h: expression(hovThis(this));

position: relative;

}

li:hover ul, li.hover

{

display: block;

}

.html

<ul>

<li><a title="women" href="#"></a>

<ul>

<li><a title="women" href="#"></a></li>

<li><a title="women" href="#"></a></li>

</ul>

</li>

</ul>