!important messes up menu

here is the code I have for a drop-down menu

[code=php]#zUL,#zUL ul {padding:0 0 0 5px;margin:0; font-weight: bold;
font-size: 10pt;
line-height: 1;
font-family: Tahoma, Arial, Verdana, Helvetica, Sans-Serif;
text-decoration: none;
background-color: #483d8b;
text-align: center;
width:780px;
height: 1.3em;}

#zUL a {color:#FFFFFF; text-decoration:none; background-color:#483d8b; padding-top:-3px; padding-bottom:2px}

#zUL li ul a {margin-left:1em}

#zUL li {text-decoration:none; background-color:#483d8b; text-align:left;
float:left;
width:9.5em;
position:relative;
list-style-type:none;
font-weight:600;
}
#zUL li ul li {background-color:#483d8b}

#zUL li ul {visibility:hidden;
position:absolute;
width:9em; background-color:#483d8b; margin:0; text-align:left;}

#zUL li ul ul {text-decoration:none; margin:-1em 0 0 9.7em; width:auto; text-align:left; background-color:#483d8b; visibility:hidden; position:absolute;}

fieldset p {clear:left}

#zUL li:hover ul, #zUL li.msieFix ul, #zUL li:hover ul ul, #zUL li.msieFix ul ul {
visibility:visible;
background-color:#483d8b;}

* html fieldset p {z-index:-1}
* html #zUL li:hover ul,
* html #zUL li.msieFix ul {
top:1em;
left:.2em
}[/code]

What I need to do is change the “#zUL,#zUL ul” part of it with the !important…uh, thing…to specify different widths for IE and the rest of the browsers. So this is what I change that section to:

[code=php]#zUL,#zUL ul {padding:0 0 0 5px;margin:0; font-weight: bold;
font-size: 10pt;
line-height: 1;
font-family: Tahoma, Arial, Verdana, Helvetica, Sans-Serif;
text-decoration: none;
background-color: #483d8b;
text-align: center;
width:775px !important;
width:780px;
height: 1.3em;}[/code]

And that works…only it messes up the lower levels of the drop down menu. They come out horizontally instead of vertically (at least, that’s the way it looks) Does anyone know why it does that?

Also in #CSS _↴