I am facing a styling challenge with a wrapper div that is positioned absolutely on the side of the page. Inside this wrapper, there is an unordered list of items. Here is the HTML structure:
<div id="wrapper">
<ul class="menu">
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
Below is the CSS code for the wrapper:
#wrapper {
/*width: 218px;*/
margin: 0px auto;
background-color: #cccccc;
overflow:hidden;
position: absolute;
top: 100px;
left: 0;
z-index: 999;
width: 31px;
}
The wrapper's reduced width is 31px, while its full size is 218px. I have also defined specific widths for each list item as follows:
.menu > li{
width: 31px;
overflow: hidden;
-webkit-transition: width 1s;
transition: width 1s;
}
.menu > li:hover{
width:218px;
}
Currently, when hovering over an <li>, it expands to reveal all content. However, this method causes some elements on the page to be hidden due to the wider width. Although I have applied a transition effect on both the <li> and the wrapper upon hover, I feel this solution is more like a hack than a proper implementation. Can you suggest a more robust approach to achieve the same result?