块中的HTML / CSS子菜单

时间：2015-02-12 16:29:46

标签： html css

我试图在html / css中创建一个子菜单。我已经有了一段代码，但我想在每个菜单项下方的块中有一个子菜单，但我无法弄清楚如何去做。有人想帮忙吗？

＆＃13;
＆＃13; 
.mainmenu {
  margin-left: auto;
  margin-right: auto;
}
.mainmenu ul {
  width: 940px;
  ;
  overflow: hidden;
  font-family: 'swis721_btroman';
  position: relative;
  background-image: url(../img/01.png);
  list-style: none;
  font-size: 16px;
  color: #000;
}
.mainmenu ul li {
  float: left;
  text-transform: uppercase;
  font-family: 'swis721_btroman';
  padding: 0 20px 0 20px;
  display: table-column;
  font-size: 16px;
  color: #000;
}
.mainmenu ul li:first-child {
  background: none;
}
.mainmenu ul li a {
  float: left;
  text-decoration: none;
  padding: 9px 0 9px 0;
  font-family: 'swis721_btroman';
  font-weight: bold;
  font-size: 16px;
  color: #292F51;
}
.mainmenu ul li a:hover {
  text-decoration: none;
  color: #FFF;
  overflow: hidden;
  padding: 9px 9px 9px 9px;
  position: relative;
  background-color: #292F51;
}
.mainmenu ul ul {
  list-style-type: none;
  display: none;
}
.mainmenu ul:hover ul {
  display: block;
  position: relative;
}
＆＃13; 
<div class="mainmenu">
  <ul>
    <li class="operador chefe">
      <a href="#">operador chefe</a>
      <ul>
        <li><a href="#">menu 1</a>
        </li>
        <li><a href="#">menu 2</a>
        </li>
        <li><a href="#">menu 3</a>
        </li>
        <li><a href="#">menu 4</a>
        </li>
        <li><a href="#">menu 5</a>
        </li>
      </ul>
    </li>
    <li class="safety">
      <a href="#">safety</a>
      <ul>
        <li><a href="#">menu 1</a>
        </li>
        <li><a href="#">menu 2</a>
        </li>
        <li><a href="#">menu 3</a>
        </li>
        <li><a href="#">menu 4</a>
        </li>
        <li><a href="#">menu 5</a>
        </li>
      </ul>
    </li>
    <li class="security">
      <a href="#">security</a>
      <ul>
        <li><a href="#">menu 1</a>
        </li>
        <li><a href="#">menu 2</a>
        </li>
        <li><a href="#">menu 3</a>
        </li>
        <li><a href="#">menu 4</a>
        </li>
        <li><a href="#">menu 5</a>
        </li>
      </ul>
    </li>
    <li class="atendimento">
      <a href="#">atendimento</a>
      <ul>
        <li><a href="#">menu 1</a>
        </li>
        <li><a href="#">menu 2</a>
        </li>
        <li><a href="#">menu 3</a>
        </li>
        <li><a href="#">menu 4</a>
        </li>
        <li><a href="#">menu 5</a>
        </li>
      </ul>
    </li>
    <li class="apoio unidades comerciais">
      <a href="#">apoio unidades comerciais</a>
      <ul>
        <li><a href="#">menu 1</a>
        </li>
        <li><a href="#">menu 2</a>
        </li>
        <li><a href="#">menu 3</a>
        </li>
        <li><a href="#">menu 4</a>
        </li>
        <li><a href="#">menu 5</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

现在，当我浏览一个菜单项时，所有子菜单项都会立即显示，并且在内联块中，这不是我想要的。

3 个答案:

答案 0 :(得分：0)

这样可以正常工作。 最重要的规则是，当你悬停一个li时，它应该显示它的孩子ul。

.main-menu,
.sub-menu {
    font-size: 0px;
    margin: 0px;
    list-style: none;
    padding: 0px;

    font-family: 'Helvetica';
}

.sub-menu {
    display: none;
}

.menu-item,
.sub-item {
    background: navy;
    color: white;
    font-size: 14px;
    text-align: center;
    min-width: 80px;
    padding: 4px;
}

.menu-item {
    display: inline-block;
    vertical-align: top;
}

.menu-item:hover,
.sub-item:hover {
    background: blue;
}

.menu-item:hover > ul {
    display: block;
}
<ul class="main-menu">
    <li class="menu-item">Item 1</li>
    <li class="menu-item">Item 2 (With sub-items!)
        <ul class="sub-menu">
            <li class="sub-item">Item 3</li>
            <li class="sub-item">Item 4</li>
        </ul></li>
    <li class="menu-item">Item 5</li>
    <li class="menu-item">Item 6 (With sub-items!)
        <ul class="sub-menu">
            <li class="sub-item">Item 7</li>
            <li class="sub-item">Item 8</li>
        </ul></li>
</ul>

答案 1 :(得分：0)

这里有两个主要问题：

  • 首先这个选择器.mainmenu ul:hover ul是错误的，因为当您ul为主hover时，所有ul元素都显示出来。

    更改为：

      

    .mainmenu li：hover＆gt; ul

    仅显示ul中的子li元素。

  • 此外，这些子菜单需要absolute定位，以免干扰上方菜单的布局：

    .mainmenu ul li {
  position:relative;
}
.mainmenu ul li > ul {
  display: none;
  position: absolute;
  z-index:10;
}

检查此代码段

＆＃13;
＆＃13; 
.mainmenu ul {
  padding:0;
  width: 940px;
  position: relative;
  list-style: none;
  font-size: 16px;
  color: #000;
}
.mainmenu ul li {
  float: left;
  text-transform: uppercase;
  padding: 0 20px 0 20px;
  font-size: 16px;
  color: #000;
  position:relative;
}
.mainmenu ul li a {
  display:block;
  text-decoration: none;
  padding: 9px 0 9px 0;
  font-weight: bold;
  font-size: 16px;
  color: #292F51;
}
.mainmenu ul li a:hover {
  text-decoration: none;
  color: #FFF;
  background-color: #292F51;
}
.mainmenu ul li > ul {
  display: none;
  position: absolute;
  z-index:10;
}
.mainmenu li:hover > ul {
  display: block;
}
＆＃13; 
<div class="mainmenu">
  <ul>
    <li class="operador chefe">
      <a href="#">operador chefe</a>
      <ul>
        <li><a href="#">menu 1</a>
        </li>
        <li><a href="#">menu 2</a>
        </li>
        <li><a href="#">menu 3</a>
        </li>
        <li><a href="#">menu 4</a>
        </li>
        <li><a href="#">menu 5</a>
        </li>
      </ul>
    </li>
    <li class="safety">
      <a href="#">safety</a>
      <ul>
        <li><a href="#">menu 1</a>
        </li>
        <li><a href="#">menu 2</a>
        </li>
        <li><a href="#">menu 3</a>
        </li>
        <li><a href="#">menu 4</a>
        </li>
        <li><a href="#">menu 5</a>
        </li>
      </ul>
    </li>
    <li class="security">
      <a href="#">security</a>
      <ul>
        <li><a href="#">menu 1</a>
        </li>
        <li><a href="#">menu 2</a>
        </li>
        <li><a href="#">menu 3</a>
        </li>
        <li><a href="#">menu 4</a>
        </li>
        <li><a href="#">menu 5</a>
        </li>
      </ul>
    </li>
    <li class="atendimento">
      <a href="#">atendimento</a>
      <ul>
        <li><a href="#">menu 1</a>
        </li>
        <li><a href="#">menu 2</a>
        </li>
        <li><a href="#">menu 3</a>
        </li>
        <li><a href="#">menu 4</a>
        </li>
        <li><a href="#">menu 5</a>
        </li>
      </ul>
    </li>
    <li class="apoio unidades comerciais">
      <a href="#">apoio unidades comerciais</a>
      <ul>
        <li><a href="#">menu 1</a>
        </li>
        <li><a href="#">menu 2</a>
        </li>
        <li><a href="#">menu 3</a>
        </li>
        <li><a href="#">menu 4</a>
        </li>
        <li><a href="#">menu 5</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：-2)

  

我不喜欢从头开始编码的子菜单（从零开始）。你今天可以创建一些菜单＆＃34;没有＆＃34;任何CSS。

您可以使用 Bootstrap 类来实现这样的菜单： http://jsfiddle.net/fm571dsd/4/

<强> HTML： 

<body>
    <div class="container">
        <div class="row">
            <nav class="navbar navbar-default">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span> 
                    </button>
                    <a class="navbar-brand" href="#" target="_blank">Logo</a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">operador chefe</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">item 1</a></li>
                                <li><a href="#">item 2</a></li>
                                <li><a href="#">item 3</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">safety</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">item 1</a></li>
                                <li><a href="#">item 2</a></li>
                                <li><a href="#">item 3</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">security</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">item 1</a></li>
                                <li><a href="#">item 2</a></li>
                                <li><a href="#">item 3</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">atendimento</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">item 1</a></li>
                                <li><a href="#">item 2</a></li>
                                <li><a href="#">item 3</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">apoio unidades comerciais</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">item 1</a></li>
                                <li><a href="#">item 2</a></li>
                                <li><a href="#">item 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</body>

<强> JS： 

(function($){
    $(document).ready(function(){
        $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
            event.preventDefault(); 
            event.stopPropagation(); 
            $(this).parent().siblings().removeClass('open');
            $(this).parent().toggleClass('open');
        });
    });
})(jQuery);
相关问题
最新问题