Форум Сайтостроение Веб-строительство

Нужно сделать выпадающее меню

[Удален]
639

Здравствуйте, недавно задался вопросом, как создать выпадающее меню для моего меню на одном из моих сайтов. Я знаю, что в интернете полно различных кодов, но мне нужно модифицировать имеено этот код, надеюсь, что кто-то поможет мне.

код кнопок меню 

<div id="menu33">



<ul class="css-menu-1" >



 <li><a href="">Главная</a></li>

 <li><a href="">Новости</a></li>

 <li><a href="">Выставки</a></li>

 <li><a href="">Контакты</a></li>

 <li><a href="">О компании</a></li>







 </ul>

стили кнопок меню 

ul.css-menu-1 {

 list-style: none;

padding-left: 0px;

height: 50px;





 }



 ul.css-menu-1 li {

 display: inline;



 }



 ul.css-menu-1 li a {

 font-family: Tahoma, Geneva, sans-serif; 

 text-decoration: none;

 background: #120A8F;

 font-weight: bold;

 color: #ffffff; 

border-bottom:1px solid #120A8F;

  padding: 20px 44px 20px 44px;





 }



 ul.css-menu-1 li a:hover {

   padding: 20px 44px 20px 44px;

 font-weight: bold;

 background: #6E8CC7;

 color: #ffffff;



 }

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

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

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

Geers
На сайте с 12.04.2011
Offline
487
Geers
#1

ТС, вот аналог именно вашего меню, как раз с инструкцией по рубрикам.

http://ruseller.com/lessons.php?rub=2&id=941

Если не получится, пишите в четверг в лс, помогу. ;)

pubnet.biz
На сайте с 09.06.2011
Offline
15
pubnet.biz
#2

вот самый простой пример, можете хоть сто уровней сделать


<nav class="b-menu">
  <ul>
    <li>
        <a href="/">1</a>
	<ul>
	  <li><a href="/">1.1</a></li>
	  <li><a href="/">1.2</a>
               <ul>
                 <li><a href="/">1.2.1</a></li>
                 <li><a href="/">1.2.2</a></li>
               </ul>
          </li>
	</ul>
    </li>
    <li><a href="/">2</a></li>
  </ul>
</nav>


.b-menu {}
  .b-menu ul li { position: relative; width: 200px; }
  .b-menu ul li > ul { display: none; position: absolute; top: 0; left: 200px; }
    .b-menu ul li:hover > ul { display: block; }
шаблоны сайтов html (http://xn--80abbbp3boh0g9a.xn--p1ai/)
[Удален]
#3

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

P.S. Для модераторов, тему можно закрывать.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий