Baza unui meniu in CSS ! Pentru incepatori

[RoberrTh0]

CSS

/* --------- Meniu --------- */

#meniu {

height: 30px; /* Seteaza inaltimea pe care o doresti */

margin: 0 0 10px; /* Ajuta la adaugare de spatiu */

}

#meniu ul {

margin: 0; padding: 0; /* Necesar doar in cazul in care nu aveti un cod css gen normalize.css ( Doar pentru resetare ) */

}

#meniu li {

display: block;

float: left;

line-height: 30px; /* ai ar trebui sa ai inaltimea exact cu cea de mai sus din #meniu */

height: 30px; /* ai ar trebui sa ai inaltimea exact cu cea de mai sus din #meniu */

margin: 0; padding: 0; /* Necesar doar in cazul in care nu ai reset */

position: relative; /* Necesar pentru a pozitiona sub meniul */

}

#meniu li a {

display: block;

height: 30px;

line-height: 30px;

padding: 0 15px;

}

#meniu .current-menu-item a, #meniu .current_page_item a, #meniu a:hover {

color: #000;

background: #ccc;

}

#meniu ul ul { /* Vizeaza toate sub meniurile */

display: none; /* Ascude sub meniul */

position: absolute;

top: 30px; /* Ar trebui sa fie la fel ca si #main { height:30px; }*/

}

#meniu ul ul li { /* this targets all submenu items */

float: none; /* overwriting our float up above */

width: 150px;

}

#meniu ul ul li a {

padding: 5px 10px;

}

#meniu ul li:hover > ul {

display: block; /* show sub menus when hovering over a parent */

}

#meniu ul ul li ul {

left: 150px;

top: 0; }

HTML

<div id="meniu" >

<ul>

<li><a href="#> Acasa </a></li>

<li><a href="#> Sub Meniu </a>

<ul>

<li><a href="#> Level 1</a> </li>

<li><a href="#> Level 1 </a> </li>

<li><a href="#> Level 2</a>

<ul>

<li><a href="#> Level 3</a> </li>

<li><a href="#> Level 3 </a> </li>

<li><a href="#> Level 3</a> </li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

Imi cer scuze pentru incoerenta . Pentru nelamuriri lasa un comentariu .

P.S : De lene nu am comentat mai mult codu sursa . Testeaza si gandeste frate !!!!!!

UPDATE: Pentru a pozitiona usor fara batai de cap acest meniu foloseste urmatorul cod :

CSS

.container-meniu {

position:relative;

z-index:100;

left: 20px ; /* Un exemplu , poti adauga valuare dorita , cand folosim position:relative si adaugam left:20px; meniu se va duce spre dreapta cu 20px */

bottom:20px;

}

<div class="container-meniu">

codul html de mai sus al meniului

</div>

Edited March 3, 2013 by RoberrTh0