<ul> <li> hover

5 naročnikov

Hello,

Delam css meni in me zanima kako spisati css, da se ob kliku na element osnovnega menija odpre "sub" meni in se ne skrije, ko kazalec miške umaknem z elementa osnovnega menija? Rad bi tudi, da je submeni viden tudi v primeru, ko klikam med elementi submenija...skratka, da se zapre šele, ko kliknem na naslednji element osnovnega menija.
Hover namreč prikaže submeni tisti čas, ko je miška na elementu osnovnega menija, ko pa se premaknem proti elementu submenija, se submeni spet skrije (med osnovnim menijem in submenijem je precejšenj razmak). Meni delam s pomočjo list <ul>.

odgovor: javascript. Več na ZS.

Verjamem, da se z js to lahko naredi. Če ne bo šlo durgače, bom prisiljen uporabiti js.
Sem pa našel primer css menija (pure css), ki se obnaša tako kot sem opisal sam.

http://www.cssplay.co.uk/menus/new-dropdown.html

Ne vem kakšen trik je uporabil tip, da je dosegel, da se meni tako obnaša...
Glavna razlika med zgornjim primerom in mojim menijem je, da je moj meni drop-down horizontal in ne vertical.

Uporabil je :focus in :active pseudo-class.

mistique, malce narobe sem razumel. Sem mislil, da mora biti submeni odprt še nekaj sekund po tem, ko greš z miško izven tega polja.

Če pa želiš čisto klasičen CSS submeni pa lahko narediš ajnfoh s klasičnem :hover css ukazom. Le da je težava v tem, da v IE6 in 7 :hover element dela samo na <a> elementu, na ostalih pa ne (recimo <li>).

Najprej si s CSS naredi strukturo tako da bodo vsi elementi vidni, nato pa dodaj:
.osnovniMeni li ul li { left: -9999em)
.osnovniMeni li:hover ul li { left: auto)

To je to.

Pozdrav!
mam problem z drop down menujem pri bloggerju. url: http://testic123.blogspot.com/search/label/aaa
in sicer ko se ti drop down menuji odprejo grejo za javascript; za reklamo ter za besedilo "Prikaz objav z oznako aaa. " zdej za samo reklamo me ne skrbi, jo že premaknem kam drugam, kamor ne bo moteča ampak tisto besedilo me pa res moti. sm iskal kakšen odgovor po netu, sam nism nič pametnega našel, velik ljudi ma tak problem.... a kdo ve kakšno rešitev? bi res lepo prosu.

tukaj je še koda menija:

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/Top level list items/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/Top level menu link items style/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /background of tabs (default state)/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

• html .jqueryslidemenu ul li a{ /IE6 hack to get sub menu links to behave correctly/ display: inline-block; }

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /tab link background during hover state/
color: white;
}

/1st sub level menu/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/Sub level menu list items (undo style from Top level List Items)/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style /
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /sub menus hover style/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

že vnaprej hvala!

Poskusi zamenjat ozadje z netransparentnim.

mi je po enih 100 prebrskanih straneh le uspelo dobit rešitev, za "display: inline;" sm dodal "z-index:100;", tako da rata "display: inline; z-index:100;" in zadeva deluje v vseh taglavnih brskalnikih, kot sm želel.

hvala useen, LP