// 아코디언 <nav> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </nav>
* { margin: 0; padding: 0; } ul, ol { list-style-type: none; } li { width: 150px; height: 480px; float: right; transition: all .5s; } nav li:nth-child(1) { background: url(http://tympanus.net/Tutorials/ElegantAccordion/images/1.jpg) no-repeat center center; } nav li:nth-child(1):hover { width: 480px; } nav li:nth-child(2) { background: url(http://tympanus.net/Tutorials/ElegantAccordion/images/2.jpg) no-repeat center center; } nav li:nth-child(2):hover { width: 480px; } nav li:nth-child(3) { background: url(http://tympanus.net/Tutorials/ElegantAccordion/images/3.jpg) no-repeat center center; } nav li:nth-child(3):hover { width: 480px; } nav li:nth-child(4) { background: url(http://tympanus.net/Tutorials/ElegantAccordion/images/4.jpg) no-repeat center center; } nav li:nth-child(4):hover { width: 480px; }