Dropdown in vertical menu with bootstrap 4

Question

I need to make a vertical menu following this layout but I’m having difficulties to make the menu open one dropdown I’m using bootstrap 4 follows my code + the layout image of how it should look.

HTML:

<div class="left">
        <div class="item active">
          <i class="fas material-icons">keyboard</i>
          <a href="#">teste</a>
          <ul class="list-unstyled drop">
            <li><a href="#">asdfasdfad</a></li>
          </ul>
        </div>
        <div class="item">
          <i class="fas material-icons">keyboard</i>
          <a href="#">teste</a>
        </div>
        <div class="item">
            <i class="fas material-icons">keyboard</i>
            <a href="#">teste</a>
        </div>
        <div class="item">
          <i class="fas material-icons">keyboard</i>
          <a href="#">teste</a>
        </div>
    </div>

SCSS:

.left {
    position: fixed;
    top: 50%;
    left: 15px;
    background: #337ab7;
    display: inline-block;
    white-space: nowrap;
    width: 50px;
    transition: width .5s;
}

.item:hover {
    background-color: #222;
    width: 250px;
}

.left .fas {
    margin: 15px;
    width: 20px;
    color: #fff;
}

i.fas {
    font-size: 17px;
    vertical-align: middle !important;
}

.item {
    height: 50px;
    overflow: hidden;
    a{
        color: #fff;
    }

    .drop{
        li{
            a{
                display: none;
            }
        }
    }
}

.item{
    a{
        &:hover{
            .drop{
                li{
                    a{
                        display: block;
                    }
                }
            }
        }
    }
}

Answer 1

To make the drop you can use position:absolute, so you take this submenu of flow and it does not interfere with the other elements around.

Follow the image code above:

.left {
    position: fixed;
    top: 50%;
    left: 15px;
    background: #337ab7;
    display: inline-block;
    white-space: nowrap;
    width: 50px;
    transition: width 0.5s;
}

.item:hover {
    background-color: #222;
    width: 250px;
}

.left .fas {
    margin: 15px;
    width: 20px;
    color: #fff;
}

i.fas {
    font-size: 17px;
    vertical-align: middle !important;
}

.item {
    height: 50px;
    /* overflow: hidden; */
}

.item a {
    color: #fff;
}

.item .drop li a {
    /* display: none; */
}

.item a:hover .drop li a {
    display: block;
}

.item a:hover .drop li a {
    display: block;
}

.item {
    position: relative;
}

.item > a {
    display: none;
}

.item:hover > a {
    display: initial;
}

.drop {
    margin-left: 50px;
    position: absolute;
    background: black;
    display: none;
    z-index: 2;
}

.item:hover .drop {
    display: block;
    width: calc(100% - 50px);
    padding-inline-start: 0;
    list-style: none;
}

<div class="left">
    <div class="item active">
        <i class="fas material-icons">keyboard</i>
        <a href="#">teste</a>
        <ul class="list-unstyled drop">
            <li><a href="#">asdfasdfad</a></li>
            <li><a href="#">asdfasdfad</a></li>
            <li><a href="#">asdfasdfad</a></li>
            <li><a href="#">asdfasdfad</a></li>
        </ul>
    </div>
    <div class="item">
        <i class="fas material-icons">keyboard</i>
        <a href="#">teste</a>
    </div>
    <div class="item">
        <i class="fas material-icons">keyboard</i>
        <a href="#">teste</a>
    </div>
    <div class="item">
        <i class="fas material-icons">keyboard</i>
        <a href="#">teste</a>
        <ul class="list-unstyled drop">
            <li><a href="#">asdfasdfad</a></li>
            <li><a href="#">asdfasdfad</a></li>
            <li><a href="#">asdfasdfad</a></li>
            <li><a href="#">asdfasdfad</a></li>
        </ul>
    </div>
</div>