Реализация меню
 

Друзья есть вот такое меню http://www.afnor.com/ ,подскажите как сделать такое же?

Я новичок, hасскажите куда думать и как действовать :)

Во во)) а по подробнее расскажите как 1-класснику как сделать

Вобщем я сделал вот так:


<div class="topmenu">
<ul>
<li class="visible"><a href="#" title="Меню 1">Меню 1</a></li>
<li class="visible"><a href="#" title="Меню 2">Меню 2</a></li>
<li class="visible"><a href="#" title="Меню 3">Меню 3</a></li>
</ul>
</div>
<div class="menu1">
hghh
</div>
<div class="menu2">
</div>
<div class="menu3">
</div>




ul
{
display: table;
}
li
{
display: table-cell;
}
a
{
display: block;
}
.topmenu
{
position: relative;
}
.menu1 .menu2 .menu3
{
position: absolute;
}
.visible
{
}

А как дальше делать????

Вы бы хоть разобрались в принципе работы, тогда может понимание и само пришло. Вам надо заставить нужный блок появляться по наведению на нужную ссылку. Как это сделать - читайте про hover, onmouseover, onmouseout и все что с ними связано. К тому же есть готовые реализации, надо только поискать.
Вообще, ответ, найденный самостоятельно (пусть и со сторонней помощью) вдвойне приятней для себя же.

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

сверстайте само меню, для чего вам следует изучить верстку и CSS на хорошем уровне
почитайте про анимацию, и прикрутите ее к сверстанному вами меню
возможно будет проще использовать какой-то фреймворк

в любом случае это достаточно трудоемко сделать такое меню на JS
если вы новичек, то вам следует начать с более простых задач

Как раз такое не сильно сложно, т.к. не надо заботиться о его позиции - блок всегда будет занимать всю ширину. ТС'у надо только понять, как сверстать подобное и какую обработку написать.
Welt, все мои "ссылочки" - в гугле, никто за вас их искать не будет (может кто-то и будет, но я вредный). Постарайтесь сами хотя бы что-то сделать для решения задачи. Вот если в процессе будут непонятки - задавайте конкретные вопросы с приведением кода, будем разбираться вместе.

Окэй,вот вобщем что я сделал

<script>
        $(function () {
            $('.show-one').mouseover(function () {
                $('#menu1').attr('style', 'display: block').addClass('.show-one');
            });
            $('#menu1').mouseout(function () {
                $('#menu1').attr('style', 'display: none').addClass('.show-one');
            });
            $('.show-two').mouseover(function () {
                $('#menu2').attr('style', 'display: block').addClass('.show-two');
            });
            $('#menu2').mouseout(function () {
                $('#menu2').attr('style', 'display: none').addClass('.show-two');
            });
            $('.show-three').mouseover(function () {
                $('#menu3').attr('style', 'display: block').addClass('.show-three');
            });
            $('#menu3').mouseout(function () {
                $('#menu3').attr('style', 'display: none').addClass('.show-three');
            });
            $('.show-four').mouseover(function () {
                $('#menu4').attr('style', 'display: block').addClass('.show-four');
            });
            $('#menu4').mouseout(function () {
                $('#menu4').attr('style', 'display: none'.addClass('.show-four'));
            });
        });
    </script>

CSS

.menu
{
    float: left;
    width: 900px;
}

ul
{
    padding: 0;
    margin: 0;
}

.menu li
{
    float: left;
    list-sltye: none;
    width: 80px;
    padding: 0;
    list-style: none;
    height: 30px;
    background: #20548E;
    color: White;
    text-align: center;
    border-right: 1px solid white;
    
}

#menu1, #menu2, #menu3, #menu4
{
    position: absolute;
    top: 125px;
    background: #20548E;
    display: none;
    width: 900px;
    height: 100px;
    color: White;
}
#menu2 .a
{
    text-decoration: none;
    color: White;
}

body
{
    margin: 0;
    padding: 0;
    font-family: "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
}
#show-one
{
    color: White;
    text-align: center;
}
#show-one a:hover
{
    background: #1A4473;
}
.menu li a:hover
{
    background: #1A4473;
}

.menu a
{
    color: White;
    text-decoration: none;
}
.menu a:hover
{
    color: White;
    text-decoration: none;
}

и сам код

<div>
                    <div class="menu">
                        <ul>
                            <li class="show-one"><a href="<%= Url.Action("Index", "Home")%>">Home</a></li>
                            <li class="show-two"><a href="#"><span>Services</span></a></li>
                            <li class="show-three"><a href="#"><span>Publications</span></a></li>
                            <li class="show-four"><a href="#"><span>References</span></a></li>
                            <li><a href="#"><span>About Us</span></a></li>
                            <li><a href="#"><span>Contacts</span></a></li>
                        </ul>
                    </div>
                    <div id="menu1">
                        qwerty</div>
                    <div id="menu2">
                        <div>
                            <ul style="float:left; margin-right:15px;">
                                <li>General consulting</li>
                                <li>Market analysis</li>
                                <li>Business-Plan</li>
                                <li>Fact finding</li>
                            </ul>
                            <ul style="float:left;">
                                <li>Russina accounting </li>
                                <li>Payroll</li>
                            </ul>
                            <ul>
                                <li><a href="#"><span>Busines Set-Up</span></a> </li>
                                <li><a href="#"><span>Accounting/Reporting</span></a> </li>
                                <li><a href="#"><span>Due Diligence/Internal Audit</span></a> </li>
                                <li><a href="#"><span>Legal Address/Office Space</span></a> </li>
                                <li><a href="#"><span>Taxation</span></a> </li>
                                <li><a href="#"><span>Human Resources</span></a> </li>
                                <li><a href="#"><span>Interim Managment</span></a> </li>
                            </ul>
                        </div>
                    </div>
                    <div id="menu3">
                        sdflkgjsdflkgsdf kdfjg lkfjgd flkgjsdf lgkjs</div>
                    <div id="menu4">
                        32485734985 34958743 987</div>
                </div>

Работает,но работает весьма криво :) помогите доработать напильником

первая проблема это то что открываемый див работает отлично везде кроме IE как я понимаю это из за Position absolute; как обойти? Вторая проблема это то что когда я навел мышку на меню у меня появляется всплывающее окошко, и убраться оно должно когда либо я перехожу на новое меню либо убираю мышку с всплывшего окна..как понимаю надо поправить скрипт, вобщем помогите :)

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

Отформатировал