List style
unknown
css
a year ago
12 kB
4
Indexable
Never
<style> .groupmenu-drop { max-width: 900px; margin: auto; column-count: 4; counter-reset: alphabeticList; } @media (max-width: 767px) { .groupmenu-drop { column-count: 1; margin-left: 40px; } } @media (min-width: 768px) and (max-width: 1024px) { .groupmenu-drop { column-count: 2; margin-left: 50px; } } .groupmenu-drop > .level1 { position: relative; padding: 0 0 14px !important; counter-increment: alphabeticList; } .groupmenu-drop > .level1 { padding-bottom: 5px; } .groupmenu-drop > .level1 a { font: 600 14px/30px 'Open Sans', sans-serif; letter-spacing: 0px; color: #166665; } .groupmenu-drop .level1:before { content: counter(alphabeticList, upper-alpha); position: absolute; top: 3px; left: -40px; border: 2px solid #166665; text-align: center; border-radius: 7px; font: bold 21px/34px 'Open Sans', sans-serif; letter-spacing: 0px; color: #095352; width: 27px; height: 27px; line-height: 23px; } .groupmenu-drop .level1:first-child:before { background-color: #166665; color: #fef6eb; } </style> <body> <ul class="groupmenu-drop slidedown" > <li class="level1 nav-1 item first"> <a class="menu-link" href="/brands/angelcare.html" ><span>Angelcare</span></a > </li> <li class="level1 nav-2 item"> <a class="menu-link" href="/brands/baby-art.html" ><span>Baby Art</span></a > </li> <li class="level1 nav-3 item"> <a class="menu-link" href="/brands/barbie.html" ><span>Barbie</span></a > </li> <li class="level1 nav-4 item"> <a class="menu-link" href="/brands/bibado.html" ><span>Bibado</span></a > </li> <li class="level1 nav-5 item"> <a class="menu-link" href="/brands/boon.html" ><span>Boon</span></a > </li> <li class="level1 nav-6 item"> <a class="menu-link" href="/brands/braun.html" ><span>Braun</span></a > </li> <li class="level1 nav-7 item"> <a class="menu-link" href="/brands/diono.html" ><span>Diono</span></a > </li> <li class="level1 nav-8 item"> <a class="menu-link" href="/brands/disney.html" ><span>Disney</span></a > </li> <li class="level1 nav-9 item"> <a class="menu-link" href="/brands/dorel.html" ><span>Dorel</span></a > </li> <li class="level1 nav-10 item"> <a class="menu-link" href="/brands/dr-brown-s.html" ><span>Dr Brown's</span></a > </li> <li class="level1 nav-11 item"> <a class="menu-link" href="/brands/dreambaby.html" ><span>Dreambaby</span></a > </li> <li class="level1 nav-12 item"> <a class="menu-link" href="/brands/dreamgenii.html" ><span>Dreamgenii</span></a > </li> <li class="level1 nav-13 item"> <a class="menu-link" href="/brands/dumbo.html" ><span>Dumbo</span></a > </li> <li class="level1 nav-14 item"> <a class="menu-link" href="/brands/earth-friendly-baby.html" ><span>Earth Friendly Baby</span></a > </li> <li class="level1 nav-15 item"> <a class="menu-link" href="/brands/east-coast.html" ><span>East Coast</span></a > </li> <li class="level1 nav-16 item"> <a class="menu-link" href="/brands/fisher-price.html" ><span>Fisher-Price</span></a > </li> <li class="level1 nav-17 item"> <a class="menu-link" href="/brands/fisher-price-little-people.html" ><span>Fisher-Price Little People</span></a > </li> <li class="level1 nav-18 item"> <a class="menu-link" href="/brands/flair.html" ><span>Flair</span></a > </li> <li class="level1 nav-19 item"> <a class="menu-link" href="/brands/gift-wrap-accessories.html" ><span>Gift Wrap Accessories</span></a > </li> <li class="level1 nav-20 item"> <a class="menu-link" href="/brands/halilit.html" ><span>Halilit</span></a > </li> <li class="level1 nav-21 item"> <a class="menu-link" href="/brands/hey-clay.html" ><span>Hey Clay</span></a > </li> <li class="level1 nav-22 item"> <a class="menu-link" href="/brands/hot-wheels.html" ><span>Hot Wheels</span></a > </li> <li class="level1 nav-23 item"> <a class="menu-link" href="/brands/infantino.html" ><span>Infantino</span></a > </li> <li class="level1 nav-24 item"> <a class="menu-link" href="/brands/janod.html" ><span>Janod</span></a > </li> <li class="level1 nav-25 item"> <a class="menu-link" href="/brands/kaloo.html" ><span>Kaloo</span></a > </li> <li class="level1 nav-26 item"> <a class="menu-link" href="/brands/keel-toys.html" ><span>Keel Toys</span></a > </li> <li class="level1 nav-27 item"> <a class="menu-link" href="/brands/lalaboom.html" ><span>Lalaboom</span></a > </li> <li class="level1 nav-28 item"> <a class="menu-link" href="/brands/lamaze.html" ><span>Lamaze</span></a > </li> <li class="level1 nav-29 item"> <a class="menu-link" href="/brands/lansinoh.html" ><span>Lansinoh</span></a > </li> <li class="level1 nav-30 item"> <a class="menu-link" href="/brands/leap-frog.html" ><span>Leap Frog</span></a > </li> <li class="level1 nav-31 item"> <a class="menu-link" href="/brands/lindam.html" ><span>Lindam</span></a > </li> <li class="level1 nav-32 item"> <a class="menu-link" href="/brands/little-bird-told-me.html" ><span>Little Bird Told Me</span></a > </li> <li class="level1 nav-33 item"> <a class="menu-link" href="/brands/mam.html" ><span>MAM</span></a > </li> <li class="level1 nav-34 item"> <a class="menu-link" href="/brands/mattel.html" ><span>Mattel</span></a > </li> <li class="level1 nav-35 item"> <a class="menu-link" href="/brands/medela.html" ><span>Medela</span></a > </li> <li class="level1 nav-36 item"> <a class="menu-link" href="/brands/mega-bloks.html" ><span>Mega Bloks</span></a > </li> <li class="level1 nav-37 item"> <a class="menu-link" href="/brands/milton.html" ><span>Milton</span></a > </li> <li class="level1 nav-38 item"> <a class="menu-link" href="/brands/munchkin.html" ><span>Munchkin</span></a > </li> <li class="level1 nav-39 item"> <a class="menu-link" href="/brands/my-garden-baby.html" ><span>My Garden Baby</span></a > </li> <li class="level1 nav-40 item"> <a class="menu-link" href="/brands/nuby.html" ><span>Nuby</span></a > </li> <li class="level1 nav-41 item"> <a class="menu-link" href="/brands/nuk.html" ><span>NUK</span></a > </li> <li class="level1 nav-42 item"> <a class="menu-link" href="/brands/philips-avent.html" ><span>Philips Avent</span></a > </li> <li class="level1 nav-43 item"> <a class="menu-link" href="/brands/plasticine.html" ><span>Plasticine</span></a > </li> <li class="level1 nav-44 item"> <a class="menu-link" href="/brands/playmobil.html" ><span>Playmobil</span></a > </li> <li class="level1 nav-45 item"> <a class="menu-link" href="/brands/ragtales.html" ><span>Ragtales</span></a > </li> <li class="level1 nav-46 item"> <a class="menu-link" href="/brands/safety-first.html" ><span>Safety First</span></a > </li> <li class="level1 nav-47 item"> <a class="menu-link" href="/brands/schleich.html" ><span>Schleich</span></a > </li> <li class="level1 nav-48 item"> <a class="menu-link" href="/brands/summer-infant.html" ><span>Summer Infant</span></a > </li> <li class="level1 nav-49 item"> <a class="menu-link" href="/brands/swaddleme.html" ><span>SwaddleMe</span></a > </li> <li class="level1 nav-50 item"> <a class="menu-link" href="/brands/taf-toys.html" ><span>Taf Toys</span></a > </li> <li class="level1 nav-51 item"> <a class="menu-link" href="/brands/thomas-and-friends.html" ><span>Thomas and Friends</span></a > </li> <li class="level1 nav-52 item"> <a class="menu-link" href="/brands/tiny-love.html" ><span>Tiny Love</span></a > </li> <li class="level1 nav-53 item"> <a class="menu-link" href="/brands/tommee-tippee.html" ><span>Tommee Tippee</span></a > </li> <li class="level1 nav-54 item"> <a class="menu-link" href="/brands/tomy.html" ><span>Tomy</span></a > </li> <li class="level1 nav-55 item"> <a class="menu-link" href="/brands/vicks.html" ><span>Vicks</span></a > </li> <li class="level1 nav-56 item"> <a class="menu-link" href="/brands/vital-baby.html" ><span>Vital Baby</span></a > </li> <li class="level1 nav-57 item"> <a class="menu-link" href="/brands/vtech.html" ><span>vTech</span></a > </li> <li class="level1 nav-58 item"> <a class="menu-link" href="/brands/we-made-me.html" ><span>We Made Me</span></a > </li> <li class="level1 nav-59 item"> <a class="menu-link" href="/brands/widdop-bingham.html" ><span>Widdop Bingham</span></a > </li> <li class="level1 nav-60 item last"> <a class="menu-link" href="/brands/winnie-the-pooh.html" ><span>Winnie The Pooh</span></a > </li> </ul> </body>