jQuery menu bar problem

[Typhoon]

Hello,

Im wondering if anyone would be able to help me. I've got a  jQuery menu bar and its coded in. but as my computer screen is big i need to find a way to make it good for an normal small screen.

Here is the CSS: hope it helps

/* menu::base */
#menu_container{
   
   margin:0 auto;
   width:auto;
   height:50px;   
}

#menu {
   left: 388px; top: 8px; width: 915px;
   width: 1140px;
    position:relative;
    z-index:100;
    height:32px;
}
#menu .menu {
   margin:auto;
   position:absolute;
   width: 1140px;
}
#menu * {
   margin:auto;
    list-style:none;
    border:0;
    padding:0;
    margin:0;
}
#menu a {
   margin:auto;
    display:block;
    padding:7px 14px 7px 14px;
    white-space:nowrap;
}
#menu li {
   margin:auto;
    float:left;
    background:#fff;
}
#menu li li {
   margin:auto;
    float:none;
    _border:1px solid #494949; /** fix for ie6 */
}
#menu div {
   margin:auto;
    visibility:hidden;
    position:absolute;
    background:url(images/pix.gif);
}
#menu div div {
    margin:-24px 0 0 -1px;
    left:100%;
}
#menu li:hover>div { visibility:visible; }

/* menu::special styles */
/* menu::level 1 */
#menu a {
    text-decoration:none;
    color:#fff;
    position:relative;
    z-index:77;
}
#menu a:hover {
    background:url(images/back.png);
    color:#6bb90d;
}
#menu a:hover span { color:#6bb90d; }
#menu>ul>li:hover>a {
    background:url(images/back.png);
    color:#6bb90d;
}
#menu>ul>li:hover>a span { color:#6bb90d; }
#menu span {
    text-transform:uppercase;
    font:14px 'Trebuchet MS', Arial, Helvetica, Sans-serif;
    color:#fff;
}
#menu li { background:none; }
/* menu::level >= 2 */
#menu li li a {
    padding:0;
    position:static;
}
#menu li li a:hover { background:#57ac3c; }
#menu li li a span { color:#fff; }
#menu li li a:hover span { color:#ffffff; }
#menu li li a.parent span { background:url(images/pointer.gif) no-repeat right 9px; _background-position:right 10px; }
*+html #menu li li a.parent span { background-position:right 10px; }
#menu li li span {
    display:block;
    text-transform:none;
    line-height:16px;
    padding:4px 25px 4px 14px;
    font-size:14px;
}
#menu li div { background:url(images/back.png); }
/** <fix for ie6> */
#menu div div {
    _margin-top:-25px;
    _background:#393939;
}
#menu li li li { _border:1px solid #393939; }
#menu div div div { _background:#292929; }
#menu li li li li { _border:1px solid #292929; }
/** </fix for ie6> */

[rockerest]

Well, here's a big problem:

Trying to imagine what HTML looks like based on CSS is insane.  Especially when it has stuff like "#menu .menu".  Huh?
Posting the pertinent HTML would be excellent.

In lieu of HTML, it looks like the only thing explicitly defining the size of your menu is

Code: [Select]

#menu {
   left: 388px; top: 8px; width: 915px;
   width: 1140px;
    position:relative;
    z-index:100;
    height:32px;
}
#menu .menu {
   margin:auto;
   position:absolute;
   width: 1140px;
}
(width: 1140px)

Make that a bit smaller and it should work fine.  If it wraps, or does something funky, then I would imagine either: A) you have too many menu options or B) your font is set way too large.  However:

Code: [Select]

#menu span {
    text-transform:uppercase;
    font:14px 'Trebuchet MS', Arial, Helvetica, Sans-serif;
    color:#fff;
}
Makes it seem like you've got a fairly reasonable font size.

One last note for thought:
Using pixels is *typically* poor practice.  It locks a user into a look that you deem acceptable.  If they have their size set larger (for vision impaired, etc.), the changes won't take affect.  Using "ems" is a better idea.  It's not too hard to pick up on, and I highly recommend it.

Just google "design with em not px" to get some info.

Hope this helps,
-rockerest

p.s.
Pixels do have their place in many parts of web design, but for things like a nav bar, or other general sizes, ems are the way to go (even for absolute positioning! [which is not good practice either]).