1
私は現在、垂直方向に上に拡大するメニューバーで作業しています。オーバーフローを隠すのではなく表示に変更すると、メニューが正しい場所に展開されますが、発生したくないメニュー全体が表示されます。オーバーフロー：隠されている;メニューが展開されますが、部分的に展開されたメニューの上にカーソルを置いて拡大したいところにカーソルを移動したときにのみ、メニューが展開されます。誰も助けることができますか？メニューバーは、オーバーフローでホバー上で拡張されません。
.HomeBottomMenu {
-webkit-font-smoothing:antialiased;
text-align: center;
text-align: justify;
position: fixed;
bottom: 6em;
z-index:9999;
}
.HomeBottomMenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.HomeBottomMenu ul ul {
height: 0px;
}
.HomeBottomMenu ul ul:hover {
height:532px;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.HomeBottomMenu ul li{
position: relative;
line-height: 21px;
min-width: 220px;
text-align: center;/* Used to be left*/
background: #424242;
}
.HomeBottomMenu ul li a{
display: block;
padding: 8px 8px;
color: #fff;
text-decoration:none;
text-align: left;
font-family: 'BebasNeueRegular', Arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
.HomeBottomMenu ul li a:hover{
color: #fff;
background: #25a0da;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.HomeBottomMenu ul li .dropdown{
background: #f2f2f2;
display: hidden;
position: absolute;
left: -0.01em;
overflow: hidden;
}
.HomeBottomMenu ul li:hover .dropdown{
/* Display the initial dropdown */
display: block;
bottom: 100%;
position: absolute;
background: #939393;
min-height: 50px;
}
.HomeBottomMenu ul li ul.dropdowndropdown {
position: relative;
height:100%;
display:inline-block;
bottom:100%;
}
.HomeBottomMenu ul li ul :hover .dropdowndropdown{
position: relative;
display:inline-block;
}
.HomeBottomMenu ul li ul.dropdowndropdown li{
display: inline-block;
/*Colour of level 1, level 2...*/
background-color: rgba(0, 90, 235, 0.33);
bottom: 100%;
}
.HomeBottomMenu ul li ul.dropdowndropdown li:hover{
position: relative;
}
.HomeBottomMenu ul li ul.dropdowndropdown li a{
color:#fff;
font-size:16px;
padding: 10px 10px;
text-align:center;
}
.HomeBottomMenu ul li ul .dropdowndropdown li a :hover{
color: #fff;
}