Tekst wychodzi poza button

[paxter]

Witam serdecznie korzystam z modułu art of menu, niestety tekst w rozwijanym menu wychodzi poza stronę, próbowałem ustawić marginesy, ale drugie menu nadal przyjmuje względną szerokość:
link do strony: http://wpia.uksw.edu.pl/index.php?option=com_content&view=article&id=606&Itemid=197 chodzi o problem z menu zasady rekrutacji, poniżej ustawienia CSS dla arkusza stylu:

ul.dropdown {
position: relative;
list-style: none;
margin: 0;
padding: 0;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
background-color:#303030;
}

ul.dropdown li {
list-style: none;
font-weight: bold;
width: 195px;
float: left;
zoom: 1;
background: #000 url(../images/overlay2.png) repeat-x top left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:1px;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}

ul.dropdown a:hover {
color: #000;
}

ul.dropdown a:active {
color: #ffa500;
}

ul.dropdown li a {
display: block;
padding: 2px 1px;
color: #fff;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}

ul.dropdown li:last-child a {
border-right: 100px;
}
/* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover {
background: #0070C0;
color: black;
position: relative;
color:#fff;
}

ul.dropdown li.hover a {
color: #fff;
font-weight:bold;
}

ul.dropdown ul {
width: 290px;
visibility: hidden;
position: right;
margin-right: 10px;
top: 0%;
left: 150px;
}

ul.dropdown ul li {
font-weight: normal;
background: #909090 url(../images/overlay2.png) repeat-x top left;
color: #000;
float: none;
}

/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a {
border-right: 250px;
width: 110%;
display: inline-block;
}

ul.dropdown ul ul {
list-style: ;
left: 140%;
top: 0;
margin: 0;
padding: 10px;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
}

ul.dropdown li:hover > ul {
visibility: visible;
}

ul.dropdown a {
text-decoration: none;
}

ul.dropdown li {
display:circle;
}

.sub_menu {
margin:50 !important;
z-index: 1000 !important;
position:absolute;
}

.sub_menu li{
margin:50 !important;
z-index: 1000 !important;
}

.sub_menu li a {
margin:50 !important;
z-index: 1000 !important;
}

.dropdown {
z-index: 1000 !important;
}



Teoretycznie wpis w tym polu powinien rozwiązać sprawę, ale nic z tego, proszę o pomoc:
ul.dropdown ul {
width: 290px;
visibility: hidden;
position: right;
margin-right: 10px;
top: 0%;
left: 150px;
}

[Bazyl]

Witaj,

style.css wiersz 11 - ul.dropdown li zwiększ i zobacz co jeszcze się powiększa ;)

[paxter]

Serdecznie dziękuję, ale chodzi o to, aby pierwszy poziom menu miał inną szerokość niż 2 poziom - rozszerzyłem, ale przez to przekraczam linię podziału strony. Generalnie chodzi o to aby pierwszy poziom miał szerokość 195px a drugi 220px, czy jest to możliwe?

[Bazyl]

ul.dropdown li - 1 poziom
ul.dropdown ul li - 2 poziom

[paxter]

serdecznie dziękuję. Problem rozwiązany