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：兆豐菜單 - 絕對的身高問題

回答

相關問題