ugrás a tartalomhoz

Kétsoros menü készítése

Kribali · 2011. Dec. 22. (Cs), 18.18
Kétsoros menüt szeretnék készíteni, HTML+CSS használatával.
Felső sorban a főmenüpontok, alsó sorban az almenüpontok találhatóak. Az alsó sorban az adott főmenühöz tartozó almenüpontok jelennek meg.
Ehhez szeretnék segítséget kérni.
Eddig jutottam:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
    #nav li {float:left;position:relative;margin-right: 20px;}  
    #nav ul {position:absolute;left: -40px;top:1em;}
.almenu li {float:left;}
.almenu li a{color:#0C0;}
</style>
</head>

<body>
    <ul id="nav">  
     <li><a href="#">Főmenü</a>  
      <ul class="almenu">  
       <li><a href="#">Almenü1</a></li>  
       <li><a href="#">Almenü2</a></li>  
       <li><a href="#">Almenü3</a></li>  
      </ul>  
     </li>
     <li><a href="#">Főmenü2</a>
     <ul class="almenu">
       <li><a href="#">Almenü4</a></li>  
       <li><a href="#">Almenü5</a></li>
     </ul>
     </li>  
    </ul>  
</body>


Azt nem értem, miért nem kerülnek egymás mellé az almenüpontok, pedig elvileg megadtam. Mit rontottam el?
‹ Jquery- és ajaxxal Mysql adatbazisban update File uploader widget kérdés (jQuery) ›
 ■
1

Azt javaslom, hogy Firefoxban

Hidvégi Gábor · 2011. Dec. 22. (Cs), 18.22
Azt javaslom, hogy Firefoxban a Firebug segítségével nézd meg az egyes HTML elemek stílusait, akkor rá fogsz jönni a megoldásra.
2

absolute

Poetro · 2011. Dec. 22. (Cs), 18.38
Az absolute pozicionálás miatt a doboz olyan keskeny lesz, amilyen keskeny tud lenni, mivel nem adtál meg eleve szélességet. Tedd meg, hogy például megadsz neki szélességet, vagy az li elemeket inline-ra változtatod, és a .almenu-t pedig nowrap-ra. Az absolute pozicionálással természetesen még az is együtt jár, hogy az almenük ebben az esetben fedni fogják egymást.
3

Erre számítottam

Kribali · 2011. Dec. 22. (Cs), 21.17
Köszi Poetro, valóban jó lett, csak szélességet kellett volna adnom a #nav ul-nek.
Most mindkét főmenühöz tartozó almenük megjelennek. Én viszont azt szeretném, hogy csak az aktív főmenü almenüje-i jelenjenek meg. Ez CSS-el megvalósítható?
4

aktív

Poetro · 2011. Dec. 22. (Cs), 22.03
Mitől lesz egy főmenü aktív? Mondjuk adj neki egy osztályt .active néven.
#nav .almenu { display: none; }
#nav .active .almenu { display: block; }
5

Ha jól értem...

Kribali · 2011. Dec. 22. (Cs), 22.52
Sajnos így nem működik:

<style type="text/css">
    #nav li {float:left;position:relative;margin-right: 20px;}  
    #nav ul {position:absolute;left: -40px;top:1em;width:600px;}
#nav .active .almenu { display: block;}
.almenu li {float:left;display: none;}
.almenu li a{color:#0C0;}
.active {display: block;}
</style>
<title>Főmenü 1</title>
</head>

<body>
    <ul id="nav">  
     <li><a class="active" href="Fomenu1.html">Főmenü</a>  
      <ul class="almenu">  
       <li><a href="#">Almenü1</a></li>  
       <li><a href="#">Almenü2</a></li>  
       <li><a href="#">Almenü3</a></li>  
      </ul>  
     </li>
     <li><a href="Fomenu2.html">Főmenü2</a>
     <ul class="almenu">
       <li><a href="#">Almenü4</a></li>  
       <li><a href="#">Almenü5</a></li>
     </ul>
     </li>  
    </ul>  
</body>

Most egyik almenü sem látszik.
6

Nem jól érted

Poetro · 2011. Dec. 22. (Cs), 22.56
    <ul id="nav">  
     <li class="active"><a href="Fomenu1.html">Főmenü</a>  
      <ul class="almenu">  
       <li><a href="#">Almenü1</a></li>  
       <li><a href="#">Almenü2</a></li>  
       <li><a href="#">Almenü3</a></li>  
      </ul>  
     </li>
     <li><a href="Fomenu2.html">Főmenü2</a>
     <ul class="almenu">
       <li><a href="#">Almenü4</a></li>  
       <li><a href="#">Almenü5</a></li>
     </ul>
     </li>   
    </ul>
7

Köszönöm!

Kribali · 2011. Dec. 23. (P), 13.17
Köszi a segítséget! :-)
Rendesen műxik.