CSS Menu problem

[colinod]

I have made a CSS menu and am finding that sometimes the sub menu items go off the screen depending on the resolution. Does anyone know if there is a way to prevent this?

CSS is as follows

<style type="text/css"> 
body{
    behavior:url(../scripts/cssHoverFix.htc);
    background-color: #000000;
}
#navigation {width:180px; font-size:12px;}
 
/*Main Menu*/
#navigation ul {margin:0px; padding:0px; background-color:#000000;}
 
#navigation ul li {
font-family:"Cooper Black";
text-align:center;
font-size:16px;
height:25px;
line-height:25px; 
list-style:none; 
padding-left:10px;
 
color:#FFFfff; 
border-top:#ef007b solid;  
border-left:#ef007b solid;
border-right:#ef007b solid;
border-width:1px;
cursor:pointer; 
}
#navigation ul li:hover {background-color:#000000; position:relative; font:"Cooper Black"; color:#ef007b}
 
#navigation ul ul li:hover {background-color:#ffffff; position:relative; font:"Cooper Black"; color:#ef007b}
 
/*Sub Menu*/
#navigation ul ul {
display:none;
position:absolute;
left:100px;
top:5px;
border:#ef007b solid;
border-width:1px;
background-color:#ffffff;
}
#navigation ul li:hover ul {display:block;}
 
#navigation ul ul li { width:120px; float:left; display:inline; border:#ef007b solid;
border-width:1px; color:#000000;}
 
</style>
 

And html is as follows

<div id="navigation">
              <ul>
                <li><a href="boys.asp?id=Afro - Caribbean" class="mainlink">Afro Caribbean</a></li>
                <li><a href="boys.asp?id=Comedy" class="mainlink">Comedy</a></li>
                <li><a href="boys.asp?id=Corporate" class="mainlink">Corporate</a></li>
                <li><a href="boys.asp?id=DJ Sound" class="mainlink">DJ Sound</a></li>
                <li><a href="boys.asp?id=Indian" class="mainlink">Indian</a></li>
                <li><a href="boys.asp?id=Irish" class="mainlink">Irish</a></li>
                <li><a href="boys.asp?id=Light/Friendly" class="mainlink">Light/Friendly</a></li>
                <li><a href="boys.asp?id=London" class="mainlink">London</a></li>
                <li>Northern
                  <ul>
                      <li><a href="boys.asp?id=Northern" class="sublink">All</a></li>
                      <li><a href="boys.asp?id=Brummie" class="sublink">Brummie</a></li>
                      <li><a href="boys.asp?id=Geordie" class="sublink">Geordie</a></li>
                      <li><a href="boys.asp?id=Lancashire" class="sublink">Lancashire</a></li>
                      <li><a href="boys.asp?id=Liverpool" class="sublink">Liverpool</a></li>
                      <li><a href="boys.asp?id=Lancashire" class="sublink">Lancashire</a></li>
                      <li><a href="boys.asp?id=Yorkshire" class="sublink">Yorkshire</a></li>
                    </ul>
                </li>
                <li><a href="boys.asp?id=Posh" class="mainlink">Posh</a></li>
                <li><a href="boys.asp?id=Scottish" class="mainlink">Scottish</a></li>
                <li><a href="boys.asp?id=Sexy" class="mainlink">Sexy</a></li>
                <li>Standard UK - 30's +
                  <ul>
                      <li><a href="boys.asp?id=30s/40s" class="sublink">30's/40's</a></li>
                      <li><a href="boys.asp?id=40+" class="sublink">40+</a></li>
                    </ul>
                </li>
                <li><a href="boys.asp?id=Teen/20s" class="mainlink">Teen/20's</a></li>
                <li><a href="boys.asp?id=USA/Mid Atlantic" class="mainlink">USA/Mid Atlantic</a></li>
                <li>Versatile
                  <ul>
                      <li><a href="boys.asp?id=Versatile" class="sublink">All</a></li>
                      <li><a href="boys.asp?id=Accents" class="sublink">Accents</a></li>
                      <li><a href="boys.asp?id=Anything" class="sublink">Anything</a></li>
                      <li><a href="boys.asp?id=Characters" class="sublink">Characters</a></li>
                      <li><a href="boys.asp?id=Impressions" class="sublink">Impressions</a></li>
                      <li><a href="boys.asp?id=Wacky" class="sublink">Wacky</a></li>
                    </ul>
                </li>
                <li><a href="boys.asp?id=Welsh" class="mainlink">Welsh</a></li>
                <li style="border-bottom:#ef007b solid; border-width:1px"><a href="boys.asp?id=West country" class="mainlink">West Country</a></li>
              </ul>
            </div>

Thanks

[drhowarddrfine]

You are using 'behavior' which is non-standard and only works in IE. Also, you are using asp, which most don't use, so we need to see the generated markup. A link is better.

[colinod]

Here is a link to the page

http://www.yaketyyakallmouth.com/pages/boys.asp?id=all

The behavoir is there to correct errors in old version of IE

[drhowarddrfine]

The ul for those lists is position:absolu te 100px which is causing that.

[colinod]

I have tried all the variations of the position element and they dont help, changing the number only moves it, i want it to move automatically if the sub menu goes out of the edge of the window, not sure if this is possible with CSS or needs a script language also

[drhowarddrfine]

Then you need to use a percentage for that so it moves relative to the width.

Busy next two days for me. Not sure when I can test this.

[colinod]

Thanks for that i did not know you could use percentages ill have a play and see what i can do

[colinod]

have made thise changes and its better thansk for that, i am now trying to get the sub menu background transparent, i have this done but the first link you rollover goes either transparent or white when you roll out of it, any ideas??