Jump to content

davcha

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

davcha's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. davcha
    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 :/
  2. davcha
    Im currently working on a list-based drop menu.Ultimately, it should look like something like this :Right now, i have an issue with the width of the list-items :As 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 :When 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) ?
×
×
  • Create New...