diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
index 883d6889571..961b39793f7 100644
--- a/packages/calcite-components/src/components/list-item/list-item.tsx
+++ b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -22,7 +22,12 @@ import {
 import { SelectionMode } from "../interfaces";
 import { SelectionAppearance } from "../list/resources";
 import { CSS, ICONS, SLOTS } from "./resources";
-import { getDepth, getListItemChildren, updateListItemChildren } from "./utils";
+import {
+  getDepth,
+  getListItemChildren,
+  getListItemChildLists,
+  updateListItemChildren,
+} from "./utils";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import {
   connectMessages,
@@ -675,8 +680,9 @@ export class ListItem
 
     const { parentListEl } = this;
     const listItemChildren = getListItemChildren(slotEl);
+    const listItemChildLists = getListItemChildLists(slotEl);
     updateListItemChildren(listItemChildren);
-    const openable = !!listItemChildren.length;
+    const openable = !!listItemChildren.length || !!listItemChildLists.length;
 
     if (openable && parentListEl && !parentListEl.openable) {
       parentListEl.openable = true;
diff --git a/packages/calcite-components/src/components/list-item/utils.ts b/packages/calcite-components/src/components/list-item/utils.ts
index 94520de9ca7..d063ac3c7bd 100644
--- a/packages/calcite-components/src/components/list-item/utils.ts
+++ b/packages/calcite-components/src/components/list-item/utils.ts
@@ -4,6 +4,12 @@ const listSelector = "calcite-list";
 const listItemGroupSelector = "calcite-list-item-group";
 const listItemSelector = "calcite-list-item";
 
+export function getListItemChildLists(slotEl: HTMLSlotElement): HTMLCalciteListElement[] {
+  return Array.from(
+    slotEl.assignedElements({ flatten: true }).filter((el) => el.matches(listSelector))
+  ) as HTMLCalciteListElement[];
+}
+
 export function getListItemChildren(slotEl: HTMLSlotElement): HTMLCalciteListItemElement[] {
   const assignedElements = slotEl.assignedElements({ flatten: true });
 
diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
index ddc848214c2..63fba29da7d 100644
--- a/packages/calcite-components/src/components/list/list.stories.ts
+++ b/packages/calcite-components/src/components/list/list.stories.ts
@@ -721,3 +721,13 @@ export const sortableNestedList_TestOnly = (): string => html`<calcite-list
   <calcite-list-item label="Hi! 6" description="hello world"></calcite-list-item>
   <calcite-list-item label="Hi! 7" description="hello world"></calcite-list-item>
 </calcite-list>`;
+
+export const listWithEmptyChildList_TestOnly = (): string => html`<calcite-list
+  drag-enabled
+  group="nested"
+  selection-mode="single"
+>
+  <calcite-list-item open label="Hi! 4" description="hello world">
+    <calcite-list drag-enabled group="nested" selection-mode="single"></calcite-list>
+  </calcite-list-item>
+</calcite-list>`;