Помощь в ссылках

[Neek]

Доброго времени суток. Я только начинаю более углубленно изучать html и css. При первом написание сайта, столкнулся с проблемой ссылок. Дело в том, что у меня меню представляет собой таблицу с текстом (текст является ссылками)

<div id="menu">
<ul>
   <li><a href="#" title="">О нас</a></li>
   <li><a href="#" title="">Новости</a></li>
   <li><a href="#" title="">Island-Twitter</a></li>
   <li><a href="#" title="">Island-VK.com</a></li>
   <li><a href="#" title="">кнопочка</a></li>			
</ul>
	</div>

В css, при наведении на них мышкой, они меняют свой фон:

#menu a {
	float: left;
	width: 98px;
	height: 36px;
	text-align: center;
	text-decoration: none;
	color: #383838;
	font-weight: bold;
}

#menu a:hover {
	width: 98px;
    height: 36px;
	background: url(../img/bg_1.png) repeat-x;
	text-decoration: underline;
	position:relative;
	margin-top:-10px;	
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}

Так вот в чём проблема. Я добавил ещё одну кнопку авторизации в конец меню, но не добавлял её в таблицу, тем самым отдельно всё для неё прописывал, не знаю зачем. Но вроде бы всё как нужно работает. При нажатии на кнопку авторизации выпадает меню:

И я хочу сделать эти 2 кнопки которые находятся в меню ссылками, но проблема в том что это меню находится в <div id="menu">, а ссылки там прописаны при наведении менять свой задний фон. И я хочу что бы можно было этот текст сделать ссылкой и что бы на него не действовали правила для основного меню. Надеюсь объяснил что хочу сделать.

[sfc]

Почему бы не ввести новый класс и не добавить к нужным ссылкам?

[Neek]

Почему бы не ввести новый класс и не добавить к нужным ссылкам?

Что-то типо этого?

<span class="button_log">Войти</span>
<span class="button_reg">Регистрация</span>

Вот только я не знаю что в css написать?

[sfc]

типа того.

как я понял, нужно, чтобы пункт меню при наведении не менял фон? тогда можно, как вариант, новому классу указать нужный фон при наведении (тот же, что и в состоянии, когда курсор мыши не наведен на него). и да, классы могут повторяться, так что если свойства одинаковы, то не обязательно вводить два разных класса.

Edited July 7, 2012 by sfc

[Neek]

Вот как описаны кнопки у меня в выпадающем меню.

<span class="button"><a href="#">Войти</a></span>
<span class="button"><a href="#">Регистрация</a></span>

.button{
    background: -ms-linear-gradient(top, #57baff, #0062db) 0 0;
    background: -moz-linear-gradient(top, #57baff, #0062db) 0 0;
    background: -o-linear-gradient(top, #57baff, #0062db) 0 0;
    background: -webkit-linear-gradient(top, #57baff, #0062db) 0 0;
    background: linear-gradient(top, #57baff, #0062db) 0 0;
    border: 1px solid #0163dc;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.35), 1px 2px 2px -1px rgba(255,255,255,0.75) inset;
    box-shadow: 0 2px 4px rgba(0,0,0,0.35), 1px 2px 2px -1px rgba(255,255,255,0.75) inset;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font: normal 12px/18px Arial;
    min-height: 18px;
    padding: 4px 12px;
    text-decoration: none;
    text-shadow: 0 1px rgba(10,59,112,0.75);
}
.button:hover{
    background: -ms-linear-gradient(bottom, #57baff, #0062db) 0 0;
    background: -moz-linear-gradient(bottom, #57baff, #0062db) 0 0;
    background: -o-linear-gradient(bottom, #57baff, #0062db) 0 0;
    background: -webkit-linear-gradient(bottom, #57baff, #0062db) 0 0;
    background: linear-gradient(bottom, #57baff, #0062db) 0 0;
    color: #ffffff !important;
}
.button:active{
    -moz-box-shadow: 1px 2px 2px -1px rgba(0,0,0,0.75) inset;
    box-shadow: 1px 2px 2px -1px rgba(0,0,0,0.75) inset;
}

Что и как мне описать в css, что бы решить мою проблему?

Edited July 7, 2012 by Neek

[sfc]

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

можно переписать class="button" не для тега span, а непосредственно для нужных вам ссылок. (причем #menu .button, дабы увеличить специфичность);

или вместо "#menu a" ввести какой-нибудь класс и добавить к нужным тегам.

Edited July 9, 2012 by sfc