不带Bootstrap.css的jQuery菜单aim

Question

我想使用jQuery-menu-aim创建类似亚马逊的导航菜单，但我不想包含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文件的例子。非常感谢!

Answer 1

我在下面编写的示例是纯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>

这是css，

.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%
}

你可以在这里看到它的现场效果：http://codepen.io/raunay/pen/zAqar

如果您有进一步的问题，请告诉我:)