Javascript jQuery菜单aim不带Bootstrap.css

我想使用创建类似亚马逊的导航菜单，但我不想包含bootstrap.css

这是我的简单html：

<ul>                
  <li>
    <a href="#">Department1</a>
    <ul>
        <li>cate21</li>
        <li>cate22</li>
        <li>cate23</li>
        <li>cate24</li>
        <li>cate25</li>
        <li>cate26</li>
        <li>cate27</li>
    </ul>                               
 </li>
 <li>
    <a href="#">Department2</a>
    <ul>
        <li>cate21</li>
        <li>cate22</li>
        <li>cate23</li>
        <li>cate24</li>
        <li>cate25</li>
        <li>cate26</li>
        <li>cate27</li>
    </ul>                               
 </li>
 <li>
    <a href="#">Department3</a>
    <ul>
        <li>cate21</li>
        <li>cate22</li>
        <li>cate23</li>
        <li>cate24</li>
        <li>cate25</li>
        <li>cate26</li>
        <li>cate27</li>
     </ul>                              
    </li>
 <li><a href="#">Department4</a></li>
 <li><a href="#">Department5</a></li>
 <li><a href="#">Department6</a></li>           
 </ul>

---

有没有任何一个例子是没有引导的简单css文件。多谢各位

我在下面写的示例是纯css，使用修改后的html进行更好的标记

首先，这里是修改后的html：

<ul class="container">                
  <li class="container-child">
    <a href="#" class="title">Department1</a>
    <ul class="dropdown">
        <li class="sub-title">cate21</li>
        <li class="sub-title">cate22</li>
        <li class="sub-title">cate23</li>
        <li class="sub-title">cate24</li>
        <li class="sub-title">cate25</li>
        <li class="sub-title">cate26</li>
        <li class="sub-title">cate27</li>
    </ul>                               
 </li>
 <li class="container-child">
    <a href="#" class="title">Department2</a>
    <ul class="dropdown">
        <li class="sub-title">cate21</li>
        <li class="sub-title">cate22</li>
        <li class="sub-title">cate23</li>
        <li class="sub-title">cate24</li>
        <li class="sub-title">cate25</li>
        <li class="sub-title">cate26</li>
        <li class="sub-title">cate27</li>
    </ul>                               
 </li>
 <li class="container-child">
    <a href="#" class="title">Department3</a>
    <ul class="dropdown">
        <li class="sub-title">cate21</li>
        <li class="sub-title">cate22</li>
        <li class="sub-title">cate23</li>
        <li class="sub-title">cate24</li>
        <li class="sub-title">cate25</li>
        <li class="sub-title">cate26</li>
        <li class="sub-title">cate27</li>
     </ul>                              
    </li>
 <li class="container-child"><a href="#">Department4</a></li>
 <li class="container-child"><a href="#">Department5</a></li>
 <li class="container-child"><a href="#">Department6</a></li>           
 </ul>

你可以在这里看到它的工作原理：

如果您还有其他问题，请告诉我：

.container {
  min-width: 500px
}

.container-child {
  display: inline-block;
  float: left;
  margin-left: 50px
}

.dropdown {
  display: none;
  padding: 0
}

.title:hover + .dropdown {
  display: block
}

.sub-title {
  list-style-type: none;
  text-align: center;
  width: 100%
}