C++が好き: suckerfishでdropdownメニュー

ここから。
肝は、hoverしていないulを明後日の方に配置するということだけ。
hoverしたらulをもとの位置に戻す。
横メニューなら

<html>
    <head>
        <title>horizontal nav</title>
        <meta charset="utf-8">
        <link rel=stylesheet type="text/css" href="horizontalMenu.css">
    </head>
    <body>
        <div id="menu">
            <ul>
                <li><a href="">test11</a></li>
                <li>second
                    <ul>
                        <li><a href="">test21</a></li>
                        <li><a href="">test22</a></li>
                        <li>third
                            <ul>
                                <li><a href="">test31</a></li>
                                <li><a href="">test32</a></li>
                                <li><a href="">test33</a></li>
                            </ul>
                        </li>
                        <li><a href="">test23</a></li>
                    </ul>
                </li>
                <li><a href="">test12</a></li>
                <li><a href="">test13</a></li>
            </ul>
        </div>
    </body>
</html>

に対して

#menu ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
    float: left;
}

#menu li{
    margin: 0px;
    padding: 0px;
    border: 1px solid;
    display: block;
    color: black;
    background-color: white;
    display: block;
}

#menu li:hover{
    color: white;
    background-color: black;
}

#menu > ul > li{
    float: left;
}

#menu ul > li > ul{
    position: absolute;
    left: -999em;
}

#menu ul > li:hover > ul{
    left: auto;
}

#menu ul > li > ul > li{
    width: 10em;
}

#menu ul > li > ul > li:hover > ul{
    margin-top: -1.1em;
    margin-left: 10em;
}

もしくは

#menu ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
    float: left;
}

#menu li{
    margin: 0px;
    padding: 0px;
    border: 1px solid;
    display: block;
    color: black;
    background-color: white;
    display: block;
}

#menu li:hover{
    color: white;
    background-color: black;
}

#menu > ul > li{
    float: left;
}

#menu ul > li > ul{
    position: absolute;
    display: none;
}

#menu ul > li:hover > ul{
    display: block;
}

#menu ul > li > ul > li{
    width: 10em;
}

#menu ul > li > ul > li:hover > ul{
    margin-top: -1.1em;
    margin-left: 10em;
}

垂直メニューなら

#menu ul{
   margin: 0px;
   padding: 0px;
   width: 10em;
   list-style: none;
   float: left;
}

#menu li{
   margin: 0px;
   padding: 0px;
   width: 10em;
   border: 1px solid;
   position: relative;
   float: left;
   color: black;
   background-color: white;
   display: block;
}

#menu li:hover{
   color: white;
   background-color: black;
}

#menu li > ul{
   margin-top: -1.3em;
   margin-left: 10em;
   position: absolute;
   left: -999em;
}

#menu li:hover > ul{
   left: auto;
}

もしくは

#menu ul{
    margin: 0px;
    padding: 0px;
    width: 10em;
    list-style: none;
    float: left;
}

#menu li{
    margin: 0px;
    padding: 0px;
    width: 10em;
    border: 1px solid;
    position: relative;
    float: left;
    color: black;
    background-color: white;
    display: block;
}

#menu li:hover{
    color: white;
    background-color: black;
}

#menu li > ul{
    margin-top: -1.3em;
    margin-left: 10em;
    position: absolute;
    display: none;
}

#menu li:hover > ul{
    display: block;
}

C++が好き

2011年9月5日月曜日

suckerfishでdropdownメニュー

0 件のコメント:

コメントを投稿