我正在做一个Wordpress网站的作业，我碰到了一个树桩。无论我做什么，我都无法展开我的菜单。我可以使用一个额外的插件，但我更愿意用CSS解决这个问题。我非常非常抱歉，但我不知道如何更好地显示标题代码，而不链接网站(我不能这样做，因为这将需要离开它的托管服务开放，增加托管费用)。请，如果你知道任何其他更好的方式来显示代码，让我知道。注:我删除了一些CSS的部分，所以它更适合这里。
<header role="banner">
<a class="screen-reader-text skip-link" href="#tp_content">Skip to content</a>
<div class="top-header py-2">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-6 align-self-center">
<span><i class="fas fa-phone mr-2"></i></span>
<span class="ml-3"><i class="far fa-envelope mr-2"></i></span>
</div>
<div class="col-lg-3 col-md-4 col-8 align-self-center">
<div class="media-links text-md-right">
</div>
</div>
<div class="col-lg-1 col-md-2 col-4 align-self-center">
</div>
</div>
</div>
</div>
<div class="headerbox py-3">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-9 align-self-center">
<div class="logo logo-same-line mb-md-0">
<div class="row">
<div class="col-lg-5 col-md-5 align-self-md-center">
<a href="" class="custom-logo-link" rel="home" title=""><span class="customize-partial-edit-shortcut customize-partial-edit-shortcut-custom_logo"><button class="customize-partial-edit-shortcut-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"></svg></button></span><img width="142" height="142" src="/wp-content/uploads/2022/04/cut.png" class="custom-logo" alt="logo" srcset="/wp-content/uploads/2022/04/cut.png 142w, /wp-content/uploads/2022/04/cut-100x100.png 100w" sizes="(max-width: 142px) 100vw, 142px"></a> </div>
<div class="col-lg-7 col-md-7 align-self-md-center">
<h1><a href="" rel="home">Hospital</a></h1>
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-md-2 col-3 align-self-center">
<div class="menubar">
<div class="container right_menu">
<div class="innermenubox">
<div class="toggle-nav mobile-menu">
<button onclick="online_pharmacy_menu_open_nav()" class="responsivetoggle"><i class="fas fa-bars"></i><span class="screen-reader-text">Open Button</span></button>
</div>
<div id="mySidenav" class="nav sidenav">
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Top Menu">
<li id="menu-item-43" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-43">O nama</li>
<li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-59">Finansiranje</li>
<ul class="sub-menu">
<li id="menu-item-149" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-146 current_page_item menu-item-149"></li>
<li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-162"></li>
<li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"></li>
<li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-160"></li>
</ul>
</li>
<li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-58">Glasanje
<ul class="sub-menu">
<li id="menu-item-234" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-234">O usluzi glasanja</li>
<li id="menu-item-240" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-240">Aktuelne teme</li>
<li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-239">Prethodne teme</li>
</ul>
</li>
<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-57">Diskusije
<ul class="sub-menu">
<li id="menu-item-301" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-301">O ovoj usluzi</li>
<li id="menu-item-302" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-302">Diskusije</li>
</ul>
</li>
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56">Sensing</li>
<li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-155">Nalog
<ul class="sub-menu">
<li id="menu-item-177" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-177">Moj Profil</li>
<li id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141">Izloguj se</li>
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156">Lista Korisnika</li>
</ul>
</li>
</ul></div> <a href="javascript:void(0)" class="closebtn mobile-menu" onclick="online_pharmacy_menu_close_nav()"><i class="fas fa-times"></i><span class="screen-reader-text">Close Button</span></a>
</nav>
</div>
</div>
</div>
</div> </div>
<div class="col-lg-3 col-md-4 align-self-center">
<div class="header-search my-3 my-md-0">
<form method="get" class="search-form" target="_self"><input type="hidden" name="customize_messenger_channel" value="preview-6"><input type="hidden" name="customize_autosaved" value="on"><input type="hidden" name="customize_changeset_uuid" value="5173cce9-25cb-455f-92af-dac86e4c5279">
<input type="search" id="search-form-6282189ec75dc" class="search-field" placeholder="Search …" value="" name="s">
<button type="submit" class="search-submit">Search</button>
</form> </div>
</div>
<div class="col-lg-2 col-md-3 align-self-center">
<div class="book-tkt-btn my-4 my-md-0 text-center">
</div>
</div>
</div>
</div>
</div></header>这是当前菜单的图片:https://i.stack.imgur.com/YAh6E.png
这里是我想要实现的(大约，我只是想要所有菜单项在一行，如问题标题所述):https://i.stack.imgur.com/0SKTR.png
提前感谢您，并再次为笨拙的代码片段道歉…
欢迎来到stackoverflow。一个想法是使用Bootstrap来实现导航栏的适当布局。一些例子可以在下面的导航条引导中找到。下一步是按照需要的方式构建导航栏。我的意思是，改变文字的颜色或大小等等。这只是另一个想法。