Question

我在html中有一个菜单，其子菜单是在元素悬停时打开的。此菜单的代码为：

<li class='has-sub'><a href="" id="A3" style="width: 190px;" class="usernav">Tab Amministrativo <span class="caret"></span></a>
   <ul>
      <li><a class="navbar-text" href="/Admin/Pages/example1.aspx">example1</a></li>
      <li><a class="navbar-text" href="/Admin/Pages/example2.aspx">example2</a></li>
      <li><a class="navbar-text" href="/Admin/Pages/example3.aspx">example3</a></li> 
    </ul>
</li>

这是与CSS相关的：

    #cssmenu {
         line-height: 15px;
         text-align: left;
     }
    #cssmenu > ul {
        width: auto;
        list-style-type: none;
        padding: 0;
        margin: 0;
        background: #ffffff;
    }
    #cssmenu > ul li#responsive-tab {
        display: none;
        /* Hide for large screens */

    }
    #cssmenu > ul li {
        display: inline-block;
        *display: inline;
        zoom: 1;
    }
    #cssmenu > ul li.right {
        float: right;
    }
    #cssmenu > ul li.has-sub {
        position: relative;
    }
    #cssmenu > ul li.has-sub:hover ul {
        display: block;
    }
    #cssmenu > ul li.has-sub ul {
        display: none;
        width: 250px;
        position: absolute;
        margin: 0;
        padding: 0;
        list-style-type: none;
        background: #ffffff;
    }
    #cssmenu > ul li.has-sub ul li {
        display: block;
    }
    #cssmenu > ul li.has-sub > a {
        background-image: url('images/caret.png');
        background-repeat: no-repeat;
        background-position: 90% -95%;
    }
    #cssmenu > ul li.has-sub > a.active,
    #cssmenu > ul li.has-sub > a:hover {
        background: #0a3f75 url('images/caret.png') no-repeat;
        background-position: 90% 195%;
        color: #fff;
    }
    #cssmenu > ul li a {
        display: block;
        padding: 12px 24px 11px 24px;
        text-decoration: none;
        color: #0a3f75;
    }
    #cssmenu > ul li a.active,
    #cssmenu > ul li a:hover {
        background: #0a3f75;
        color: #fff;
    }

现在我需要在此代码中添加另一个子菜单，该子菜单必须在特定值的右侧或底部可见。例如，我需要显示这样的解决方案：

   <li class='has-sub'><a href="" id="A3" style="width: 190px;" class="usernav">Tab Amministrativo <span class="caret"></span></a>
       <ul>
          <li>example1
             <ul>
                <li><a class="navbar-text" href="/Admin/Pages/exampleSub1.aspx">exampleSub1</a></li>
             </ul>
          </li>
          <li><a class="navbar-text" href="/Admin/Pages/example2.aspx">example2</a></li>
          <li><a class="navbar-text" href="/Admin/Pages/example3.aspx">example3</a></li> 
        </ul>
    </li>

这是JSFiddle：https://jsfiddle.net/tyrj5xnu/1/我想要那个＆＃39; Fatture Esterne＆＃39;有子标签＆Crea Fatture＆＃39;和＆＃39; Fat2＆＃39;

Answer 1

修改你可以在你的CSS上添加它

#cssmenu >ul li.has-sub ul li.has-sub-lateral ul{ display:none; } #cssmenu >ul li.has-sub ul li.has-sub-lateral a:hover + ul { display:block; margin-left:250px; }

如果你需要，我不会理解。但是如果放margin-left（因为你有绝对位置），你可以看到<ul>

带有两个子菜单的HTML菜单

1 个答案: