彈出菜單的高度與主菜單相同

Question

我在設計彈出式菜單，並希望使子菜單的高度與主菜單的高度相同。

這裏是HTML代碼菜單，我在

<ul id="nav"> 
    <li class="button"><a>Sub menu title 1</a> 
     <ul> 
      <li><a>Link1</a></li> 
      <li><a>Submenu2</a></li> 
     </ul> 
    </li> 
    <li class="button"><a>Sub menu title 2</a> 
     <ul> 
      <li><a>Link4</a></li> 
      <li><a>Submenu5</a></li> 
     </ul> 
    </li> 
    <li class="button"><a>Sub menu title 3</a> 
     <ul> 
      <li><a>Link</a></li> 
      <li><a>Submenu</a></li> 
     </ul> 
    </li> 
</ul> 

工作和CSS

#nav { 
top: 50%; 
left: 0; 
width: 200px; 
border: 1px solid #000; 
} 
#nav ul { 
width: 200px; 
background: #f9f9f9; 
position: absolute; 
left: -9999em; 
} 
#nav a { 
display: block; 
padding: 5px 10px; 
} 
#nav ul li { 
position: relative; 
} 
#nav li:hover ul { 
left: 200px; 
top: 0; 
} 
#nav li:hover > a { 
cursor: pointer; 
} 
.button a { 
display: block; 
padding: 5px 10px; 
} 

這是小提琴（https://jsfiddle.net/9mqy3r4q/）。

有沒有辦法讓彈出的高度等於主菜單的

Answer 1

您可以使用height CSS屬性：

#nav { 
    top: 50%; 
    left: 0; 
    width: 200px; 
    border: 1px solid #000; 
    height: 100px; 
} 
#nav ul { 
    width: 200px; 
    background: #f9f9f9; 
    position: absolute; 
    left: -9999em; 
    height: 100px; 
} 

Answer 2

您已經添加JQuery的標籤的問題所以給這個JQuery解決方案。

console.log($('#nav').height()) 
 
var nav_height = $('#nav').height(); 
 
$('#nav ul').each(function(){ 
 
\t $(this).css('height', nav_height+'px'); 
 
})

#nav { 
 
top: 50%; 
 
left: 0; 
 
width: 200px; 
 
border: 1px solid #000; 
 
} 
 
#nav ul { 
 
width: 200px; 
 
background: #f9f9f9; 
 
position: absolute; 
 
left: -9999em; 
 
} 
 
#nav a { 
 
display: block; 
 
padding: 5px 10px; 
 
} 
 
#nav ul li { 
 
position: relative; 
 
} 
 
#nav li:hover ul { 
 
left: 200px; 
 
top: 0; 
 
} 
 
#nav li:hover > a { 
 
cursor: pointer; 
 
} 
 
.button a { 
 
display: block; 
 
padding: 5px 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="nav"> 
 
    <li class="button"><a>Sub menu title 1</a> 
 
     <ul> 
 
      <li><a>Link1</a></li> 
 
      <li><a>Submenu2</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="button"><a>Sub menu title 2</a> 
 
     <ul> 
 
      <li><a>Link4</a></li> 
 
      <li><a>Submenu5</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="button"><a>Sub menu title 3</a> 
 
     <ul> 
 
      <li><a>Link</a></li> 
 
      <li><a>Submenu</a></li> 
 
     </ul> 
 
    </li> 
 
</ul>

Answer 3

只需添加在你的CSS：

.button { 
    position:relative; 
}