Question

我是HTML的新手，我需要在侧栏中放置一些子菜单..就像下拉菜单一样，但它在右侧打开。我怎么能把链接放在上面呢。感谢

HTML

<ul>
    <li></br>
        <a class="active"  href="?">HOME</a>
    </li>
    <li></br>
        <a href="?">Manage Users</a> ----> needs the dropdown here
    </li>        
    <li></br>
        <a href="?">Manage Employees</a>----> needs the dropdown here
    </li>
    <li></br>
        <a href="?">Search</a>
    </li>
    <li></br>
        <a href="<?php echo site_url('login/logout') ?>">Log-Out</a>
    </li>
</ul>

这是我的css。

body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

............................................... ....................

Answer 1

<ul>
<li></br>
    <a class="active"  href="?">HOME</a>
</li>
<li></br>
    <a href="?">Manage Users</a> ----> needs the dropdown here
</li>        
<li></br>
    <a href="?">Manage Employees</a>---->
     <ul>
        <li><a href="#"> You put the sublists here</a></li> 
        <li> Many has you need</li>
     </ul>
</li>
<li></br>
    <a href="?">Search</a>
</li>
<li></br>
    <a href="<?php echo site_url('login/logout') ?>">Log-Out</a>
</li>

Answer 2

你不需要＆lt; / br＆gt; （对于HTML5，正确的是＆lt; br /＆gt;或＆lt; br＆gt;）。我试着用jQuery做一个简单的解决方案。您只需显示或不显示您想要的内容。

希望这是你想要的。

＆＃13;

body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*width: 15%;*/
    background-color: #f1f1f1;
    /*position: fixed;*/
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <a class="active" href="#">HOME</a>
    </li>
    <li>
        <a href="#" onclick="$('ul#contentUsers').toggle();">Manage Users</a>
        <ul id="contentUsers" style="display: none;">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
    </li>        
    <li>
        <a href="#" onclick="$('ul#contentEmployees').toggle();">Manage Employees</a>
        <ul id="contentEmployees" style="display: none;">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Search</a>
    </li>
    <li>
        <a href="#">Log-Out</a>
    </li>
</ul>

＆＃13;

如何在左侧栏

2 个答案: