dropdown_touch_friendly

by bouyaImamura

HTML

<nav id="nav">
    <ul>
        <li><a href="./1/">1</a>
            <ul class="children-1">
                <li><a href="./1-1/">1-1</a>
                    <ul class="children-2">
                        <li><a href="./1-1-1/">1-1-1</a></li>
                        <li><a href="./1-1-2/">1-1-2</a></li>
                    </ul>                
                </li>
                <li><a href="./1-2/">1-2</a>
                    <ul class="children-2">
                        <li><a href="./1-2-1/">1-2-1</a></li>
                        <li><a href="./1-2-2/">1-2-2</a></li>
                        <li><a href="./1-2-3/">1-2-3</a></li>
                        <li><a href="./1-2-4/">1-2-4</a></li>
                    </ul>
                </li>
                <li><a href="./1-3/">1-3</a>
                    <ul class="children-2">
                        <li><a href="./1-3-1/">1-3-1</a></li>
                    </ul>                
                </li>
            </ul>
        </li>
        <li><a href="./2/">2</a>
            <ul class="children-1">
                <li><a href="./2-1/">2-1</a>
                    <ul class="children-2">
                        <li><a href="./2-1-1/">2-1-1</a></li>
                        <li><a href="./2-1-2/">2-1-2</a></li>
                    </ul>                                
                </li>
                <li><a href="./2-2/">2-2</a>
                    <ul class="children-2">
                        <li><a href="./2-2-1/">2-2-1</a></li>
                        <li><a href="./2-2-2/">2-2-2</a></li>
                    </ul>                                
                </li>
                <li><a href="./2-1/">2-3</a>
                    <ul class="children-2">
                        <li><a href="./2-3-1/">2-3-1</a></li>
                        <li><a href="./2-3-2/">2-3-2</a></li>
                        <li><a href="./2-3-3/">2-3-3</a></li>
                        <li><a href="./2-3-4/">2-3-4</a></li>
   ...

CSS

/*ナビゲーション*/

#nav{
    background:#E6E4D7;
    float:left;
    margin:15px;
}

#nav li{
	text-align:center;
	position:relative;
	float:left;
    width:110px;
}

#nav a{
    text-decoration:none;
    color:#333;
}

#nav li a{
	display:block;
	height:38px;
	line-height:38px;
	font-size:12px;
}

#nav .children-1 a,
#nav .children-2 a{
	height: 30px;
	line-height: 30px;
	width: 100%;
	background: #E6E4D7;
	border-top: 1px solid #D8D7CA;
}

#nav .children-2 a{
	width:100%;
}

#nav li .children-1 li,
#nav li .children-2 li{
	width:110px;
}

#nav li .children-1{
	display:none;
	position:absolute;
	top:38px;
	left:0px;
	width:100%;
}

#nav li .children-1 li .children-2{
	display:none;
	position:absolute;
	top:0px;
	left:110px;
	width:100%;
}

#nav li:hover .children-1{
	display:block;
	background:#E6E4D7;
}

#nav .children-1 li:hover .children-2{
	display:block;
	background:#E6E4D7;
}


#nav li:hover > a{
	background:#E6E4D7;
}

#nav li:hover a:hover{
	background:#DBD8C5;
}