Jump to content

list-based drop down menu


davcha
 Share

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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...