css3动画同时出现在两个项目上

Question

I have a wrapper div that is absolute positioned on the side of my page. It contains an unordered list of items. HTML:

<div id="wrapper">
    <ul class="menu">
        <li>item 1</li>
        <li>item 2</li>
    </ul>
</div>

Wrapper CSS:

#wrapper {  
    /*width: 218px;*/
    margin: 0px auto;
    background-color: #cccccc;
    overflow:hidden;
    position: absolute;
    top:  100px;
    left: 0;
    z-index: 999;
    width: 31px;
}

The reduced width of the wrapper is 31px; The full size is 218px; On each of the list items I have set:

.menu > li{
    width: 31px;
    overflow: hidden;
    -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
    transition: width 1s;
}
.menu > li:hover{
    width:218px;
}

So that when I hover that <li> it reveals all of its content. Obviously it works when wrapper's width is 218px but this way it will go over the page and "hide" some elements on it. I have set the same transition also on the wrapper on hover and it works. Is there another way to do it in a more robust way? This seems to me more an hack than a proper way to do it!

Answer 1

You could set overflow on the #wrapper to visible instead of hidden. That way, when the li expands when you hover over it, you will be able to see its content - without increasing the size of the wrapper itself.

Answer 2

I think it is better to use chrome browser.It has a feature that very useful to web developers.

First of all

Open your web page in chrome.

Right click (the portion that you want to make changes) and select Inspect element[Ctrl+Shift+i] in windows platform.

Then u can see like this..

1 I mentioned here is code section and 2 is css section.

The selected part is highligted in main screen (left side , in my case)

You can find and select the hidden div.

Then make necessary changes to css section that suits your web page and you can see the changes at the real time.

[ !! Please note that this is only for checking and viewing ,so if u make necessary changes,Please copy the edited code and paste it to your original source code also create a backup of your source code before make any changes ]

Regds..sir