展开子菜单项以适合页眉（首先向右然后向左） [英] Expand submenu item to fit header (first right then left)

问题描述

我有以下结构：

 < div class =wrap> 
< div class =menu> 
< div class =item> 
 Menu 
< div class =submenu> 
< div class =submenuitem>子菜单< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

到目前为止以下CSS：

  div.wrap {
 background：#eee; 
 height：80px; 
} 
 
 div.menu {
 margin-left：50px; 
 background：＃36e; 
} 
 
 div.item {
 background：＃d00; 
 color：#fff; 
 line-height：40px; 
 padding：0px 20px; 
 font-size：16px; 
 display：inline-block; 
 margin-left：50px; 
} 
 
 div.item：hover {
 background：＃b00; 
} 
 
 div.submenu {
 display：none; 
 background：＃0b0; 
 height：40px; 
 position：absolute; 
 right：0％; 
 top：50％; 
 min-width：300px; 
} 
 
 div.item：hover div.submenu {
 display：inline-block; 
} 
 
 div.submenuitem {
 line-height：40px; 
 padding：0px 20px; 
 background：＃b00; 
 color：#fff; 
 display：inline-block; 
} 
  

JSFiddle

我的行为是子菜单的宽度扩展以适合其文本内容，但它最多可以使用 wrap 的宽度进行展开。它也应该直接放置在 item 下，除非 submenuitem 的宽度将大于从其原始位置到 wrap 的右端。然后它应该向左扩展，直到它遇到 wrap 的左边缘。

正如你可以看到，成功通过设置<$ c>可以知道从子菜单的原始位置到 wrap $ c> right：0％; min-width：300px; 在子菜单，但我想这样做，不需要知道距离。 >



我一直在试图在过去几天里制作或找到一个解决方案，并没有设法得到更近。使用纯CSS也是可能的。

解决方案

这是你想要的吗？请检查一下，让我知道。

http：/ /jsfiddle.net/zmcEC/9/

  div.wrap {
 width：400px; 
 background：#eee; 
 position：relative; 
 height：80px; 
} 
 
 div.submenu {
 display：none; 
 background：＃0b0; 
 height：40px; 
 position：absolute; 
 right：0; 
 top：40px; 
 left：0; 
} 
  

I have the following structure:

<div class="wrap">
    <div class="menu">
        <div class="item">
            Menu
            <div class="submenu">
                <div class="submenuitem">Submenu</div>
            </div>
        </div>
    </div>
</div>

and so far the following CSS:

div.wrap {
    background: #eee;
    height: 80px;
}

div.menu {
    margin-left: 50px;
    background: #36e;
}

div.item {
    background: #d00;
    color: #fff;
    line-height: 40px;
    padding: 0px 20px;
    font-size: 16px;
    display: inline-block;
    margin-left: 50px;
}

div.item:hover {
    background: #b00;
}

div.submenu {
    display: none;
    background: #0b0;
    height: 40px;
    position: absolute;
    right: 0%;
    top: 50%;
    min-width: 300px;
}

div.item:hover div.submenu {
    display: inline-block;
}

div.submenuitem {
    line-height: 40px;
    padding: 0px 20px;
    background: #b00;
    color: #fff;
    display: inline-block;
}

JSFiddle

The behaviour I'm after is that the width of submenuitem expands to fit its textual content, but that it can use at most the width of wrap for expanding. It should also be positioned directly under item unless the width of submenuitem will be larger than the distance from its original position to the right end of wrap. Thereafter it should expand to the left until it meets the left edge of wrap.

As you can see this succeeds perfectly when I can know the distance from submenuitem's original position to the right end of wrap by setting right: 0%; min-width: 300px; on submenuitem, but I want to do this in a way that doesn't require knowing that distance.

I have been trying to craft or find a solution to this for the past few days and have not managed to get any closer. Is it even possible with pure CSS to begin with?

解决方案

Is this something you want? check this one nd let me know.

http://jsfiddle.net/zmcEC/9/

div.wrap {
    width: 400px;
    background: #eee;
    position: relative;
    height: 80px;
}

div.submenu {
    display: none;
    background: #0b0;
    height: 40px;
    position: absolute;
    right: 0;
    top: 40px;
    left:0;
}

这篇关于展开子菜单项以适合页眉（首先向右然后向左）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！