css 嵌套列表下拉,使用CSS的水平嵌套列表

我正在尝试从嵌套列表标记创建水平列表,例如,我拥有当前标记：

• List Item 1
• List Item 2
• List Item 3
• List Item 4
  • List Item 4a
  • List Item 4b
  • List Item 4c
  • List Item 4d
• List Item 5

我想要实现类似于以下内容：

div { display: inline-block; }

.alone { background: #E5ECF9; border: 1px solid #336699; color: #336699; }

.group { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }

.group .not_alone { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }

.item { padding: 2px; margin: 0 2px; }

List Item 1

List Item 2

List Item 3

List Item 4

List Item 4a

List Item 4b

List Item 4c

List Item 4d

List Item 5