CSS позиционирование подменю - PullRequest
Новая
       19

CSS позиционирование подменю

0 голосов
/ 16 февраля 2012

возможно ли удерживать положение рекламного щита 2-го уровня зафиксированным сверху, а не перемещаться вниз по странице при наведении?

код

HTML 

<ul id="nav">
    <li><a href="#">STUFF</a>
        <ul>
            <li><a href="#">STUFF</a>

                <ul>
                    <li>
                        <div><a href="#">LINK LINK ></a></div>
                    </li>
                </ul>
            </li>
            <li><a href="#">STUFF</a>
                <ul>

                    <li>
                        <div><a href="#">LINK LINK ></a></div>
                    </li>
                </ul>
            </li>
            <li><a href="#">STUFF</a>
                <ul>
                    <li>

                        <div><a href="#">LINK LINK ></a></div>
                    </li>
                </ul>
            </li>
            <li><a href="#">STUFF</a>
                <ul>
                    <li>
                        <div><a href="#">LINK LINK ></a></div>

                    </li>
                </ul>
            </li>
            <li><a href="#">STUFF</a>
                <ul>
                    <li>
                        <div>asdasdasd</div>
                    </li>

                </ul>
            </li>
            <li><a href="#">STUFF</a>
                <ul>
                    <li>
                        <div>asdasdasd</div>
                    </li>
                </ul>

            </li>
            <li><a href="#">STUFF</a>
                <ul>
                    <li>
                        <div>asdasdasd</div>
                    </li>
                </ul>
            </li>

        </ul>
    </li>
    <li><a href="#">STUFF</a>
        <ul>
            <li><a href="#">STUFF</a></li>
            <li><a href="#">STUFF</a></li>
        </ul>

    </li>
    <li><a href="#">STUFF</a>
        <ul>
            <li><a href="#">STUFF</a></li>
            <li><a href="#">STUFF</a></li>
        </ul>
    </li>

    <li><a href="#">STUFF</a>
        <ul>
            <li><a href="#">STUFF</a></li>
            <li><a href="#">STUFF</a></li>
        </ul>
    </li>
    <li><a href="#">STUFF</a>

        <ul>
            <li><a href="#">STUFF</a></li>
            <li><a href="#">STUFF</a></li>
        </ul>
    </li>
    <li><a href="#">STUFF</a>
        <ul>

            <li><a href="#">STUFF</a></li>
            <li><a href="#">STUFF</a></li>
        </ul>
    </li>
    <li class="navblue"><a href="#">STUFF</a>
        <ul>
            <li><a href="STUFF">STUFF</a></li>

            <li><a href="STUFF">STUFF</a></li>
        </ul>
    </li>
    <li class="navorange"><a href="STUFF">STUFF</a></li>
</ul>​

CSS 

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:   12px;
    color:       #000000;
}

#nav, #nav ul {
    list-style-type:     none;
    list-style-position: outside;
    position:            relative;
    line-height:         30px;
    margin:              0;
    padding:             0;
}

#nav li > a {
    font-weight:      bold;
    display:          block;
    margin-top:       -1px;
    color:            #fff;
    text-decoration:  none;
    background-color: #008000;
    padding:          0 10px;
    width:            99px;
    border-bottom:    1px solid #FFFFFF;
}

#nav li > a:hover {
    background-color: #99CC00;
    color:            #000;
}

#nav li {
    float:        left;
    position:     relative;
    margin-right: 1px;
}

#nav ul {
    position: absolute;
    display:  none;
    width:    12em;
    top:      2.5em;
}

#nav li ul a {
    width:       160px;
    height:      auto;
    float:       left;
    line-height: 30px;
    font-size:   12px;
    font-weight: normal;
}

#nav ul ul {
    top: auto;
}

#nav ul ul {
    height:           299px;
    width:            652px;
    margin:           0;
    padding:          0;
    background-color: #999999;
}

#nav ul ul li {
    padding: 20px;
}

#nav li.navblue a {
    background-color: #3398CC;
}

#nav li.navorange a {
    background-color: #FF9A02;
    color:            #FEFF00;
}

#nav li ul ul {
    left:        14.9em;
    margin-left: -2px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
    display: none
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
    display: block
}​

JavaScript / JQuery 

window.addEvent('load', function () {
    function mainmenu() {
        $("#nav ul").css({display:"none"}); // Opera Fix
        $("#nav li").hover(function () {
            $(this).find('ul:first').css({visibility:"visible", display:"none"}).show(0);
        }, function () {
            $(this).find('ul:first').css({visibility:"hidden"});
        });
    }

    $(document).ready(function () {
        mainmenu();
    });
})​

Живой пример

1 Ответ

0 голосов
/ 16 февраля 2012

замените текущий css следующим: 

<style type='text/css'>
body {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#000000;}
#nav,#nav ul{list-style-type:none;list-style-position:outside;position:relative;line-height:30px;margin:0;padding:0;}
#nav li > a{font-weight:bold;display:block;margin-top:-1px;color:#fff;text-decoration:none;background-color:#008000;padding:0 10px;width:99px;border-bottom:1px solid #FFFFFF;}
#nav li > a:hover{background-color:#99CC00;color:#000;}
#nav li{float:left;margin-right:1px;}
#nav ul{position:absolute;display:none;width:12em;top:2.5em;}
#nav li ul a{width:160px;height:auto;float:left;line-height:30px;font-size:12px;font-weight:normal;}
#nav ul ul{top:0;}
#nav ul ul {height:299px;width:652px;margin:0;padding:0;background-color:#999999;}
#nav ul ul li {padding:20px;}
#nav li.navblue a{background-color:#3398CC;}
#nav li.navorange a{background-color:#FF9A02;color:#FEFF00;}
#nav li ul ul{left:14.9em;margin-left:-2px;}
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul{display:none}
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}
</style>

Изменения: уберите относительную позицию из #nav li и позицию #nav ul ul top: 0

...