Show complete long text lines of tree (nested HTML

I have an angular 4 app with a div on the left where I show a tree of items as recursive HTML lists. Long texts should be expanded over the border of the div and put in a shadowed box when the user moves the mouse over it like windows explorer does it. See the following screenshots.

Without mouse over:

With mouse over:

The long text is in a div on the left side of the page and is cut by the right div border. At the border you see a scroll bar. When I move the mouse over the long text I want the text to be desplayed beyond the border of the div so that it's whole content can be read.

I have a solution where the whole enclosing List-Element is raised, so it needs to be improved:

.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: 20px 0;
  border-right: 1px solid #eee;
}

.sidebar li {
  overflow-x: hidden;
  background: white;
}

.sidebar li:hover {
  list-style-type: none;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  overflow: visible;
  border: 1px solid #cacaca;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-4 col-md-3 d-none d-sm-block sidebar">
      <div>
        <ul>
          <li>
            <span>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</span>
          </li>
          <li>
            <span>oooooooooooooooooooooooooooooooooooo</span>
            <ul>
              <li>
                <span>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</span>
              </li>
            </ul>
        </ul>
      </div>

    </nav>

    <main role="main" class="col-sm-8 ml-sm-auto col-md-9 pt-3">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </main>
  </div>
</div>

Found a solution by changing the HTML structure. Now I have inside of , but it works.

.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: 20px 0;
  border-right: 1px solid #eee;
}

.sidebar li {
  overflow-x: hidden;
  background: white;
}

.sidebar li:hover {
  list-style-type: none;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  overflow: visible;
  border: 1px solid #cacaca;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-4 col-md-3 d-none d-sm-block sidebar">
      <div>
        <ul>
          <li>
            <span>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</span>
          </li>
          <li>
            <span>oooooooooooooooooooooooooooooooooooo</span>
          </li>
          <ul>
            <li>
              <span>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</span>
            </li>
          </ul>
        </ul>
      </div>

    </nav>

    <main role="main" class="col-sm-8 ml-sm-auto col-md-9 pt-3">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </main>
  </div>
</div>