-
why without <a href=“#”>text</a> i see like this ?
-
how to do all menu in center ? not rigth now (left)
the css
/* navigation style */
#nav{
height: 39px;
font: 12px Geneva, Arial, Helvetica, sans-serif;
background: #5eb974;
border: 1px solid #5eb974;
border-radius: 3px;
min-width:500px;
margin-left: 0px;
padding-left: 0px;
}
#nav li{
list-style: none;
display: block;
float: left;
height: 40px;
position: relative;
border-right: 1px solid #5eb974;
}
#nav li a{
padding: 0px 10px 0px 30px;
margin: 0px 0;
line-height: 40px;
text-decoration: none;
border-right: 1px solid #83ffa1;
height: 40px;
color: #FFF;
text-shadow: 1px 1px 1px #66696B;
}
#nav ul{
background: #f2f5f6;
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow:2px 2px 3px #ECECEC;
width:170px;
}
#nav li.main{
background: url(pic/main/index/home_icon.png) no-repeat 9px 12px;
}
#nav li.main:hover {
background: url(pic/main/index/home_icon.png) no-repeat 9px 12px #36bb56;
}
#nav li.product{
background: url(pic/main/index/tea.png) no-repeat 9px 12px;
}
#nav li.product:hover {
background: url(pic/main/index/tea.png) no-repeat 9px 12px #36bb56;
}
#nav li.action{
background: url(pic/main/index/action.png) no-repeat 9px 12px;
}
#nav li.action:hover {
background: url(pic/main/index/action.png) no-repeat 9px 12px #36bb56;
}
#nav li.news{
background: url(pic/main/index/news.png) no-repeat 9px 12px;
}
#nav li.news:hover {
background: url(pic/main/index/news.png) no-repeat 9px 12px #36bb56;
}
#nav li.faq{
background: url(pic/main/index/faq.png) no-repeat 9px 12px;
}
#nav li.faq:hover {
background: url(pic/main/index/faq.png) no-repeat 9px 12px #36bb56;
}
#nav li.contacts{
background: url(pic/main/index/contact.png) no-repeat 9px 12px;
}
#nav li.contacts:hover {
background: url(pic/main/index/contact.png) no-repeat 9px 12px #36bb56;
}
#nav li.usercp{
background: url(pic/main/index/faq.png) no-repeat 9px 12px;
}
#nav li.usercp:hover {
background: url(pic/main/index/faq.png) no-repeat 9px 12px #36bb56;
}
#nav li.administration{
background: url(pic/main/index/faq.png) no-repeat 9px 12px;
}
#nav li.administration:hover {
background: url(pic/main/index/faq.png) no-repeat 9px 12px #36bb56;
}
#nav li:hover{
background: #36bb56;
}
#nav li a{
display: block;
}
#nav ul li {
border-right:none;
border-bottom:1px solid #DDDDDD;
width:170px;
height:39px;
text-align: left;
background: url(pic/main/index/sub_cat.png) no-repeat 9px 12px;
}
#nav ul li:hover{
background: #DFEEF0;
background: url(pic/main/index/sub_cat.png) no-repeat 9px 12px;
}
#nav ul li a {
border-right: none;
border-left: none;
color:#6791AD;
text-shadow: 1px 1px 1px #FFF;
border-bottom:1px solid #FFFFFF;
}
#nav ul li:last-child {
border-bottom: none;
}
#nav ul li:last-child a{
border-bottom: none;
}
/* Sub menus */
#nav ul{
display: none;
visibility:hidden;
position: absolute;
top: 40px;
}
/* Third-level menus */
#nav ul ul{
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
/* Fourth-level menus */
#nav ul ul ul{
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
#nav ul li{
display: block;
visibility:visible;
}
#nav li:hover > ul{
display: block;
visibility:visible;
}
html + jquery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#nav li").hover(
function(){
$(this).children('ul').hide();
$(this).children('ul').slideDown('fast');
},
function () {
$('ul', this).slideUp('fast');
});
});
</script>
<ul id="nav">
<li class="main"><a href="./">Главная</a></li>
<li class="news"><a href="#">Новости</a>
<ul>
<li><a href="#">Сайта</a></li>
<li><a href="#">Компании</a></li>
</ul>
</li>
<li class="product"><a href="#">Товар</a>
<ul>
<li><a href="?cat=1">Чай Нектар Богов</a></li>
<li><a href="?cat=2">Чай CERERA</a></li>
<li><a href="?cat=3">Чай Похудей</a></li>
</ul>
</li>
<?
if ($CURUSER) {
print("<li class=\\"usercp\\"><a href=\\"./\\">Профиль</a>
<ul>
<li><a href=\\"#\\">Конфигурация</a></li>
<li><a href=\\"#\\">Ист. заказов</a></li>
</ul>
</li>");
if (get_user_class() >= UC_SYSOP) {
print("<li class=\\"administration\\"><a href=\\"./\\">Панель Админ.</a>
<ul>
<li><a href=\\"#\\">Ред. профиль</a></li>
<li><a href=\\"#\\">Ист. заказов</a></li>
</ul>
</li>");
}
}
?>
<li class="action"><a href="#">Акции</a>
<ul>
<li><a href="#">Промо Коды »</a>
<ul>
<li><a href="#">Регистрация Кода</a></li>
<li><a href="#">Правила Акции</a></li>
<li><a href="#">Призовой Фонд</a></li>
<li><a href="#">Победители »</a>
<ul>
<li><a href="#">Путевки в Израиль</a></li>
<li><a href="#">Чайника</a></li>
<li><a href="#">Туалетной Бумаги</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Реклама</a></li>
<li><a href="#">Архив акций</a></li>
</ul>
</li>
<li class="faq">Частые вопросы</li>
<li class="contacts"><a href="#">Контакты</a>
<ul>
<li><a href="#">Информация</a></li>
<li><a href="#">Обратная связь</a></li>
<li><a href="#">Жалобы</a></li>
</ul>
</li>
</ul>
Thanks
so i give you one more question (see in image) :goof: