Question

我想构建一个级联菜单，在某个<li>处打开一个新菜单。这是HTML代码：

<div className='ux-dropdown-menu-container'>
<ul className='ux-dropdown-menu'>
  <li className='ux-dropdown-menu-item'><a href='#'>Menu Item 1</a></li>
  <li className='ux-dropdown-menu-item'><a href='#'>Menu Item 2</a></li>
  <li className='ux-dropdown-menu-item'><a href='#'>Submenu</a></li>
  <li className='ux-dropdown-menu-item'>
    <div className='ux-dropdown-menu-container'>
          <ul className='ux-dropdown-menu'>
            <li className='ux-dropdown-menu-item'><a href='#'>SubMenu Item 1</a></li>
            <li className='ux-dropdown-menu-item'><a href='#'>SubMenu Item 2</a></li>
            <li className='ux-dropdown-menu-item'><a href='#'>SubMenu Item 3</a></li>
            <li className='ux-dropdown-menu-item'>
            </li>
          </ul>
  </div>
  </li>
   <li className='ux-dropdown-menu-item'><a href='#'>Menu Item 3</a></li>
</ul>
</div>

我的CSS课程：

.ux-dropdown-menu-container {
    position: absolute;
    display: block;
    background-color: $ux-color-boxed-background;
    border: solid;
    border-color: $ux-color-border;
    border-width: 1px;
    border-radius: 4px;
    box-shadow: 0px 2px 2px 0px $ux-color-border;
    top: 105%;
    text-align: left;
    min-width: 100px;
}

.ux-dropdown-menu {
    margin: 0px 0px 0px 0px;
    list-style-type: none;
    padding: 5px 5px 5px 5px; // top right botton left
    z-index: 1;
}

.ux-dropdown-menu-item
{
    white-space: nowrap;
    position: relative;
}


.ux-dropdown-menu-item a {
    display: inline-block;
    text-decoration: none;
    padding: 5px 5px 5px 5px;
    color: $ux-color-text;
}


.ux-dropdown-menu-item:hover {
    background-color: $ux-color-hover;
}

.ux-dropdown-menu-item:active {
    background-color: $ux-color-click-background;
}

即使在<li>处有一个位置：亲戚，子菜单的新<div>也不会定位在那里。结果如下：

我希望子菜单显示在Submenu项的旁边。

帮助appreacited：

（A）将子菜单放在Submenu项

旁边

（B）考虑右侧或左侧打开，如果组成菜单和屏幕右侧，则需要打开左侧的菜单。解决方案必须 NOT 使用jQuery。

Answer 1

＆＃13;

body{
	margin: 0; padding: 0;
}

.ux-dropdown-menu-container {
	float: left;
}

.ux-dropdown-menu-containerItem {
    position: absolute;
    display: none;
    background-color: $ux-color-boxed-background;
    border: solid;
    border-color: $ux-color-border;
    border-width: 1px;
    border-radius: 4px;
    box-shadow: 0px 2px 2px 0px $ux-color-border;
    top: 0;
    text-align: left;
    min-width: 100px;
	left: 100%;
}

.ux-dropdown-menu-item:hover .ux-dropdown-menu-containerItem {
    display: block;
}

.ux-dropdown-menu {
    margin: 0px 0px 0px 0px;
    list-style-type: none;
    padding: 5px 5px 5px 5px; // top right botton left
    z-index: 1;
}

.ux-dropdown-menu-item
{
    white-space: nowrap;
    position: relative;
	border: 1px solid #ccc;
	list-style: none;
}


.ux-dropdown-menu-item a {
    display: inline-block;
    text-decoration: none;
    padding: 5px 5px 5px 5px;
    color: $ux-color-text;
}


.ux-dropdown-menu-item:hover {
    background-color: $ux-color-hover;
}

.ux-dropdown-menu-item:active {
    background-color: $ux-color-click-background;
}

＆＃13;

<div class="ux-dropdown-menu-container">
<ul class="ux-dropdown-menu">
  <li class="ux-dropdown-menu-item"><a href="#">Menu Item 1</a></li>
  <li class="ux-dropdown-menu-item"><a href="#">Menu Item 2</a></li>
  <li class="ux-dropdown-menu-item">
  	<a href="#">Submenu</a>
    <div class="ux-dropdown-menu-containerItem">
          <ul class="ux-dropdown-menu">
            <li class="ux-dropdown-menu-item"><a href="#">SubMenu Item 1</a></li>
            <li class="ux-dropdown-menu-item"><a href="#">SubMenu Item 2</a></li>
            <li class="ux-dropdown-menu-item"><a href="#">SubMenu Item 3</a></li>
          </ul>
  </div>
  </li>
   <li class="ux-dropdown-menu-item"><a href="#">Menu Item 3</a></li>
</ul>
</div>

＆＃13;

CSS级联菜单：相对于<li>的位置<div>

1 个答案: