Dropdown

/*

Haninge Hägersten Nacka Värmdö CSS: .desktop-nav ul ul { display: none; position: absolute; top: 2.2em; left: 0; background-color: rgba(255,255,255,1); z-index: 10; padding-top: 0.8em; transition: .5s ease-in-out; transition-timing-function: ease-in-out; width:230px; padding-bottom:0.5em; box-shadow: 0 2px 16px 0 rgba(0,0,0,0.2);} .desktop-nav ul ul a { padding: 0 0.3em 0.3em; display: block; } .ddlink a {color:#b98958;font-size:0.9em;word-break:keep-all;} .desktop-nav ul li:hover ul { display:block; text-align: left; padding-left:0.8em; padding-right:0.8em; line-height:1.2; } .desktop-nav li:nth-child(2):after { content: url(https://uploads.staticjw.com/sn/snab/arrow-up-red.svg); color: #000; position: absolute; right: -0.8em; top: -3px; transition: .3s; transition-timing-function: ease-in-out; width: 10px; padding:0;} .desktop-nav li:hover:nth-child(2):after { content: url(https://uploads.staticjw.com/sn/snab/arrow-down-red.svg); position: absolute; right: -0.8em; top: -3px; color: #000; } /* Dropdown Button (lilla pilen i menyn) */ .dropbtn { position:relative; background-color: transparent; color: #fff; padding: 16px; border: none; cursor: pointer; } .dropbtn::after { content: url(https://uploads.staticjw.com/sn/snab/arrow-down-red.svg); position: absolute; margin-left: 0.5em; width: 10px; top: -5px; } .dropbtn::after:hover { content: url(https://uploads.staticjw.com/sn/snab/arrow-up-red.svg); margin-top: 0; margin-left: 1em; position: absolute; transform : rotate(180deg); } .dropbtn:hover, .dropbtn:focus {text-decoration:none;} .dropdown {position: relative;display: inline-block;-webkit-transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in; transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in, transform 0.5s 0.2s cubic-bezier(0.4, 0, 0.3, 0.3);} .dropdown-content a:hover {color: #a6a6a6;-webkit-transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in; transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in, transform 0.5s 0.2s cubic-bezier(0.4, 0, 0.3, 0.3);} .dropdown-content { display: none; position: relative; background-color: transparent; min-width: 100%; z-index: 1; overflow: auto; line-height:1.2; font-family: "Oxanium", sans-serif; font-optical-sizing: auto; color: #222; font-weight: 600; font-size:1em; margin-top:0; text-align:center; -webkit-transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in; transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in, transform 0.5s 0.2s cubic-bezier(0.4, 0, 0.3, 0.3); } .dropdown-content a { color: #d2d2d2; padding: 0; text-decoration: none; display: block!important; font-size:0.8em; line-height:1.8; font-weight:300; text-align:center; -webkit-transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in; transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in, transform 0.5s 0.2s cubic-bezier(0.4, 0, 0.3, 0.3); } .dropdown-content a:hover {color: #a6a6a6;} .mobile-nav li a:hover {color: #a6a6a6;} .show {display:block;-webkit-transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in; transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in, transform 0.5s 0.2s cubic-bezier(0.4, 0, 0.3, 0.3);} .ddlink a {color:blue;font-size:0.9em;word-break:keep-all;} Javascript:

*/