про hover

[GooDMeister]

Слева то что должно быть, справа то что есть. Разница состоит в двух вещах.

Первая: когда я навожу курсор на подпункт меню, исчезает стиль с того пункта откуда оно выпало, как сделать чтобы не исчезало??? (я использую тег hover)

Второе:

Как сделать borded на самом нижнем пункте меню. Если я пишу

border-bottom: solid 1px #ccc

то под каждым подпунктом появляется border, а мне он нужен только на последнем.

p.s.

использую CSS Для меню в Joomla. Пример CSS можно найти тут.

http://de.siteof.de/extended-menu-templates.html (son-of-suckerfish)

Если кто-то реально подскажет, что делать, буду очень признателен!

[s0rr0w]

Как сделать borded на самом нижнем пункте меню. Если я пишу

Поместить все пункты в контейнер, которому присвоить бордер.

[GooDMeister]

а как их поместить в контейнер? Контейнер это div? Проблема в том, что меню генерируется автоматически и в его основе стоит сложный php код, который я с трудом понимаю. Я могу редактировать только CSS файл. Можно ли все это сделать через CSS или обязательно что-то еще в html менять?

Edited December 7, 2008 by GooDMeister

[s0rr0w]

а как их поместить в контейнер? Контейнер это div? Проблема в том, что меню генерируется автоматически и в его основе стоит сложный php код, который я с трудом понимаю. Я могу редактировать только CSS файл. Можно ли все это сделать через CSS или обязательно что-то еще в html менять?

Учите матчасть.

Или найдите телепатов, чтобы они поняли вашу проблему и выдали решение именно такое, чтобы вам ничего делать не надо, и все заработало.

[GooDMeister]

s0rr0w, ну я же картинки добавил, неужели по картинкам непонятно??? или вопрос неясен? Все очень четко объяснил. Вы говорите нужно в контейнер поставить, поясните плз примерно как это делается. Это можно исправить в файле CSS только???

p.s.

Неужели непонятно...

[Ogalig]

Выход только в том чтобы добавить первому и последнему элементам меню другие ксс классы. Или же можно назначить нижний бордер у всех элементов, но все элементы сдвинуть немного вверх так, чтобы верхний край элемента перекрывал нижний край предыдущего. Тогда нижний бордер будет виден только у последнего.

про ховер проблему -нужен код. Возможно стили там меняются скриптами. Или же лагает ксс. что маловероятно.

[s0rr0w]

s0rr0w, ну я же картинки добавил, неужели по картинкам непонятно??? или вопрос неясен? Все очень четко объяснил. Вы говорите нужно в контейнер поставить, поясните плз примерно как это делается. Это можно исправить в файле CSS только???

p.s.

Неужели непонятно...

А что мне картинки? На них видно HTML-структуру, виден CSS?

Да и вопрос, что можно исправить в CSS, а что нет, нужно задавать не мне, а спецификации. Одного раза прочитать хватит для того, чтобы понимать возможности CSS.

[Vlad]

Приведи не картинки, а HTML код, который получается в результате создания меню. Тогда будет понятнее, как помочь.

[GooDMeister]

HTML

<ul id="menulist_root-son-of-suckerfish-horizontal" class="mainlevel-son-of-suckerfish-horizontal" ><li><a href="/mod/index.php/models.html" class="mainlevel_active-son-of-suckerfish-horizontal"><span class="expanded">models</span></a><ul id="menulist_1-son-of-suckerfish-horizontal"  ><li><a href="/mod/index.php/models/top-10-woman.html" class="sublevel_current-son-of-suckerfish-horizontal" id="active_menu-son-of-suckerfish-horizontal">Top 10 woman</a></li><li><a href="/mod/index.php/models/top-10-men.html" class="sublevel-son-of-suckerfish-horizontal">Top 10 Men</a></li><li><a href="/mod/index.php/models/top-10-small-models.html" class="sublevel-son-of-suckerfish-horizontal">Top 10 Small models</a></li><li><a href="/mod/index.php/models/top-10-sexiest.html" class="sublevel-son-of-suckerfish-horizontal">Top 10 Sexiest</a></li></ul></li><li><a href="/mod/index.php/the-blogs.html" class="mainlevel-son-of-suckerfish-horizontal"><span class="expanded">the blogs</span></a><ul id="menulist_2-son-of-suckerfish-horizontal"  ><li><a href="/mod/index.php/the-blogs/fashion-week.html" class="sublevel-son-of-suckerfish-horizontal">Fashion Week</a></li><li><a href="/mod/index.php/the-blogs/photography.html" class="sublevel-son-of-suckerfish-horizontal">Photography</a></li><li><a href="/mod/index.php/the-blogs/hairmake-upstyle.html" class="sublevel-son-of-suckerfish-horizontal">Hair/Make up/Style</a></li><li><a href="/mod/index.php/the-blogs/casting.html" class="sublevel-son-of-suckerfish-horizontal">Casting</a></li><li><a href="/mod/index.php/the-blogs/production.html" class="sublevel-son-of-suckerfish-horizontal">Production</a></li></ul></li><li><a href="/mod/index.php/agencies.html" class="mainlevel-son-of-suckerfish-horizontal"><span class="expanded">agencies</span></a><ul id="menulist_3-son-of-suckerfish-horizontal"  ><li><a href="/mod/index.php/agencies/photographers.html" class="sublevel-son-of-suckerfish-horizontal">Photographers</a></li><li><a href="/mod/index.php/agencies/hairmake-upstyle.html" class="sublevel-son-of-suckerfish-horizontal">Hair/make up/style</a></li></ul></li></ul> </div>	</td>

CSS

/** IE bugs: a:link, a:visited, a:hover need to be styled as well; does not display separator... workaround? */
/** customize colors here */
a.mainlevel-son-of-suckerfish-horizontal, a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal,
a.mainlevel-son-of-suckerfish-horizontal:link, a.mainlevel_active-son-of-suckerfish-horizontal:link, a.mainlevel_current-son-of-suckerfish-horizontal:link,
a.mainlevel-son-of-suckerfish-horizontal:visited, a.mainlevel_active-son-of-suckerfish-horizontal:visited, a.mainlevel_current-son-of-suckerfish-horizontal:visited {
/*	letter-spacing: 1px;  */
 display: block; 
 font: 8px Arial, Helvetica, sans-serif; !important
 color: #666666;
 height: 25px; 
 background-color: #f8f8f8;
 border: 1px solid #f8f8f8; 
}

a.mainlevel-son-of-suckerfish-horizontal:hover, a.mainlevel_active-son-of-suckerfish-horizontal:hover, a.mainlevel_current-son-of-suckerfish-horizontal:hover {
	display: block;
	font: Arial, Helvetica, sans-serif;
	background-color: #fff;
	color: #666666;
	height: 25px;
	border: 1px solid #dadada; !important
	font-size: 8px;  !important
}

a.sublevel-son-of-suckerfish-horizontal, a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal,
a.sublevel-son-of-suckerfish-horizontal:link, a.sublevel_active-son-of-suckerfish-horizontal:link, a.sublevel_current-son-of-suckerfish-horizontal:link,
a.sublevel-son-of-suckerfish-horizontal:visited, a.sublevel_active-son-of-suckerfish-horizontal:visited, a.sublevel_current-son-of-suckerfish-horizontal:visited {
	font: Arial, Helvetica, sans-serif;
	font-size: 9px;
	width: 185px;
	background-color: #ffffff;
	border-right: 1px solid #dadada;
	border-left: 1px solid #dadada; 
	color: #666666;
	height: 15px;
	}

a.sublevel-son-of-suckerfish-horizontal:hover, a.sublevel_active-son-of-suckerfish-horizontal:hover, a.sublevel_current-son-of-suckerfish-horizontal:hover {
	font-size: 9px;
	font: Arial, Helvetica, sans-serif;
	background-color: #f8f8f8;
	color: #666666;
}

ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal,
ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal:link, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal:link, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal:link,
ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal:visited, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal:visited, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal:visited {
	background-color: blue;
	color: white;
}

ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal:hover, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal:hover, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal:hover {
	background-color: #E0E0E0;
	color: blue;
}

ul.mainlevel-son-of-suckerfish-horizontal .expanded {
	display: block;
	background-image: url(../images/menu.png);
	background-position: right;
	background-repeat: no-repeat;
	padding-right: 30px;
}

ul.mainlevel-son-of-suckerfish-horizontal ul .expanded {
	background-image: url("../images/arrow_right.gif");
}


/** customize style / layout here */

a.mainlevel-son-of-suckerfish-horizontal, a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal, span.mainlevel-son-of-suckerfish-horizontal,
a.mainlevel-son-of-suckerfish-horizontal:link, a.mainlevel_active-son-of-suckerfish-horizontal:link, a.mainlevel_current-son-of-suckerfish-horizontal:link,
a.mainlevel-son-of-suckerfish-horizontal:visited, a.mainlevel_active-son-of-suckerfish-horizontal:visited, a.mainlevel_current-son-of-suckerfish-horizontal:visited,
a.mainlevel-son-of-suckerfish-horizontal:hover, a.mainlevel_active-son-of-suckerfish-horizontal:hover, a.mainlevel_current-son-of-suckerfish-horizontal:hover,
a.sublevel-son-of-suckerfish-horizontal, a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal, span.sublevel-son-of-suckerfish-horizontal,
a.sublevel-son-of-suckerfish-horizontal:link, a.sublevel_active-son-of-suckerfish-horizontal:link, a.sublevel_current-son-of-suckerfish-horizontal:link,
a.sublevel-son-of-suckerfish-horizontal:visited, a.sublevel_active-son-of-suckerfish-horizontal:visited, a.sublevel_current-son-of-suckerfish-horizontal:visited,
a.sublevel-son-of-suckerfish-horizontal:hover, a.sublevel_active-son-of-suckerfish-horizontal:hover, a.sublevel_current-son-of-suckerfish-horizontal:hover {
	font: 8px Arial, Helvetica, sans-serif;
	font-weight: lighter;
	font-size: 100%;
	text-align: left;
	text-decoration: none;
	border: 1px solid f8f8f8;
	display: block;
/*	border: 1px solid silver; 
	padding: 0.3em 0.5em 0.3em 0.5em;	 top, right, bottom, left */
	padding: 10px 5px 10px 10px;	
}

a.mainlevel-son-of-suckerfish-horizontal, a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal, span.mainlevel-son-of-suckerfish-horizontal {
}

a.sublevel-son-of-suckerfish-horizontal, a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal, span.sublevel-son-of-suckerfish-horizontal {
/*	font-size: 90%; */
	border-top: none;
	height: 1%;	/* this is required for the IE to cause the "hasLayout" property and make the whole anchor clickable - "Holly Hack" */
}

#active_menu-son-of-suckerfish-horizontal,
a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal,
a.mainlevel_active-son-of-suckerfish-horizontal:link, a.mainlevel_current-son-of-suckerfish-horizontal:link,
a.mainlevel_active-son-of-suckerfish-horizontal:visited, a.mainlevel_current-son-of-suckerfish-horizontal:visited,
a.mainlevel_active-son-of-suckerfish-horizontal:hover, a.mainlevel_current-son-of-suckerfish-horizontal:hover,
a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal,
a.sublevel_active-son-of-suckerfish-horizontal:link, a.sublevel_current-son-of-suckerfish-horizontal:link,
a.sublevel_active-son-of-suckerfish-horizontal:visited, a.sublevel_current-son-of-suckerfish-horizontal:visited,
a.sublevel_active-son-of-suckerfish-horizontal:hover, a.sublevel_current-son-of-suckerfish-horizontal:hover {
/*	font-weight: bold; */
}

ul.mainlevel-son-of-suckerfish-horizontal, .mainlevel-son-of-suckerfish-horizontal ul {
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	z-index: 100;
}

ul.mainlevel-son-of-suckerfish-horizontal li {
	padding: 0;
	margin: 0;
	background: none;
	float: left;
}

ul.mainlevel-son-of-suckerfish-horizontal li li {
	position: relative;
	display: block;
	width: 10em;
}


ul.mainlevel-son-of-suckerfish-horizontal ul {
	display: block;
	position: absolute;
	left: -999em;
	margin: -0.2em 0 0 0em;
	width: auto;
	height: auto;
	z-index: 101;
}

ul.mainlevel-son-of-suckerfish-horizontal li li ul {
	margin: -1.8em 0 0 10em;
	z-index: 102;
}


/** IE7.0 workaround */
ul.mainlevel-son-of-suckerfish-horizontal li:hover, ul.mainlevel-son-of-suckerfish-horizontal li.hover {
	position: static;
}


/** general on-mouse-over display */

ul.mainlevel-son-of-suckerfish-horizontal li:hover ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul {
	left: auto;
}

ul.mainlevel-son-of-suckerfish-horizontal li:hover ul ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul ul {
	left: -999em;
}

ul.mainlevel-son-of-suckerfish-horizontal li:hover ul li:hover ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul li.hover ul {
	left: auto;
}


ul.mainlevel-son-of-suckerfish-horizontal, ul.mainlevel-son-of-suckerfish-horizontal li li {
	clear: left;
}

/** separator */
span.mainlevel-son-of-suckerfish-horizontal, span.sublevel-son-of-suckerfish-horizontal {
	display: block;
	width: 1em;
	border-width: 0px;
	margin-left: 1em;
	padding: 0;
	padding-top: 1px;
}

/** IE5.0/win workaround: the ">" is handled like a "," */
ul.mainlevel-son-of-suckerfish-horizontal > ul.mainlevel-son-of-suckerfish-horizontal {
	position: absolute;
	top: 5em;	/* change the absolute position for IE5.0 here */
}
ul.mainlevel-son-of-suckerfish-horizontal > ul.mainlevel-son-of-suckerfish-horizontal li.hover ul {
	margin: 0.1em 0 0 0em;	/* top, right, bottom, left */
}
ul.mainlevel-son-of-suckerfish-horizontal > ul.mainlevel-son-of-suckerfish-horizontal li.hover ul ul {
	margin: -1.6em 0 0 10em;	/* top, right, bottom, left */
}

Вот все коды, надо было с самого начала наверное поставить, извините, просто я с CSS пока что не очень дружу, только самые основы знаю. Если нужно могу еще java скрипт показать.

Edited December 8, 2008 by GooDMeister

[s0rr0w]

HTML

Копать в сторону бордера для UL

[GooDMeister]

копать от забора до обеда вобщем непонятно ничего, в след. раз другое меню придется поискать наверное... оставлю как есть пока.

Edited December 9, 2008 by GooDMeister

[s0rr0w]

копать от забора до обеда вобщем непонятно ничего, в след. раз другое меню придется поискать наверное... оставлю как есть пока.

Уважаемый, для того, чтобы вы понимали то, что вам говорят, нужно ну хоть немного подучить матчасть.

Если вам выдадут готовое решение, то толку от этого будет немного. Если вы своей головой подумаете, почитаете хотя бы данный ресурс, то через очень короткое время вы поймете все, что вам было сказано.

[rus]

В самой первой строчке кода css добавить: background-color: #fff;

А с бордером, создай отдельный класс, добавь этот класс к последнему <li> (где хочешь что б был бордер),

и в классе пропиши: border-bottom:#CCCCCC solid 1px;

Если что, для джумлы есть специальный плагтн, где ты сам можешь через админку задавать стили для меню и типы меню.

Модуль называется SW MenuPro, но он по моему платный, но есть его аналоги (по хилее правда), но бесплатные.