ul li配下へのフォーカス移動　なぜうごかないのか？

###前提
bootstrap5を使用しHTMLを作成、
各ボタンをtabキーでフォーカスできます。
その後、上下矢印キーでフォーカスを移動し、
メニュー3でEnterを押すと、アコーディオンを開くことができます。

実現したいこと

その後、上下キーでメニュー3-1、3-2にフォーカスを移動、さらにメニュー3-1-1や3-1-2に移動
3-1-2の後は3-2へ移動
さらに4-1を開き、4-1-1、4-1-2と移動したいのですが
なぜか3-1までしか移動できず困っています。
どのようにすればよいかご教授いただけないでしょうか。

加えまして、フォーカスしていない状態からフォーカスを始めるには
tabキーを使用しないとできませんが、上下左右キーをどれか押すことで
メニュー1にフォーカスするようにできないでしょうか。

※Bootstrap5使用しています。
codepenなどで下記を読み込ませれば再現できます。
https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/js/bootstrap.min.js

該当のソースコード

HTML
1<head>
2	<meta charset="utf-8">
3	<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
4	<script defer="" referrerpolicy="origin" src="/cdn-cgi/zaraz/s.js"></script>
5	<script defer="defer" src="https://colorlib.com/polygon/adminator/main.js"></script>
6</head>
7
8<body>
9	<div class="sidebar">
10		<div class="sidebar-inner">
11			<ul class="sidebar-menu scrollable pos-r ps ps--active-y mt-5">
12				<li class="nav-item">
13					<a class="sidebar-link" href="forms.html" id="a1-7" data-d="#a1-8" data-u="#a1-6">
14						<span class="icon-holder"><i class="c-light-blue-500 ti-pencil"></i></span>
15						<span class="title">メニュー1</span>
16					</a>
17				</li>
18				<li class="nav-item dropdown">
19					<a class="sidebar-link" href="ui.html" id="a1-8" data-d="#a1-9" data-u="#a1-7">
20						<span class="icon-holder"><i class="c-pink-500 ti-palette"></i></span>
21						<span class="title">メニュー2</span>
22					</a>
23				</li>
24				
25				<li class="nav-item dropdown">
26					<a class="dropdown-toggle" href="javascript:void(0);" id="a1-9" data-u="#a1-8" data-d="#a1-9-1">
27						<span class="icon-holder"><i class="c-teal-500 ti-view-list-alt"></i></span>
28						<span class="title">メニュー3</span>
29						<span class="arrow"><i class="ti-angle-right"></i></span>
30					</a>
31					<ul class="dropdown-menu">
32						<li class="nav-item dropdown">
33							<a href="javascript:void(0);" id="a1-9-1" data-u="#a1-9" data-d="#a1-9-1-1">
34								<span>Menu Item</span>
35								<span class="arrow"><i class="ti-angle-right"></i></span>
36							</a>
37							<ul class="dropdown-menu">
38								<li> <a href="javascript:void(0);" id="a1-9-1-1" data-u="#a1-9-1" data-d="#a1-9-1-2">Menu Item</a></li>
39								<li> <a href="javascript:void(0);" id="a1-9-1-2" data-u="#a1-9-1-1" data-d="#a1-9-2">Menu Item</a></li>
40							</ul>
41						</li>
42						<li class="nav-item dropdown">
43							<a href="javascript:void(0);" id="a1-9-2" data-u="#a1-9-1-2" data-d="#a1-10">
44								<span>Menu Item</span>
45							</a>
46						</li>
47					</ul>
48				</li>
49        <li class="nav-item dropdown">
50					<a class="dropdown-toggle" href="javascript:void(0);" id="a1-10" data-d="#a1-10-1" data-u="#a1-9">
51						<span class="icon-holder"><i class="c-orange-500 ti-layout-list-thumb"></i></span>
52						<span class="title">メニュー4</span>
53						<span class="arrow"><i class="ti-angle-right"></i></span>
54					</a>
55					<ul class="dropdown-menu" style="display: none">
56						<li> <a class="sidebar-link" href="basic-table.html" id="a1-10-1" data-d="#a1-10-2" data-u="#a1-10">Basic Table</a></li>
57						<li> <a class="sidebar-link" href="datatable.html" id="a1-10-2" data-u="#a1-10-1">Data Table</a></li>
58					</ul>
59				</li>
60				<div class="ps__rail-x" style="left: 0px; bottom: -107px">
61					<div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px"></div>
62				</div>
63				<div class="ps__rail-y" style="top: 107px; right: 0px; height: 463px">
64					<div class="ps__thumb-y" tabindex="0" style="top: 87px; height: 376px"></div>
65				</div>
66			</ul>
67		</div>
68	</div>
69</body>
70

CSS
1.sidebar-menu > li a:focus{
2  outline:auto;
3}

Javascript
1document.addEventListener('keydown',e=>{
2  Object.entries({d:"Down",u:"Up",r:"Right",l:"Left"}).forEach(x=>{
3    if(e.code==`Arrow${x[1]}` && e.target.matches(`[data-${x[0]}`)){
4    document.querySelector(e.target.dataset[x[0]]).focus();
5    }
6  });
7});