Эффекты на основе Java Script

Все стили как меню так и подменю задаются в CSS таблице. Если Вы хотите что-нибуть изменить Вам необходимо с помощью функции [Скачать с сервера] скачать её и внести необходимые изменения.

Внутри тега <BODY> - </BODY> там где у Вас будет меню.

<table cellspacing="0" cellpadding="0" id="menu1" class="ddmx">
    <tr>
        <td>
            <a class="item1" href="javascript:void(0)">Products</a>
            <div class="section">
                <a class="item2" href="#">Product One</a>
                <a class="item2 arrow" href="javascript:void(0)">Product Two<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_gor/503/img/arrow1.gif" width="10" height="12" alt="" /></a>
                <div class="section">
                    <a class="item2" href="#">Overview</a>
                    <a class="item2" href="#">Features</a>
                    <a class="item2" href="#">Requirements</a>
                    <a class="item2" href="#">Flash Demos</a>
                </div>
                <a class="item2 arrow" href="javascript:void(0)">Product Three<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_gor/503/img/arrow1.gif" width="10" height="12" alt="" /></a>
                <div class="section">
                    <a class="item2" href="#">Overview</a>
                    <a class="item2" href="#">Features</a>
                    <a class="item2" href="#">Requirements</a>
                    <a class="item2" href="#">Screenshots</a>
                    <a class="item2" href="#">Flash Demos</a>
                    <a class="item2 arrow" href="javascript:void(0)">Live Demo<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_gor/503/img/arrow1.gif" width="10" height="12" alt="" /></a>
                    <div class="section">
                        <a class="item2" href="#">Create Account</a>
                        <a class="item2 arrow" href="javascript:void(0)">Test Drive<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_gor/503/img/arrow1.gif" width="10" height="12" alt="" /></a>
                        <div class="section">
                            <a class="item2" href="#">Test One</a>
                            <a class="item2" href="#">Test Two</a>
                            <a class="item2" href="#">Test Three</a>
                        </div>
                    </div>
                </div>
                <a class="item2 arrow" href="javascript:void(0)">Product Four<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_gor/503/img/arrow1.gif" width="10" height="12" alt="" /></a>
                <div class="section">
                    <a class="item2" href="#">Overview</a>
                    <a class="item2" href="#">Features</a>
                    <a class="item2" href="#">Requirements</a>
                </div>
                <a class="item2" href="#">Product Five</a>
            </div>
        </td>
        <td>
            <a class="item1" href="javascript:void(0)">Downloads</a>
            <div class="section">
                <a class="item2" href="#">30-day Demo Key</a>
                <a class="item2 arrow" href="javascript:void(0)">Product One Download<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_gor/503/img/arrow1.gif" width="10" height="12" alt="" /></a>
                <div class="section">
                    <a class="item2" href="#">Linux Download</a>
                    <a class="item2" href="#">Solaris Download</a>
                    <a class="item2" href="#">Windows Download</a>
                </div>
                <a class="item2 arrow" href="javascript:void(0)">Product Two Download<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_gor/503/img/arrow1.gif" width="10" height="12" alt="" /></a>
                <div class="section">
                    <a class="item2" href="#">Linux Download</a>
                </div>
            </div>
        </td>
        <td>
            <a class="item1" href="javascript:void(0)">Support</a>
            <div class="section">
                <a class="item2" href="#">E-mail Support</a>
                <a class="item2" href="#">Phone Support</a>
                <a class="item2" href="#">WWW support</a>
            </div>
        </td>
        <td>
            <a class="item1" href="javascript:void(0)">Partners</a>
            <div class="section">
                <a class="item2" href="#">Benefits</a>
                <a class="item2 arrow" href="javascript:void(0)">Applications<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_gor/503/img/arrow1.gif" width="10" height="12" alt="" /></a>
                <div class="section">
                    <a class="item2" href="#">Application One</a>
                    <a class="item2" href="#">Application Two</a>
                    <a class="item2" href="#">Application Three</a>
                    <a class="item2" href="#">Application Four</a>
                    <a class="item2" href="#">Application Five</a>
                    <a class="item2" href="#">Application Six</a>
                    <a class="item2" href="#">Application Seven</a>
                </div>
                <a class="item2" href="#">Listing</a>
            </div>
        </td>
        <td>
            <a class="item1" href="javascript:void(0)">Customers</a>
            <div class="section">
                <a class="item2" href="#">Customer One</a>
                <a class="item2" href="#">Customer Two</a>
                <a class="item2" href="#">Customer Three</a>
            </div>
        </td>
        <td>
            <a class="item1" href="javascript:void(0)">About Us</a>
            <div class="section">
                <a class="item2" href="#">Executive Team</a>
                <a class="item2" href="#">Investors</a>
                <a class="item2" href="#">Career Opportunities</a>
                <a class="item2 arrow" href="javascript:void(0)">Press Center<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_gor/503/img/arrow1.gif" width="10" height="12" alt="" /></a>
                <div class="section">
                    <a class="item2" href="#">Products Information</a>
                </div>
                <a class="item2" href="#">Success Stories</a>
                <a class="item2" href="#">Contact Us</a>
            </div>
        </td>
    </tr>
    </table>

<script type="text/javascript">
    var ddmx = new DropDownMenuX('menu1');
    ddmx.delay.show = 0;               // задержка при открытии подменю при наведении курсора
    ddmx.delay.hide = 600;             // задержка закрытия подменю при снятии курсора
    ddmx.position.levelX.left = 10;     // смещение подменю-подменю при горизонтальномразвороте
    ddmx.init();
    </script>

Здесь основное тоже подписано. Остальное проблем вызвать не должно, так как структура меню достаточна проста и понятна. Как Вы видите основное меню легко наращивается вправо, а подменю как вправо так и вниз.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.