popout menu |
popout menu |
minidiapolis |
Apr 14 2008, 08:34 PM
Post
#1
|
Serious Coder Group: Members Posts: 437 Joined: 3-September 06 Member No.: 57 |
I'm creating a popout menu for the very first time. Using this line as an example
sitems[0]=["<big><font face='Arial'>Site Menu</font></big>", ""] is the first step to replace sitems with one of my menu options? |
Frederiek |
Apr 28 2008, 03:04 PM
Post
#2
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
I think you got confused by the diffrent examples and mixed things up. That's partly my fault (sorry), but also caused by the fact that you don't seem to know what you are doing (no offence).
This is what your HTML for the menu should look like: CODE <ul id="nav"> <li><a href="#">About Us </a> <ul> <li><a href="#">Our Beliefs</a></li> <li><a href="#">Our Doctrine</a></li> <li><a href="#">Mission Statement</a></li> </ul> </li> <li><a href="#">Programs</a> <ul> <li><a href="#">Z-street</a></li> <li><a href="#">FYI (Fountain Youth Inc)</a></li> <li><a href="#">Small Groups</a></li> </ul> </li> <li><a href="#">Staff </a> <ul> <li><a href="#">Ministry Team</a></li> <li><a href="#">Leadership Team<a></li> </ul> </li> </ul> and this your CSS: CODE body { font-family: Arial, Helvetica, sans-serif; } #nav, #nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; float : left; width : 11em; } #nav li { /* all list items */ position : relative; float : left; line-height : 1.25em; margin-bottom : -1px; width: 11em; } #nav li ul { /* second-level lists */ position : absolute; left: -999em; margin-left : 11.05em; margin-top : -1.35em; } #nav li a { width: 11em; w\idth : 10em; display : block; color : black; font-weight : bold; text-decoration : none; background-color : white; border : 1px solid black; padding : 0 0.5em; } #nav li a:hover { color : white; background-color : black; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ left: auto; } #content { margin-left : 12em; } Put that in a test page and try it. I'm sure that's what you're after. |
Lo-Fi Version | Time is now: 25th September 2024 - 12:36 PM |