Question

我希望我的深层菜单位于下拉菜单的右侧。只有位置：相对它显示一些东西，即悬停链接下的空白区域。将其更改为位置：绝对无效。我也尝试将菜单一直移到左边，但那也没有用。

HTML：

<div class="wrapper">
    <ul class="navbar">
        <li class="dropdown"><hr id="tab1"/><a href="#">Models</a>
            <ul class="dropdown-content">
                <li><a href="#">911<i class="fa fa-chevron-right fa-fw" style="float:right;margin-top:2px;" aria-hidden="true"></i></a>
                    <ul class="dropdown-content2">
                        <li><a href="#">Link 1</a></li>
                    </ul>
                </li>
                <li><a href="#">Panamera<i class="fa fa-chevron-right fa-fw" style="float:right;margin-top:2px;" aria-hidden="true"></i></a></li>
                <li><a href="#">Cayenne<i class="fa fa-chevron-right fa-fw" style="float:right;margin-top:2px;" aria-hidden="true"></i></a></li>
            </ul>
        </li>
        <li><hr id="tab2"/><a href="#">News</a></li>
        <li><hr id="tab3"/><a href="#">Contact</a></li>
        <li><hr id="tab4"/><a href="#">Generations</a></li>
    </ul>
</div>

CSS：

    .navbar {
        text-align:center;
        margin-top: 0px;
        padding: 0;
        background-color: white;
        position: absolute;
        z-index:200;
        box-shadow:1px 2px 2px rgba(0,0,0,0.3);
ul {
    list-style-type: none;
    position:relative;
    padding:0;
    width: 100%;
    background-color: white;
}
    }
    ul ul{
        visibility: hidden;
        margin-left:10px;
        width:200px;
        box-shadow: 7px 4px 10px rgba(0,0,0,0.3);
        z-index:-1;
        position:absolute;
        transform: translateY(-3em);
        opacity:0;
        transition: 0.6s;
    }
    ul ul li {
        float:none;
        width:200px;
    }
    ul ul li a{
        text-decoration: none;
        display:block;
        position:relative;
        font-family: 'Open Sans', serif;
        color:black;
        text-align:left;
        font-weight: bold;
        border-top:0.5px solid #d8d8d8;
        transition: 0.6s;
    }
    li:hover:nth-child(1) .dropdown-content{
        visibility: visible;
        opacity: 1;
        transform: translateY(0%);
        transition: 0.6s;
    }
    .dropdown-content li a:hover{
        background-color: #9f111d;
        color:white;
        border-color: #9f111d;
        transition:0.6s;
    }
    ul ul ul {
        top:0;
        left:100%;
        float:none;
    }
    .dropdown-content2{
        display: none;
        position:relative;
        color:black;
        box-shadow: 7px 4px 10px rgba(0,0,0,0.3);
    }
    .dropdown-content li:hover:nth-child(1) > ul{   
        display:block;
    }

Answer 1

这个CSS会把菜单放到右边。 https://jsfiddle.net/t9u0u8ax/2/

.dropdown-content li:hover:nth-child(1) > ul {
  /* you already had this rule */
  display:block;

  /* added these styles below */
  opacity: 1;
  visibility: visible;
  top: 0;
  left: 100%;
  transform: translate(0);
  position: absolute;
  margin: 0;
}

我的深层菜单无法正常工作

1 个答案: