Помогите исправить выпадающее меню
1.
Maksim (04.10.2013 / 13:45)
<ul class="nav pt pull-right">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Информация<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/news/">Новости</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/newposts/">Новое на сайте</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/info/">Полезная информация</a></li>
</ul>
</li>
<li class=""><a href="/forum/" rel="nofollow,noindex">Форум</a></li>
</ul>
Добавлено через 04:44 сек.
CSS файл.
Первое меню будет в виде выпадающего (форум просто). Нужно чтобы к примеру при наведени на
новости выпадали справа или слева еще категории.
С меня миллион чатлов.
Помогите, а то я уже запутался
2.
юЮЮфюв (04.10.2013 / 13:50)
Delete
3.
Maksim (04.10.2013 / 13:51)
Короче многоуровневое меню надо
4.
Maksim (04.10.2013 / 15:12)
Перевились специалисты(
5.
Алексей (04.10.2013 / 23:06)
4.
Maksim, Не плохо было бы css увидеть только с используемыми селекторами, а не весь набор.
6.
Алексей (04.10.2013 / 23:20)
Чесно сказать я не совсем понял что ты там пытаешься сделать, но выезжающее меню у меня выглядит так
<div class="menu-item">
<h4>Информация</h4>
<ul>
<li><a href="./inf.php?mode=term">Термины</a></li>
<li><a href="./inf.php?mode=faq">FAQ/Вводная информация</a></li>
<li><a href="./inf.php?mode=blag">Благодарность</a></li>
</ul>
</div>
html часть
Добавлено через 01:09 сек.
сss часть
.menu-item {
background: #CC9B24;
width: 240px;
}
.menu-item h4 {
border: 1px solid #665130;
color: #000;
font-size: 12px;
font-weight: 500;
padding: 7px 12px;
/*Gradient*/
background: #555; /* Old browsers */
background: -moz-linear-gradient(top, #665130 10%,#ecd96f 64%,#e3c067 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(44%,#464646), color-stop(100%,#353535)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffef67 10%,#f1aa00 34%,#ffef67 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #665130 10%,#ecd96f 64%,#e3c067 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #665130 10%,#ecd96f 64%,#e3c067 100%); /* IE10+ */
background: linear-gradient(top, #665130 10%,#ecd96f 64%,#e3c067 100%); /* W3C */
filter: progid:D XImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#353535',GradientType=0 );
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px
}
.menu-item h4:hover {
background: #555; /* Old browsers */
background: -moz-linear-gradient(top, #665130 10%,#e3c067 64%,#ecd96f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(44%,#464646), color-stop(100%,#353535)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffef67 10%,#f1ba00 34%,#ffef67 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #665130 10%,#e3c067 64%,#ecd96f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #665130 10%,#e3c067 64%,#ecd96f 100%); /* IE10+ */
background: linear-gradient(top, #665130 10%,#e3c067 64%,#ecd96f 100%); /* W3C */
filter: progid:D XImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#353535',GradientType=0 );
}
7.
Алексей (04.10.2013 / 23:22)
.menu-item h4 a {
color: #000;
display: block;
text-decoration: none;
width: 240px;
}
.menu-item ul {
margin-left: 10px;
background: #FFCD58;
font-size: 10px;
line-height: 30px;
margin-left: 0px;
height: 0px;
width: 240px;
list-style-type: square;
overflow: hidden;
padding: 0px;
border: 0px solid #eee;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
height: 93px;
width: 238px;
margin-left: 0px;
text-decoration: none;
color: #000;
padding: 0px;
border: 1px solid #eee;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px
}
.menu-item ul a {
text-decoration: none;
color: #000;
display: block;
width: 150px;
}
.menu-item li {
margin-left: 10px;
}
.menu-item li:hover {
background: #FFCD58;
}
.alpha p {
padding: 8px 12px;
color: #000;
background: #FFCD58;
border: 1px solid #eee;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px
}
.alpha p a {
color: #000;
font-style: italic;
}
.alpha p a:hover {
color: #ccc;
}
Добавлено через 00:58 сек.
не уместилось в одно сообщение.
8.
Maksim (07.10.2013 / 10:55)
там bootstrap за основу взят
URL:
https://visavi.net/topics/39117