How can I show current submenu items at bottom of page?

Question

I have a menu at the top of the page. On the bottom below the article I want to show the submenu items that are children or siblings of the active menu item (the item that I clicked on to get to the page in question).

That is, if I clicked on "Submenu item A" I want to see "Submenu item A" and "Submenu item B" in the bottom menu.

I want to do this using php or css, but not using javascript.

I don't want this to happen "on the fly" when hovering or something. I just want to show the childs and siblings of current item when that item has been clicked and I'm already on the target page to aid the user in navigating through the whole category.

---

Snippet showing what I want it to look like when "Menu item 1" or any of its submenu items are opened.

<ul>
  <li>
    Menu item 1
    <ul>
      <li>
        <a href='item-1/item-a'>
          Submenu item A
        </a>
      </li>
      <li>
        <a href='item-1/item-b'>
          Submenu item B
        </a>
      </li>
    </ul>
  <li>
    <a href='item-2'>
      Menu item 2
    </a>
  <li>
</ul>
  
<article>Page contents</article>
  
<ul>
  <li>
    <a href='item-1/item-a'>
      Submenu item A
    </a>
  </li>
  <li>
    <a href='item-1/item-b'>
      Submenu item B
    </a>
  </li>
<ul>

Answer 1

Wrap the bottom ul with this code in php.

This script check if the path contains item-1, if so, he shows the ul otherwise it didn't.

<?php
$url = $_SERVER['REQUEST_URI'];
$url_parts = parse_url($url);
if (strpos($url_parts["path"], 'item1') !== false) {
?>
<ul>
  <li>
    <a href='item-1/item-a'>
      Submenu item A
    </a>
  </li>
  <li>
    <a href='item-1/item-b'>
      Submenu item B
    </a>
  </li>
<ul>
<?php } ?>

Answer 2

This can't be done with CSS alone. For it to work with PHP and no Javascript it will only change on page load.