賢い人の助けが必要です。私はこれに頭を悩ませており、近づいていますが、ホバー時にサブサブメニュー項目を右にドロップすることはできません.
私はおそらく css の競合または反復を持っていますが、パーツを削除して他のパーツを元に戻しました...何かが飛び出すかどうかを確認する必要があるだけです..近くにいますが.. 葉巻はありません。私は 2 つのメニューを取り、それぞれの部分を使用しようとしました (2 つの列を実行する機能があり、他にはサブメニューがありました)。
本当に感謝しています - この時点で混乱していることはわかっています。掘り下げた html のこの単純なセクションには必要以上のものがありますが、問題がどこにあるのかがわかれば - 私は探していますホバー時におもちゃ 1 とおもちゃ 3 がドロップダウンするための uls。ありがとう。
html
<!-- drop menu-->
<ul id="menu">
<li><a href="toys.aspx">TOYS</a>
<div class="menu-container-1">
<ul class="column-1">
<li><a href=""><span>Toy 1</span></a>
<ul>
<li><a href="">sub menu basic 1</a></li>
</ul>
</li>
<li><a href="">Toy 2</a></li>
<li><a href=""><span>Toy 3</span></a>
<ul>
<li><a href="">sub menu basic 3</a></li>
</ul>
</li>
<li><a href="">Toy 4</a></li>
</ul>
</div>
</li>
</ul>
そしてここにcssがあります：
#menu li {
float:left;
display:block;
position:relative;
text-align:center;
padding:4px 18px;
margin:0px 27px 0 0;
border:none; }
#menu li:hover {
border-width:0 0 0 1px;border-style:solid;border-color:#F1F7FC;
padding:4px 18px 4px 17px;
display:block; }
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:16px/1.8em;
color: #000;
display:block;
outline:0;
text-decoration:none;
font-weight:500; }
#menu li:hover a {
color:#161616; }
/* menu containers here */
#menu .menu-container-1,#menu .menu-container-2,#menu .menu-container-3,#menu .menu-container-4 {
margin:4px auto;
float:left;
position:absolute;
left:-999em;
text-align:left;
padding:10px 5px 3px 5px;
border:1px solid #D8E9F8; /* border around dropdown */
border-top:none;
/* rounded corners */
border-radius:0 5px 5px 5px;
-moz-border-radius:0 5px 5px 5px;
-webkit-border-radius:0 5px 5px 5px;
/* gradient */
background:#ffffff;
background: -moz-linear-gradient(center top, #ffffff, #FAFCFE) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#FAFCFE));
box-shadow:inset .4px -2px 3px 2px #EFFFFF; }
#menu .menu-container-1 {
width:165px; }
#menu .menu-container-2 {
width:340px; }
#menu li:hover .menu-container-1, #menu li:hover .menu-container-2, #menu li:hover .menu-container-3, #menu li:hover .menu-container-4 {
top:auto;left:-1px; }
/* columns */
#menu .column-1, #menu .column-2 {
display:inline; float:left;position:relative;margin:0;}
/*added 7/9 for span arrow sub menu */
#menu span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
#menu ul span{
background-image:url("https://www.kqimageserver.com/other/arrowsub.png");padding-right:12px;}
/*thought might be sub menu */
#menu ul ul {
position:absolute;left:80%;top:0;}
#menu .column-1 {
width:165px;}
#menu ul li ul li{ display:none;}
#menu ul li ul li ul li hover>* {display:block; }
/* attempts to get sub menu to show on hover */
#menu .column-1 ul li ul li:hover>*{
display:block;position:absolute;left:80%;top:0;}
#menu li:hover div a {
box-shadow: 0 1px 0 #eeeeee, 0 2px 0 #eeeeee; /*lines between list items */
color: #000;
font-size: 13px;
padding-left: 6px;
font-weight:500;
width: 159px; }
#menu li:hover div a:hover {
background: -moz-linear-gradient(#04ACEC, #0186BA) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA));
color: #000;
background:#deeff7;}
#menu li ul {
/*box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; */
list-style:none;
padding:0;
margin-bottom:7px;}
#menu li ul li {
float: none;
font-size: 12px;
line-height: 24px;
margin: 0;
padding: 0;
position: relative;
text-align: left;
width: 130px;}
#menu li ul li:hover {
background: none;
border: medium none;
margin: 0;
padding: 0; }
ここにjs-fiddle http://jsfiddle.net/tousif123/TfhLb/があります