Autor Zpráva
microfox
Profil *
#1 · Zasláno: 1. 6. 2012, 22:11:10 · Upravil/a: microfox
Odpovědět Citovat 
<style>
#nav {position:relative; z-index:200; font-family:arial, verdana, sans-serif;}

#nav ul.sub
{left:0px; top:0px; background: #F8F8F6; padding:3px; border:1px solid #AAAAAA; white-space:nowrap; width:200px; height:auto; z-index:300;}
#nav ul.sub li
{display:block; height:27px; position:relative; float:left; width:200px; font-weight:normal;}
#nav ul.sub li a
{display:block; font-size:11px; height:25px; width:198px; line-height:25px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #F8F8F6;}
#nav ul.sub li a.fly
{background:#F8F8F6 url(arrow.gif) 190px 6px no-repeat;}
#nav ul.sub li a:hover 
{background:#3188DA; color:#fff; border-color:#fff;}
#nav ul.sub li a.fly:hover
{background:#3188DA url(arrow_over.gif) 190px 6px no-repeat; color:#fff;}


#nav li:hover ul,
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul
{left:200px; top:-4px; background: #F8F8F6; padding:3px; border:1px solid #AAAAAA; white-space:nowrap; width:200px; z-index:400; height:auto;}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#3188DA url(arrow_over.gif) 190px 6px no-repeat; color:#fff; border-color:#fff;} 

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#F8F8F6 url(arrow.gif) 190px 6px no-repeat; color:#000; border-color:#F8F8F6;}
</style>

<ul id="nav">
<ul class="sub">
           <li><a href="#nogo17">Bayonet mount</a></li>
            <li><a href="" class="fly">Lenses</a>
                    <ul>
                    
                         <li><a href="#nogo17">Bayonet mount</a></li>
                        <li><a href="#nogo16" class="fly">Non standard</a>
                            <ul>
                                <li><a href="#nogo17">Bayonet mount</a></li>
                         <li><a href="#nogo17">Bayonet mount</a></li>
               <li><a href="#nogo16" class="fly">Non standard</a>
                            <ul>
                                <li><a href="#nogo17">Bayonet mount</a></li>
                         <li><a href="#nogo17">Bayonet mount</a></li>
               <li><a href="#nogo16" class="fly">Non standard</a>
                            <ul>
                                <li><a href="#nogo17">Bayonet mount</a></li>
                         <li><a href="#nogo17">Bayonet mount</a></li>
               <li><a href="#nogo17">Bayonet mount</a></li>  
                            </ul>
                        </li>
                            </ul>
                        </li>  
                            </ul>
                        </li>
                    </ul>
            </li>
              <li><a href="#nogo17">Bayonet mount</a></li>
        </ul>    
</ul>

Ukázka zde: http://tomaskubicek.cz/test/pro_dropdown_2.html

Když postupně pojedu do podnabídek tak se mě vždy označí modře ta ze který jsem se dostal dál...ale v té hlavní nabídce to tak není...Nevíte kde je chyba a jak to doupravit aby se zvýrazňovali ve všech nabídkách vybrané položky?


http://www.image-upload.cz/upload/image-4059/original/0-ggg.png - zde ukazuji názorně pro jistotu přesně co mám na mysli
KGW
Profil
#2 · Zasláno: 1. 6. 2012, 22:56:20
Odpovědět Citovat
U mě vše funguje.
microfox
Profil *
#3 · Zasláno: 1. 6. 2012, 23:01:20 · Upravil/a: microfox
Odpovědět Citovat
Takže máte i zvýrazněnou položku jak ukazuju na obrázku že neni modrá? Divné...


http://www.image-upload.cz/upload/image-4063/original/0-ggg.png - aktuální stav 

<style>
#nav {position:relative; z-index:200; font-family:arial, verdana, sans-serif;}

#nav ul.sub
{left:0px; top:0px; background: #F8F8F6; padding:3px; border:1px solid #AAAAAA; white-space:nowrap; width:200px; height:auto; z-index:300;}
#nav ul.sub li
{display:block; height:27px; position:relative; float:left; width:200px; font-weight:normal;}
#nav ul.sub li a
{display:block; font-size:11px; height:25px; width:198px; line-height:25px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #F8F8F6;}


#nav ul.sub li a.fly
{background:#F8F8F6 url(arrow.gif) 190px 6px no-repeat;}
#nav ul.sub li a:hover 
{background:#3188DA; color:#fff; border-color:#fff;} /* Zde nastavuji barvu vybrane polozky ktera nema podnabidku */
#nav ul.sub li a.fly:hover
{background:#3188DA url(arrow_over.gif) 190px 6px no-repeat; color:#fff; border-color:#fff;} 


#nav li:hover ul,
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul
{left:200px; top:-4px; background: #F8F8F6; padding:3px; border:1px solid #AAAAAA; white-space:nowrap; width:200px; z-index:400; height:auto;}     /* Zde nastavuji pozadi podnabidek */ 

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}


#nav li:hover a.fly, 
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#3188DA url(arrow_over.gif) 190px 6px no-repeat; color:#fff; border-color:#fff;} 


#nav li:hover li a.fly,
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#F8F8F6 url(arrow.gif) 190px 6px no-repeat; color:#000; border-color:#F8F8F6;} 


</style>
Medvídek
Profil
#4 · Zasláno: 1. 6. 2012, 23:12:18 · Upravil/a: Medvídek o 4 minuty později
Odpovědět Citovat
microfox: 
#nav ul.sub li:hover a.fly {
    background:#3188DA url(arrow_over.gif) 190px 6px no-repeat; 
    color:#fff; 
    border-color:#fff;
}

ale obarví to i tu druhou. Takže bych změnil u toho prvního (nebo přidal) třídu místo toho fly, aby to mělo unikátní třídu.
http://filez.party-akce.cz/menu.png
microfox
Profil *
#5 · Zasláno: 1. 6. 2012, 23:18:21
Odpovědět Citovat
mohl bych poprosit jak kod? ja se v tom uz nak ztracim...omlouvam se ze prudim s takovou blbosti...uz je pozdni hodina :D pardón
Medvídek
Profil
#6 · Zasláno: 1. 6. 2012, 23:30:25 · Upravil/a: Medvídek o minutu později
Odpovědět Citovat
microfox:

do CSS Přidat: 
#nav ul.sub li:hover a.first {
    background: #3188DA url(arrow_over.gif) 190px 6px no-repeat;
    color: #FFF;
    border: 1px solid #FFF;
}

v HTML upravit první položky v menu, který vyjíždějí na toto:
//EDIT: Je to jen zkopčený z Firebugu, takže ten html kód přesně neodpovídá, jde jen o přidání třídy, je to tučně. 

<ul id="nav">
  <ul class="sub">
    <li>
      <li>
        <a class="fly first" href="">Lenses</a>
        <ul>
      </li>
    <li>
  </ul>
</ul>
Časová prodleva: 12 let

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0