HTML - Egy kis CSS segítségre lenne szükégem, hogyan tudnám ezt megvalósítani?

Létrehoztam az oldalamra egy menüt, és így oldottam meg hozzá a gombot:

Létrehoztam 3 "Span"-teget, és hozzá megírtam a CSS-t. így néz ki a lényeg:

HTML:

<div id="smbutt">

<span></span>

<span></span>

<span></span>

</div>

CSS:

#smbutt span:nth-child(1){

width:25%

}

#smbutt span:nth-child(2){

width:80%

}

#smbutt span:nth-child(3){

width:45%

}

|||

Akárhogy próbálom, nem bírom megcsinálni, hogy amikor az EGÉSZRE húzom rá az egeret, akkor mind a 3 csík 100%-ra nyúljon meg.. Hoverrel csak az adott csík (span) nyúlik meg..