Source: dist/css/acc_boot.css, line 14233
5.1.4.3 Dropdown Double Column
The Header Nav of ACC.org
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 dropdown_column w_50:md">
<ul class="ul_none lh_2 m_0 max-w_25 w_100">
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes.pdf"
><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"
target="_blank"
><span class="text-indent_n1 inline-block m-l_4">Anticoagulation Management</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/arrhythmias-and-clinical-ep"
><span class="text-indent_n1 inline-block m-l_4">Arrhythmias and Clinical EP</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad"
><span class="text-indent_n1 inline-block m-l_4">Atherosclerotic Disease (CAD/PAD)</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/cardiac-surgery"
><span class="text-indent_n1 inline-block m-l_4">Cardiac Surgery</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/cardio-oncology"
><span class="text-indent_n1 inline-block m-l_4">Cardio-Oncology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/congenital-heart-disease-pediatric-cardiology"
><span class="text-indent_n1 inline-block m-l_4">Congenital Heart Disease and Pediatric Cardiology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/diabetes-and-cardiometabolic-disease.zip"
><span class="text-indent_n1 inline-block m-l_4">Diabetes and Cardiometabolic Disease</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/dyslipidemia"
title="Dyslipidemia"
><span class="text-indent_n1 inline-block m-l_4">Dyslipidemia</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/geriatric-cardiology"
><span class="text-indent_n1 inline-block m-l_4">Geriatric Cardiology</span></a
>
</li>
<li class="m-b_2">
<a
class="dropdown-item link transition_4 wrap"
href="/clinical-topics/heart-failure-and-cardiomyopathies"
title="Heart Failure and Cardiomyopathies"
><span class="text-indent_n1 inline-block m-l_4">Heart Failure and Cardiomyopathies</span></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 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>