Как избежать обрезания меню у границы экрана?

Question

[poimanoo]

Здравствуйте. У правой границы экрана обрезается выпадающее меню, как сделать так чтобы если это была граница экрана то меню раскрывалось в обратную сторону(левую)? или может как-то иначе решается это? Скрин и код привожу.

.drop_menu {
	background:#2a8fbd;
	padding:0;
	margin: 0px 5px;
	list-style-type:none;
	height:60px;
}
.drop_menu li { float:left; }
.drop_menu li a {
	padding:9px 6px;
	display:block;
	color:#fff;
	text-decoration:none;
	font:10px arial, verdana, sans-serif;
}

/* Submenu */
.drop_menu ul {
	position:absolute;
	left:-9999px;
	top:-9999px;
	list-style-type:none;
}
.drop_menu li:hover { position:relative; background::#005555; z-index: 1000;}
.drop_menu li:hover ul {
	left:0px;
	top:29px;
	background:#2a8fbd;
	padding: 1px 0px 0px 0px;
}

.drop_menu li:hover a:hover {
	
	background:#005555;

}

.drop_menu li:hover ul li a {
	padding:5px;
	display:block;
	width:168px;
	text-indent:15px;
	background-color:#2a8fbd;
}
.drop_menu li:hover ul li a:hover { background:#005555; }

Comments

[V Sh.]

вы бы еще html разметку выложили... А так могу посоветовать перекрыть стиль у последнего элемента меню через псевдокласс :last-of-type, например.

[poimanoo]

V Sh.: а если меню такое что последним элементом может быть любой(в зависимости от экрана устройства) то как быть?

[JackShcherbakov]

Офорляйте свой код в песочнице - так намного проще будет ответить на ваш вопрос. Откуда я могу понять что у вас там в html твориться? Я могу предложить сделать следуюшим образом - тот блок, что не влазиет через lastchild вызвать, и это будет выглядить как-то так li:lastchild:hover ul:lastchild, но опять же, несовсем понятно что у вас там происходит, возможно у вас там в html что-то не то.

[V Sh.]

poimanoo: не знаю. в голову приходит определение крайнего элемента через js (разница width elementa и его свойства left, вешать на resize()), но должны быть способы проще, я думаю...

[paramid]

верстку скиньте, или запилите в песочнице это меню

[poimanoo]

Владислав: JackShcherbakov:
jsfiddle.net/dw92q9dd

Answer 1

[cssfish]

пишете скрипт для on hover:

if( расстояние слева от вып. меню+ ширина вып.меню > ширины экрана) {
этому пункту меню дать класс типа >right
}

ну а для класса right уже в css написать, чтоб ровнял по right:0; вместо left:0;

при ресайзе - повторить.