Menu netjes maken

[Evert B.]

Hallo allemaal,

Ik zag al dat er mooie menu's gemaakt worden! (echt super mooi brentnl !!!)

Zelf ben ik nu ook al aardig opgeschoten met mijn menu.
Ik wilde een linear horizontal menu maken, en met wat behulp van het forum en google ben ik tot het volgende gekomen.
Een combinatie van het minimal_menu.tpl en de volgende CSS leverde dit op:

Code: Select all

#primary-nav,
#primary-nav li,
#primary-nav ul {
 list-style: none; 
 margin: 0;
 padding: 0;
}

#primary-nav {
 position: relative;
 float: right;
 background-color: #;  
}

#primary-nav a, a:active, a:visited {
 color: #FFFFFF;             
 line-height: 20px;        
 font-family: Tahoma;       
 font-size: 12px;           
 text-decoration: none;   
}
#primary-nav a:hover {
 color: #937004;
}

#primary-nav li {
 float: right;             
 vertical-align: middle;
 padding-right: 7px;
 padding-left: 7px;
}

#primary-nav li.hover,
#primary-nav li:hover {
 position: relative;
 cursor: default;
}

#primary-nav ul {
 visibility: hidden;
 position: absolute;
 top: 100%;              /* needed for ie7 otherwise sub shows under main nav */
 right: 0px;              /* was 0px, heb ik veranderd, checken of dit blijvend is met meer childs */
 border-top: 0px solid #F2DD7D;
 border-left: solid 0px #F2DD7D;
 border-bottom: solid 1px #F2DD7D;
 border-right: solid 0px #F2DD7D;      
 background-color: #FFF;
 min-width: 410px;
}

#primary-nav ul a, a:active, a:visited {
 color: #937004;             
 line-height: 20px;         
 font-family: Tahoma;      
 font-size: 12px;           
 text-decoration: none;     
}
#primary-nav ul a:hover {
 color: #F2DD7D;
 text-decoration: none;
}

#primary-nav ul li {
 float: right;              
}

#primary-nav li:hover > ul {
 visibility: visible;
}

#primary-nav li.hover,       
#primary-nav li:hover {
 position: static;
}

Zoals op het plaatje te zien is zit ik nog met drie punten:

• 1. hoe krijg ik de childs netjes onder het menuitem waar ik overheen hover? DUs zodat je niet zoals op het plaatje helemaal naar rechts moet muizen.
• 2. hoe krijg ik het zo dat het submenu zichtbaar blijft nadat ik op een menu- of submenuitem heb geklikt?
• 3. in firefox staat het gehele menu links, en in IE staat het rechts?!? Is op zich niet echt lelijk maar liever heb ik het gelijk.

[deactivated010521]

----------

[Jos]

Dropdown menus in css is naar mijn idee hogeschool werk, omdat een juist een menu goed crossbrowser moet werken.

Er zijn anderen die daar zich speciaal en uitgebreid in verdiept hebben (bijv css-play) Neem dan liever daar een menu van over en werk zoals in de topic van Brentnl is beschreven, dwz pas alleen de kleurtjes en achtergrondplaatjes aan in de css. Laat de html-structuur en css-structuur in tact.