* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul { list-style-type: none; } /** ======================= * Contenedor Principal ===========================*/ .list-title{ display: inline-block; width: 100%; max-width: 200px; border-top: solid 1px #ccc; border-left: solid 1px #ccc; border-right: solid 1px #ccc; background: #FFF; text-align: center; height: 60px; line-height: 60px; font-size: 20px; color: #f39800; font-weight: bold; cursor: pointer; } .accordion { width: 100%; max-width: 200px; border: solid 1px #ccc; background: #FFF; } .accordion .linka{ cursor: pointer; display: block; padding: 15px 24px 15px 5px; color: #4D4D4D; font-size: 14px; font-weight: 700; border-bottom: 1px solid #CCC; position: relative; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .accordion li:last-child .linka { border-bottom: 0; } .accordion li{ cursor: pointer; } .accordion li i { position: absolute; top: 16px; left: 12px; font-size: 18px; color: #595959; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .accordion li i.fa-chevron-down { right: 12px; left: auto; font-size: 16px; } .accordion li.open .linka { color: #5e727d; } .accordion li.open i { color: #3f515d; } .accordion li.open i.fa-chevron-down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /** * Submenu -----------------------------*/ .submenu { display: none; background: #f5f5f5; font-size: 14px; } .submenu li { border-bottom: 1px solid #d6d7dc; } .submenu a { display: block; text-decoration: none; color: #666; padding: 12px; /* padding-left: 42px; */ -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .submenu a:hover ,.submenu li.current a{ background: #162e78; color: #FFF; } /*http://www.jq22.com*/