Hovering over hamburger menu made of <hr> tags- want to change color of all 3 <hr>'s, but only one changes

My larger question is- what's the best way to approach changing the color of a mobile hamburger menu 'icon' on hover? I can think of a few ways, but I don't know what's considered best practice.

My specific question, is that I've made a mobile hamburger menu out of <hr> tags...

<li class="menu-burger"><hr></hr><hr></hr><hr></hr></li>

.menu-burger hr {
    width: 16px;
    margin: 4px 0px;
    border: 1px solid #ffffff;
}

It seemed like a good way to get a nice, crisp icon- and it should theoretically be easy to manipulate.

However, when I apply hover to it, of course, only one <hr> triggers at a time...

.menu-burger hr:hover {
    width: 16px;
    margin: 4px 0px;
    border: 1px solid #F15742;
}

Any thoughts on how to deal with this? I've tried targeting just .menu-burger:hover, but then I can't get the inner <hr>'s to do anything, of course.

I've thought of making a whole other hamburger menu icon that I display/hide... but is that seems like perhaps too much code for the task. Or maybe not!

My initial approach was to use a PNG, then I was going to show/hide the PNG depending on whether you're hovering or not... but that seemed maybe a bit hacky.

What's the best practice here? Or, how can I get all three <hr> tags to change on hover?