Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

familiavindicis

Rozwijane menu w pionie

Promowane odpowiedzi

Witam, mam pytanie. A mianowicie chciałem aby moje menu wyglądało tak, że po najechaniu na przykładowo "nexus4" rozwijało się dodatkowe menu pod nim w pionie. Niestety coś idzie nie tak i mimo kombinowania przez godzinę nie dałem rady. Niby jest kilka na prawdę dobrych poradników jak takie menu robić, sugerowałem się nimi, ale ciężko jest zrobić to podczas gdy ja mam już swoje zrobione ( bez tego pionowego ), wypozycjonowane itp. 

Fragment z html'a

<div id="nav">
    
    <ol>
        <li><a href="/C:/Users/Patryk/Desktop/NEXUS/index.html">Google Nexus</a></li>
        <li><a href="#">Nexus 4</a>
    <ul>
                        <li><a href="#">Przyklad 1</a></li>
                        <li><a href="#">Przyklad 2</a></li>
                        <li><a href="#">Przyklad 3</a></li>
                        <li><a href="#">Przyklad 4</a></li>
                    </ul>
        </li>
        <li><a href="#">Nexus 5</a></li>
        <li><a href="#">Nexus 6</a></li>
        <li><a href="#">Nexus 5X</a></li>
        <li><a href="#">Nexus 6P</a></li>
    </ol>
    </div>

Fragment z css:

body {
    margin: 0;
    background: black;
    font-family: Verdana, Tahoma, Geneva, sans-serif;
    font-size: 11px;
    color: black;
    }

#wrapper {
    width: 850px;
    margin: 0 auto;
    }
    
#top {
    background-image: url("../gfx/logo2.jpg");
    background-size: 850px 200px;
    height: 121px;
    position: relative;
    border-top:  1px black solid;
    }
#logo h1 {
    background: url("../gfx/123.png") no-repeat;
    height: 50px;
    position: absolute;
    width: 150px;
    top: 45px;
    left: 22%;
    z-index: 11;
}

#logo h1 a {
    display: block;
    text-indent: -999px;
    }
    
#nav {
    background: #515151;
}
#nav ol {
    margin: 0;
    padding: 10px;
    list-style-type:none;
    display: inline-block;
}

#nav ol li {
    display: inline;
    list-style: none;
    padding: 10px;
    /*border-right: 1px dashed #751b1b;    //// obramowanie między elementami nawigacji*/
}
#nav ol li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
#nav ol li a:hover {
    color: green;
}

#nav ol li:hover {
    background-color: #282828 ;
    
}

#nav ol > li:hover > ul
{
    display: block;
}

#numer {
    margin: -24px 13px 12px 0;
    text-align: right;
    color: #fff;
}
#content {
    background: #fff;
    padding-top: 1px;
}
#info {
    margin: 1em;
    font-size: 1.1em;
}
#witamy {
    width: 300px;
    font-size: 1.3em;
    padding: 10px;
    margin: 0 0 1.5em 0;

}
#nexus {
    margin: 1em;
    font-size: 1em;
}
#nlogo {
    background: url("../gfx/nlogo.png") no-repeat ;
    height: 90px;
    position: absolute;
    width: 100px;
    top: 230px;
    left: 900px;
}
#android {
    margin-top: 1em;
    margin-left: 1em;
}

#andinfo {
    margin: 1em;
}
#andlogo {
    background: url("../gfx/andlogo.png") no-repeat;
    height: 90px;
    position: absolute;
    width: 100px;
    top: 430px;
    left: 900px;
}
#c4 {
    height:150px;
}
#andinfocd {
    margin: 1em;
}
#androidcd {
    margin-top: 1em;
    margin-left: 1em;
}
#phone {
    background: url("../gfx/phone.jpg") no-repeat;
    height: 180px;
    position: absolute;
    width: 145px;
    top: 580px;
    left: 870px;
}

#footer {
    width: 850px;
    background: #515151;
    font-size: 11px;
    height:30px;
    color: white;
    margin: 0 auto;
}
#copy {
    padding: 8px;
}

ol > li > ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: 40px;
    display: none;
}


A w praktyce po najechaniu na "nexus4" wygląda to tak:

http://screenshot.sh/m7uoBu2W2FVWV

		

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Tak jak pisałem, wzorowałe się na tym nawet które podałeś ( 1 link z google ) ale cięzko mi jest połapać się jak to scalić z moim kodem. Dodawałem linijka po linijce aby sprawdzać co za co odpowiada i wszystko było ok do momentu zastosowania tego:


#nav ol > li:hover > ul
{
    display: block;
}

 

Powoduje to właśnie pojawienie się tego submenu, bez tego go w ogóle nie ma. Z tym jest- ale w poziomie i rozjechane. 

W pewnym stopniu problem został rozwiązany. Problemem było to że tekst wyświetlał się w poziomie przez deklaracje w #nav . Po edycji kodu


#nav ol li:hover { 
   background-color: #282828 ; 
   width: 100px; 
   float: left; 
    
}

Powstał inny problem. A mianowicie. 

Wygląda to tak przed najechaniem na Nexus4:

A tak po... :

http://screenshot.sh/m3eoTlgU6aWyd
http://screenshot.sh/mKSZERWBqMSpX

		

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.


×