Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS
Hi
I have HTML and CSS structure like this, in that i need to group the UL below LI(id=files) as single block, but its showing as sub menu. help me to solve this problem. thanks
 
CSS:
#dockRight
{
    margin: 0px;
    padding: 0px;
    list-style: none;
    position: fixed;
    top: 0px;
    height: 100%;
    z-index: 100;
    background-color: #f0f0f0;
    right: 0px;
}
#dockRight  li
{
    width: 40px;
    height: 120px;
    margin: 0 0 1px 0;
    background-color: red;
    background-repeat: no-repeat;
    background-position: left center;
}
#dockRight  li:hover ul
{
    display: block;
}
#dockRight  li ul
{
    position: absolute;
    top: 0px;
    left: -180px;
    z-index: -1;
    width: 180px;
    display: none;
    background-color: #F1F1F1;
    border: solid 1px #969696;
    padding: 0px;
    margin: 0px;
    list-style: none;
}
HTML:
<ul id="dockRight">
    <li id="files">
        <ul class="free">
            <li class="header"><a href="#" class="dock">Dock</a><a href="#" class="undock">Undock</a>Files</li>
            <li>
                <div>
                    <table>
                        <tr>
                            <td>
                                <ul>
                                    <li>List 1 inside table
                                        <div>
                                            <ul>
                                                <li>Final LI 1</li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>List 2 inside table
                                        <div>
                                            <ul>
                                                <li>Final LI 2</li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>
            </li>
        </ul>
    </li>
</ul>
Posted 18-Jul-12 1:55am
Comments
Sandeep Mewara at 18-Jul-12 14:32pm
   
Not clear.
Tadit Dash at 18-Jul-12 18:10pm
   
Tell us what exactly you want to do ?
You can give us a link for any image, which can show your requirement ....
That would be great.
Ashishbhatt007 at 9-May-14 6:33am
   
Please clear your question.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 DamithSL 285
1 Zoltán Zörgő 170
2 OriginalGriff 140
3 Sergey Alexandrovich Kryukov 120
4 Maciej Los 115
0 OriginalGriff 7,740
1 DamithSL 5,769
2 Sergey Alexandrovich Kryukov 5,424
3 Maciej Los 5,076
4 Kornfeld Eliyahu Peter 4,539


Advertise | Privacy | Mobile
Web02 | 2.8.141223.1 | Last Updated 18 Jul 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100