Why can't an (with absolute position) ins

问题:

EDIT: see also my own answer below (2016)

---

For example:

<ul>
    <li class="first"><a href="#" title="">Home</a></li>
    <li><a href="#" title="">Chi siamo</a>
       <ul><li><a href="#" title="">item1</a></li><li><a href="#" title="">item2</a></li></ul>
    </li>
    <li><a href="#" title="">Novità</a></li>
    <li><a href="#" title="">Promozioni</a></li>
</ul>

Then styled:

/* level 1 Main menu ----------------------------------------- */

#main-menu > ul{ list-style:none; }

#main-menu > ul > li{
    float:left;
    display:block;
    position:relative;
    margin-left:1em;
}

#main-menu > ul > li.first{
    margin-left:0;
}


/* sub Main menu ----------------------------------------- */

#main-menu > ul > li ul {
    position: absolute;
    z-index:1000;
    display:none;
    left:0;
    top:28px;
}

#main-menu > ul > li:hover ul {
    display:inline-block;
}

#main-menu > ul > li ul li{
    float:left;
    display:block;
    list-style:none;
}

ok. So, I've got the main menu that shows up horizontal. I also want the submenu to show horizontal. But for some reason, the ul box do not resize to reach the total li tags width, so it remains vertical. The parent ul do not suffer of this problem. I could make it work by simply adding a proper width to the child ul, but this is not the way I wanna use.

Any idea?

回答1:

It's important to have the :hover twice if you use position absolute; 1st on the li, that triggers the display: block, then on the ul that is shown on trigger.
And then keep positioning and styling separate: I styled the a and not the li

See here: http://jsfiddle.net/HerrSerker/T8x2r/2/

#main-menu > ul > li > ul:hover,
#main-menu > ul > li:hover > ul {
    display: block;
}

---

Should work with float:left also http://jsfiddle.net/T8x2r/3/

回答2:

Elements with position: absolute take up the size of their children.

You can either set width: 100%; on the ul, or set left: 0; right: 0; which will also stretch it to the right size.

Also you might want to set list-style:none; on the nested ULs as well as top one.

回答3:

To the person who suggested you use ids and classes, it is not necessary except for perhaps the very first ul being id'ed as "menu". I say this because what you're looking for is very rigid and structured.

This is what I understand you're trying to accomplish: Get a horizontal main menu that shows another horizontal sub-menu underneath when hovering over the main menu "links"

As shown here:

----------------------------------------------------------------------
Menu-Item 1    |    Menu Item 2 (hovered over)    |    Menu Item 3    
----------------------------------------------------------------------
               |    Sub Menu 1    |    Sub Menu 2    |    Sub Menu 3
               -------------------------------------------------------

Now I'm no one to tell you how to design your menus. But as you can see right now, I'm not sure even how it should work. Should the second menu be left-aligned to the left most point of the main menu item it's hovered over? Or Should the second menu be left-aligned to the whole menu, all the way to the left?

If it's the first, the last menu item will have too small a space to have links under (one or two max) and if it's the second version, then people will get frustrated that they keep "losing" the sub-menu when trying to access the links all the way to the left when hovering over the last menu item (in our example: Menu Item 3). Trust me, most users are not that adept with the mouse and trust me, the first version would just look bad.

Thus people use vertical sub-menus when the main menu is horizontal, but again, I'm not going to question your motives. I'm gonna try to answer your question in the best way I can which will end up being the second way, set up as such:

----------------------------------------------------------------------
Menu-Item 1    |    Menu Item 2 (hovered over)    |    Menu Item 3    
----------------------------------------------------------------------
Sub Menu 1    |    Sub Menu 2    |    Sub Menu 3    |      (blank)    
----------------------------------------------------------------------

Firstly, your code is not even set-up to have it go this way. The way your code is currently written, it'll end up like the first example I showed you (which as I explained will have very little horizontal space for the last menu item to show things, if your menu takes up the width of your page of course)

So to accomplish this goal you will have to get rid of the relative positioning of your li. Another idea if you MUST for some reason have it set to relative is to set each li of your main menu to a different z-index and to set them left margin/padding as well as right margin/padding as to "fit" your entire menu. I find this to be a "hack" and would rather omit the relative positioning of your li.

The absolute ul nested underneath your relative object (whatever it be, in this case it is the menu

) can only take up as much space as you've designated. In this case 100% will only be the size of the li it is nested under. You could set it to something greater than 100%, such as 500px, but this would cause a problem for two reasons: 1) You will not be able to set all sub-menus to the absolute menu left as you probably want it to, becuase the absolute left of the nested element will only be the left most point of the li it is nested under. and 2) This is not good because the right most menu's sub-items will drift off to the right of the overall menu.

If you must keep the main menu positioned relative, you will have to individually set the left position of each nested ul manually. And for all but the first one this will be a negative number and will not be an exact science as all browsers do not display the same font (and thus will cause slight changes in the width of the menu items, to counter this you'll need to use images for perfect width across all browsers of all ages). But this distracts from the beauty of CSS which is using few lines to design multiple elements.

It would be much easier to remove the "relative" positioning off the main menu li (#main-menu > ul > li) and to add some bottom padding to it, else you'll never be able to hover over the sub-menu, it'll just disappear each time. If I had to guess at what you're doing and I was coding the CSS/HTML I would do it as such:

HTML:

  <li>A
    <ul>
      <li>A1<li>
      <li>A2<li>
      <li>A3<li>
    </ul>
  </li>

  <li>B
    <ul>
      <li>B1<li>
      <li>B2<li>
      <li>B3<li>
    </ul>
  </li>

  <li>C
    <ul>
      <li>C1<li>
      <li>C2<li>
      <li>C3<li>
    </ul>
  </li>

</ul>

CSS:

ul#main-menu{ list-style:none;}

ul#main-menu > li {
  float: left;
  margin-left: 1em;
  padding-bottom: 3em; /*make this the line-height space underneat the main menu, plus the heigh of the secondary menu, plus the extra space you wanna give the user to not lose focus on the second menu*/
} 
ul#main-menu > li:first-child {margin-left: 0;}

ul#main-menu > li > ul {
  display: none;
}
ul#main-menu > li:hover > ul {
  position: absolute;
  display: block;
  left: 0;
  list-style: none;
}

ul#main-menu > li:hover > ul > li,
ul#main-menu > li > ul:hover > li {
  position: relative;
  float: left;
  margin-left: 1em;
} 
ul#main-menu > li:hover > ul > li:first-child,
ul#main-menu > li > ul:hover > li:first-child {margin-left: 0px}

I've tested this on my own browser and it seems to work like you want it to. By now you should know two other ways to accomplish this, but with varying results and more work than this version.

回答4:

Well, if you are sure that items always will be in one line, you can move "position: relative;" to parent ul, and remove "left: 0;" from second ul, it will do what you want, but if there will be to many items in the end of the line, they will be cropped.

Example: http://jsfiddle.net/ed9Wx/

回答5:

Since you stated this in your code #main-menu > ul > li:hover ul { display:inline-block; } it'd be best you make the display: block; margin: auto; that way it could go full width of the li tag

#main-menu > ul > li:hover ul {
display:block; }

#main-menu > ul > li ul li{
float:left;
margin: auto; 
list-style:none;}

This should do the trick.

回答6:

There's one stupid thing: on the submenus, you can force the sumbenus to the inner items width by simply forcing whitespace: no-wrap on the inner items. It works despite any technique or layout you are using -- main LI items with display: inline-block, or modern flex layouts // and for the subs, regular display none/block or modern css3 fx solutions -- it doesn't matter. A raw example can be just this, in this case using flexbox and fadein/out fx for subs (but could be anything more simple no-flexbox or older, it really doesn't matter):

.main-menu{ // ul
  display: flex;
  flex-wrap: nowrap;

  > li{
    display: inline-block;
    flex: 1;
    position: relative;

    &:hover{
      .sub-menu{
        visibility: visible;
        opacity: 1;
        transition: opacity 200ms linear;
      }
    }

    .sub-menu{
      display: inline-block;
      position: absolute;
      top: 50px;
      left:0;

      visibility: hidden;
      opacity: 0;
      transition: visibility 0s 200ms, opacity 200ms linear;

      li{
        a{
          white-space: nowrap; // <<< THIS IS THE KEY!
        }
      }
    } // sub-menu

  } // > li
}