Source: dist/css/acc_boot.css, line 14300
5.1.4.4 Nav Dropdown with Alternate Content in Links
It is easy to add images in replace of text links in the navs.
Example
Default styling
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="p-x_2 p-y_0 p-y_2:md order_2 order_1:md dropdown_column w_50:md">
<ul class="ul_none lh_2">
<li class="relative m-x_2:md m-x_3">
<a
href="http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133"
target="_blank"
class="transition_1 h:opacity opacity_8"
><img
src="https://www.acc.org/~/media/Non-Clinical/Images/External%20Site%20Logos/ACC_QII_logo.png"
alt="QII" class="w_100 max-w_20"
/></a>
</li>
<li class="relative m-x_2:md m-x_3">
<a href="http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133" target="_blank" class="transition_1 h:opacity opacity_8"><img src="https://www.acc.org/~/media/Non-Clinical/Images/External Site Logos/ACC_NCDR_logo.png" alt="NCDR" class="w_100 max-w_20"></a>
</li>
</ul> </div>
<div
class="p-x_2 p-y_0 p-y_2:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md order_1 order_2:md dropdown_column w_50:md"
>
<ul class="ul_none lh_2"
id="SubLinkCollapseParent">
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes"><span
class="text-indent_n1 inline-block m-l_4">Acute
Coronary Syndromes</span></span></a>
</li>
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/anticoagulation-management"
title="Anticoagulation Management"><span
class="text-indent_n1 inline-block m-l_4">Anticoagulation
Management</span></a>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<button class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="learningCollapse"
data-bs-target="#learningCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</button>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="#">Online Learning Catalog</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="learningCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/earncredit"><span
class="text-indent_n1 inline-block m-l_5">Earn
Credit</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/board-prep-offerings"
title="Board Prep Offerings"><span
class="text-indent_n1 inline-block m-l_5">Board
Prep Offerings</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/education-catalog"><span
class="text-indent_n1 inline-block m-l_5">View
the Entire Catalog</span></a>
</li>
</ul>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<a class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="productsCollapse"
data-bs-target="#productsCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</a>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="/education-and-meetings/education-catalog">Products</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="productsCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accsap"><span
class="text-indent_n1 inline-block m-l_5">ACCSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accel-audio"><span
class="text-indent_n1 inline-block m-l_5">ACCEL</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cardiosource-plus"><span
class="text-indent_n1 inline-block m-l_5">CardioSource
Plus for Institutions and
Practices</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cathsap"><span
class="text-indent_n1 inline-block m-l_5">CathSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
title="ECG Drill and Practice"><span
class="text-indent_n1 inline-block m-l_5">ECG
Drill and Practice</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/echosap"><span
class="text-indent_n1 inline-block m-l_5">EchoSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/epsap"><span
class="text-indent_n1 inline-block m-l_5">EP
SAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/heart-songs-5"><span
class="text-indent_n1 inline-block m-l_5">Heart
Songs</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/iscience"><span
class="text-indent_n1 inline-block m-l_5">iScience</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"><span
class="text-indent_n1 inline-block m-l_5">Nuclear
Cardiology and Cardiac CT Meeting on
Demand</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"><span
class="text-indent_n1 inline-block m-l_5">RightSTEPS
Optimizing Medical Therapy for
Chronic Heart
Failure</span></a>
</li>
</ul>
</li>
</ul> </div>
</div>