Jump to content

list-based drop down menu


Recommended Posts

Im currently working on a list-based drop menu.Ultimately, it should look like something like this :menu.jpgRight now, i have an issue with the width of the list-items :menub.jpgAs you can see, the width of list-item "Affichage/sous menu 2/sous menu 1" is smaller than the width of list-item "Affichage/sous menu 2/sous menu 2 vraiment long", whereas the width of "Affichage/sous menu 2/sous menu 1 (and 3)" should be equal to the width of "Affichage/sous menu 2/sous menu 2 vraiment long".The main consequence of this problem can be seen here :menua.jpgWhen a smaller list-item has a child-menu, this child-menu appears at the right of the list-item rather than at the right of the unordered list.Here is my xhtml code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EV" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head>    <link rel="stylesheet" type="text/css" href="menubar.css"/></head><body><div class="menubar">    <ul>        <li>Fichier            <div>                <ul>                    <li>sous menu 1</li>                    <li>sous menu 2 vraiment long</li>                    <li>sous menu 3</li>                </ul>            </div>        </li>        <li>            Edition            <div>                <ul>                    <li>sous menu 1</li>                    <li>                        sous menu 2                        <div>                            <ul>                                <li>sous menu 1</li>                                <li>                                    sous menu 2 vraiment long                                    <div>                                        <ul>                                            <li>sous menu 1</li>                                            <li>sous menu 2 vraiment long</li>                                            <li>sous menu 3</li>                                        </ul>                                    </div>                                </li>                                <li>                                    sous menu 3                                    <div>                                        <ul>                                            <li>sous menu 1</li>                                            <li>sous menu 2 vraiment long</li>                                            <li>sous menu 3</li>                                        </ul>                                    </div>                                </li>                            </ul>                        </div>                    </li>                    <li>sous menu 3</li>                </ul>            </div>        </li>        <li>            Affichage            <div>                <ul>                    <li>sous menu 1</li>                    <li>                        sous menu 2                        <div>                            <ul>                                <li>sous menu 1</li>                                <li>                                    sous menu 2 vraiment long                                    <div>                                        <ul>                                            <li>sous menu 1</li>                                            <li>sous menu 2 vraiment long</li>                                            <li>sous menu 3</li>                                        </ul>                                    </div>                                </li>                                <li>                                    sous menu 3                                    <div>                                        <ul>                                            <li>sous menu 1</li>                                            <li>sous menu 2 vraiment long</li>                                            <li>sous menu 3</li>                                        </ul>                                    </div>                                </li>                            </ul>                        </div>                    </li>                    <li>sous menu 3</li>                </ul>            </div>        </li>        <li>Outils</li>    </ul></div></body></html>

And my css :

div.menubar > ul > li {    display: inline;    position: relative;}div.menubar div {    position: absolute;    display: none;}div.menubar li:hover > div {    display: block;}div.menubar div > ul > li:hover > div {    display: inline;}/* appearance */div.menubar ul {    list-style: none;    padding: 0;    margin: 0;    border: 2px solid #f00;    position: relative;}div.menubar li {    border: 1px solid #00f;}

Is there any solution that doesnt require to set a fixed width to list-items (because in this case, the list-items dont scale with the content) ?

Link to post
Share on other sites
http://www.seoconsultants.com/css/menus/horizontal/It has the desired effect. I believe it does use IE hacks, though. It's been awhile since I've actual looked at the code, so there may be more efficient/easier ways to do it.~Aphotic

Unfortunately, i had already checked this tutorial, as well as many other tutorials, and it uses a fixed width on <ul> elements.I suppose i have no choice, in fact :/
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...