Показать сообщение отдельно
  #8 (permalink)  
Старый 24.05.2010, 16:16
Новичок на форуме
Отправить личное сообщение для Welt Посмотреть профиль Найти все сообщения от Welt
 
Регистрация: 22.05.2010
Сообщений: 6

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

<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; как обойти? Вторая проблема это то что когда я навел мышку на меню у меня появляется всплывающее окошко, и убраться оно должно когда либо я перехожу на новое меню либо убираю мышку с всплывшего окна..как понимаю надо поправить скрипт, вобщем помогите

Последний раз редактировалось Welt, 24.05.2010 в 19:35.
Ответить с цитированием