"On Hover Menu Expand"
Bootstrap 4.1.1 Snippet by subhashy

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>On Hover Menu Expand</h1> <ul> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipisicing elit</li> <li>Laboriosam rem quisquam vel nulla</li> <li>Exercitationem eaque facilis quasi aliquam dolorem</li> </ul>
li{ text-overflow:ellipsis; width: 41px; white-space: nowrap; overflow: hidden; display: inline-block; margin-right: 15px; cursor: pointer; } li:hover{ text-overflow:clip; width:auto; white-space: normal; }

Related: See More


Questions / Comments: