CSS：兆丰菜单 - 绝对的身高问题

的jsfiddle：https://jsfiddle.net/ms6g9c61/1 CSS：兆丰菜单 - 绝对的身高问题

正如你所看到的，在主菜单不胜枚举只有2行深。我需要它的高度（视觉上你可以看到蓝色边框）根据打开的子菜单进行相应的调整。每个子菜单都不一样高。

任何想法如何做到这一点？我真的不想使用JS。

我在想也许改变标记，所以而不是列表，我们可以改变它是像表一样工作的divs？我不知道这是否因绝对定位而起作用。 1标准高度也不起作用，它必须能够用差异进行调整。子菜单。

下面是HTML：

body { 
 
    margin: 15px; 
 
} 
 

 
.into { 
 
    margin: 10px 0; 
 
} 
 

 
.menuList { 
 
    list-style: none; 
 
    position: relative; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.menuList > li { 
 
    background: white; 
 
    border-right: 1px solid blue; 
 
    width: 150px; 
 
} 
 

 
.subMenu { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 161px; 
 
    background: pink; 
 
    width: 400px; 
 
} 
 

 
.submenuList { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
} 
 

 
.menuList > li:hover > .subMenu { 
 
    display: block; 
 
}

<p class="intro"> 
 
flyout menu w/ adjusting height<br/> 
 
left menu must adjust in height to match submenu that appears to the right. 
 
</p> 
 

 
<ul class="menuList"> 
 
    <li> 
 
    <a href="#">Category 1</a> 
 
    <div class="subMenu"> 
 
     <ul class="submenuList"> 
 
     <li><a href="#">Link 1</a></li> 
 
     <li><a href="#">Link 1</a></li> 
 
     <li><a href="#">Link 1</a></li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <a href="#">Category 2</a> 
 
    <div class="subMenu"> 
 
     <ul class="submenuList"> 
 
     <li><a href="#">Link 2</a></li> 
 
     <li><a href="#">Link 2</a></li> 
 
     <li><a href="#">Link 2</a></li> 
 
     <li><a href="#">Link 2</a></li> 
 
     <li><a href="#">Link 2</a></li> 
 
     <li><a href="#">Link 2</a></li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
</ul>

来源

2017-07-14 rebel84

我能问你为什么要这样？保持边界只是视觉吸引力，还是由于高度而导致某些功能/ UI被破坏？我的建议是将边框添加到子菜单本身，并将其拉到左侧1像素，因此您不会看到当前存在的双边框。 – maxinacube

它只是为了视觉吸引力。菜单列表将具有白色背景。随着子菜单的增长，它也将具有白色背景。由于子菜单的长度会比菜单列表长，所以它会在网站上放置2个白色块，而不是看起来像1个包含全部的框。 – rebel84

只使用位置：相对你的元素。上面的MenuBox现在用子项目调整大小。

我拨弄了一下你：

CSS

body { 
    margin: 15px; 
} 

.into { 
    margin: 0; 
} 

.menuList { 
    list-style: none; 
    position: relative; 
    padding: 0; 
    margin: 0; 
} 

.menuList > li { 
    background: white; 
    border-right: 1px solid blue; 
    width: 150px; 
} 

.subMenu { 
    display: none; 
    top: 0; 
    left: 151px; 
    background: pink; 
    width: 400px; 

} 

.submenuList { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

.menuList > li:hover > .subMenu { 
    display: block; 
    position: relative; 
} 

.menuBox { 
    position: relative; 
}

HTML

<p class="intro"> 
flyout menu w/ adjusting height<br/> 
left menu must adjust in height to match submenu that appears to the right. 
</p> 

<div class="menuBox"> 
<ul class="menuList"> 
    <li> 
    <a href="#">Category 1</a> 
    <div class="subMenu"> 
     <ul class="submenuList"> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 1</a></li> 
     </ul> 
    </div> 
    </li> 
    <li> 
    <a href="#">Category 2</a> 
    <div class="subMenu"> 
     <ul class="submenuList"> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 2</a></li> 
     </ul> 
    </div> 
    </li> 
</ul> 
</div>

来源

2017-07-14 18:46:37 HarryJR

CSS：兆丰菜单 - 绝对的身高问题

回答

相关问题