• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak zrobić menu z lewej strony(rozwijane)

VPS Starter Arubacloud
0 głosów
2,300 wizyt
pytanie zadane 22 października 2015 w HTML i CSS przez hoffymaster Nowicjusz (120 p.)

Hej mam problem, zrobiłem menu rozwijane na środku strony. Teraz musze zrobić to z lewej strony. Coś tam pokombinowałem lecz nie wiem jak zrobic, że po najechaniu kursorem na tekst żeby rozwijał sie po prawej stornie od tekstu a nie pod nim bo wtedy zasłania inne teksty.

1 odpowiedź

+1 głos
odpowiedź 22 października 2015 przez radek024 Szeryf (77,180 p.)
Bez kodu nie wiele można powiedzieć ;)
komentarz 22 października 2015 przez hoffymaster Nowicjusz (120 p.)
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>
    Menu Dynamiczne
</TITLE>
<STYLE>
    #menu ol
    {
                                                                /* Wyłączenie punktatorów listy*/
        list-style-type: none;
        
                                                                /* Usunięcie wcięć listy */
        padding: 0px;
        margin: 0px;
        
        line-height: 2em;
        height: 2em;
    }
    #menu ol > li
    {
                                                                /* Ustawienie konstruktorów obok siebie */
        padding: 10px;
        
        background-color: #283848;
        height: 50px;
        width: 100px;
        line-height: 50px;
        border-radius: 10px 10px 10px 10px;
        margin: 10px;
    }
                                                                /* Styl dla pierwszego LI w OL */
    #menu ol > li:first-child
    {
        margin-left: 10px;
    }
    #menu ol > li:hover
    {
        background-color: #182633;
        cursor:pointer;
    }
    #menu ol > li:hover > a
    {
        color: #cdd7de;
    }
    #menu ol a
    {
        text-decoration: none;
        color: #b1bfc9;
        padding: 0px 30px;
    }
    #menu ol > li:hover > ul
    {
        display: block;
        
        /*tu skonczylem*/
    }
    
    /*-----------------------------------------*/
    
    #menu ol > li > ul
    {
        list-style-type: none;
        border-radius: 5px 5px 5px 5px;
        display: none;
        position: absolute;
        padding: 5px 0px 0px 0px;
    }
    #menu ol > li > ul > li
    {
        background-color: #283848;
        border-top: 1px solid #475664;
    }
    #menu ol > li > ul > li:last-child
    {
        border-radius: 0px 0px 5px 5px;
    }
    #menu ol > li > ul > li:hover
    {
        background-color: #c74044;
    }
    #menu ol > li > ul > li:hover > a
    {
        color: #f0bfc1;
    }
</STYLE>
</HEAD>
<BODY>
    <DIV id="menu">
        <OL>
            <LI>
                <A href="#">Hello</A>
            </LI>
            <LI>
                <A href="#">World</A>
                <UL>
                    <LI>
                        <A href="#">U-World</A>
                    </LI>
                    <LI>
                        <A href="#">A-World</A>
                    </LI>
                </UL>
            </LI>
            <LI>
                <A href="#">User</A>
                <UL>
                    <LI>
                        <A href="#">U-Login</A>
                    </LI>
                    <LI>
                        <A href="#">U-Password</A>
                    </LI>
                    <LI>
                        <A href="#">U-Email</A>
                    </LI>
                </UL>
            </LI>
            <LI>
                <A href="#">Admin</A>
                <UL>
                    <LI>
                        <A href="#">A-Login</A>
                    </LI>
                    <LI>
                        <A href="#">A-Password</A>
                    </LI>
                </UL>
            </LI>
        </OL>
    </DIV>
</BODY>
</HTML>
komentarz 22 października 2015 przez tirex Gaduła (4,430 p.)

Tak na przyszłośc uzywaj https://jsfiddle.net/ albo http://codepen.io/

Pozdrawiam;]

Podobne pytania

0 głosów
2 odpowiedzi 782 wizyt
pytanie zadane 30 sierpnia 2015 w HTML i CSS przez veryhotshark Obywatel (1,620 p.)
0 głosów
2 odpowiedzi 591 wizyt
pytanie zadane 13 kwietnia 2017 w HTML i CSS przez Skimax Początkujący (270 p.)
0 głosów
2 odpowiedzi 309 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...