I finally got the superfish menu system for jQuery working in my
application (after some idiot moves on my part). The problem now is
that the menu system, which is located in my header, is not displaying
on top of the page but instead the content of my main content area.
On another note I'm using Model-Glue 2.0.304 for my framework so I'll
just try to include code snippets.
The following is my css code so far (I know parts of it are extemely
ugly, so be gentle).
------------------------------------------------------------------------------------------------------------------------------------
/* Used for the background of the index page. */
body{margin: 0px 0px 0px 0px;background-color:#FFFFFF;font-
family:Arial, Helvetica, sans-serif;font-size:12px;padding:0px 0px 0px
0px;width:100%;}
/* ----------general site layout---------------------- */
h1 {font-size: 11px;text-transform:uppercase;background-color:
#E0A3B7;border-top:1px solid #564b47;border-bottom:1px solid
#564b47;padding:5px 15px;margin:0px }
h2 {font-size:20px;font-weight: normal;padding: 5px 10px;margin:0px;}
img.download {vertical-align:middle;}
/* ----------container to center the layout-------------- */
#container {width:100%;margin: 0 auto;text-align:left;}
/* -----------------content--------------------- */
#content {background-color: #ffffff;padding: 0px;margin-left:
0px;margin-right: 0px;width:100%;}
div#content {min-height:100%;height:expression(this.scrollHeight >
600 ? "auto":"600px");}
p, pre{padding: 5px 10px;margin:0px;}
/* -----------footer--------------------------- */
#footer {clear: both;margin: 0px;padding: 0px;text-align: right;}
/* -----------header specific layout---------------------*/
#headercontainer {overflow:hidden;width:100%;height:50px;background-
color:#FFFFFF;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;}
#headertitle {float:left;width:20%;}
#navcontainer {margin: 0px 5px 0px 21%;text-align:right;}
#logincontainer {padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;text-
align: right;}
#menucontainer {padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;text-
align: right;}
The #headercontainer contains my entire header which has a logo on the
left side the menu in the middle and a small login form on the right.
Directly below that is the #content div tag which contains the
contents of the site. For right now there is just some text there.
The menu runs behind this currently and not on top like it should. I
don't have any z-index's anywhere in the code or css that should be
sitting on top of the menu system.
Note: I haven't changed the superfish.css that I downloaded. I did
update the z-index for .nav li from 99 to 999 but that didn't make a
difference so I've left it at 99 for now.
