html - CSS 级联菜单 : Position <div> relative to <li>

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 的右边元素。

我现在正在寻找:

(A) 将子菜单放在 Submenu 旁边元素

(B) 考虑向右或向左打开，如果菜单位于屏幕右侧，则需要向左打开菜单。我不打算使用 jQuery

Answer 1

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;
}

<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>