Создание вертикального меню списком с выделенным пунктом

[orgi]

Добрый день! Прошу вашей помощи, тк уже не знаю что и пробовать. Опишу суть проблемы:

Имеется боковое вертикальное меню написанное списком (ul li) и его оформление на css.

Необходимо сделать чтобы у выделенного пункта меню был list-style circle, а у остальных - none. И при этом выделенный пункт должен быть другого цвета.

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

вод код html:

 <td>
                                <div id="submenu">
                                    <ul id="submenu">
                                        <li class="curent"><a class="curent" href="production.html" ><span>Всех производителей</span></a></li>
                                        <li><a href="#">Druseidt</a></li>
                                        <li><a href="#">Icore International</a></li>
                                        <li><a href="#">ITT Interconnect Solutions</a></li>
                                        <li><a href="#">Mennekes</a></li>
                                        <li><a href="#">Multi-Contact</a></li>
                                        <li><a href="#">PCE</a></li>
                                        <li><a href="#">Telegaertner</a></li>
                                        <li><a href="#">Walther</a></li>
                                    </ul> </div>
                                </td>

а вот css

#submenu
{
background-image: url(../images/submenu-bg.png);
    background-repeat: repeat;
    margin: 0;
    padding: 0px 0px 0px 12px;
}
#submenu ul {
    background-image: url(../images/submenu-bg.png);
    background-repeat: repeat;
    margin: 0;
    padding: 0px 0px 0px 0px;

}
#submenu li {
    background-image: url(../images/submenu-bg.png);
	background-repeat:no-repeat;
    margin: 0;
    list-style:circle;
}

#submenu li.curent {

	background-position:left;
    margin: 0;
    list-style:none;
	color:#306498;

}

#submenu ul li a {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #ff0000;
    line-height: 21px;
    text-decoration: none;
	list-style:none;

}
#submenu ul li a:hover {
    color: #000;
    text-decoration: none;
}

Буду очень благодарна за любого рода советы!!!

[sigma77]

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

Ну так поменяйте стили.

Сделайте для #submenu li {list-style: none;}, а для #submenu li.curent {list-style-type: circle}. ну и для цвета #submenu li.curent a {color: green}

[orgi]

Ну так поменяйте стили.

Сделайте для #submenu li {list-style: none;}, а для #submenu li.curent {list-style-type: circle}. ну и для цвета #submenu li.curent a {color: green}

да как раз и проблема в том, что если меняю, то оно везде делает none, и даже не обращает внимание на li.curent {list-style-type: circle}.

я не понимаю почему. притом даже пробовала написать !important; - все равно игнорирует. и цвет тоже.

[orgi]

прошу прощения за дабл-постинг.

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

код тестовой страницы:

<ul id="submenu">
<li class="a"><a href="#">text1</a></li>
<li>text2</li>
<li><a href="#">text3</a></li>
</ul>

#submenu li
{
color:#339999;
list-style:none;

}
#submenu li.a
{
color:#FF6600;
list-style:disc;
}
#submenu li a
{
color:#CC33CC;
font-family:Arial, Helvetica, sans-serif;
text-decoration: none;
}
#submenu li a:hover
{
color:#000;
font-family:Arial, Helvetica, sans-serif;
}

#submenu li.a a
{
text-decoration:underline;
color:#33CCFF;
}

#submenu li.a a:hover
{
text-decoration:underline;
color:#000;
}

Edited January 27, 2011 by orgi

[sigma77]

orgi,

А можешь дать ссылку на страничку, где проблема?

Или сама попробуй посмотреть фаербаге (или любом другом инспекторе), что может переопределять стиль.

[orgi]

sigma77,

Спасибо большое! разобралась в итоге удалила весь код и написала заново, как на тестовой страинце и все каким-то чудом заработало. если честно сама не знаю в чем была проблема.

Огромное Вам спасибо!!!

Тему можно закрывать!

[Serlutin]

Спасибо большое! разобралась в итоге удалила весь код и написала заново, как на тестовой страинце и все каким-то чудом заработало.

99%, что в слове "current" первая буква была набрана в русской раскладке. Сам один раз так лоханулся :-)

[orgi]

99%, что в слове "current" первая буква была набрана в русской раскладке. Сам один раз так лоханулся :-)

нет. не из-за этого))))

вот работающий код:

<td id="submenu">

                                   <ul id="submenu">
                                        <li class="a"><a href="production.html" >Всех производителей</a></li>
                                        <li><a href="production_druseidt.html">Druseidt</a></li>
                                        <li><a href="production_icore.html">Icore International</a></li>
                                        <li><a href="production_itt.html">ITT Interconnect Solutions</a></li>
                                        <li><a href="production_mennekes.html">Mennekes</a></li>
                                        <li><a href="production_mc.html">Multi-Contact</a></li>
                                        <li><a href="production_pce.html">PCE</a></li>
                                        <li><a href="production_telegaertner.html">Telegaertner</a></li>
                                        <li><a href="production_walther.html">Walther</a></li>
                                    </ul> 
                                </td>

css:

#submenu 
{
    background-image: url(../images/submenu-bg.png);
    background-repeat: repeat;
    background-repeat: repeat;
    margin: 0;
    padding: 0px 0px 0px 7px;

}
#submenu li 
{
    text-decoration:none;
    color:#33FF99;
    list-style:none;
    background-image: url(../images/submenu-bg.png);

}
#submenu li.a
{
    text-decoration:none;
    color:#33FF99;
    list-style:circle url(../images/arrow_right.png);

}
#submenu li a
{
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #306498;
    line-height: 21px;
	text-decoration: none;
	outline: none;

}
#submenu li a:hover
{
    color:#000000;

}
#submenu li.a a
{
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #ff6600;
    line-height: 21px;
	text-decoration: none;
}
#submenu li.a a:hover
{
    color:#000000;

}