块中的HTML/CSS子菜单_Html_Css

块中的HTML/CSS子菜单

html css

块中的HTML/CSS子菜单,html,css,Html,Css,我正在尝试用html/css创建一个子菜单。我已经有了一段代码，但我想在每个菜单项下面的块中有一个子菜单，但我不知道如何做。有人愿意帮忙吗 .main菜单{ 左边距：自动；右边距：自动； } .main菜单{ 宽度：940px； ; 溢出：隐藏；字体系列：“swis721_btroman”；位置：相对位置；背景图片：url（../img/01.png）；列表样式：无；字体大小：16px；颜色：#000； } 李先生{ 浮动：左；文本转换：大写；字体系列：“swis721_bt

我正在尝试用html/css创建一个子菜单。我已经有了一段代码，但我想在每个菜单项下面的块中有一个子菜单，但我不知道如何做。有人愿意帮忙吗

.main菜单{
左边距：自动；
右边距：自动；
}
.main菜单{
宽度：940px；
;
溢出：隐藏；
字体系列：“swis721_btroman”；
位置：相对位置；
背景图片：url（../img/01.png）；
列表样式：无；
字体大小：16px；
颜色：#000；
}
李先生{
浮动：左；
文本转换：大写；
字体系列：“swis721_btroman”；
填充：0 20px 0 20px；
显示：表格列；
字体大小：16px；
颜色：#000；
}
.main菜单ul li：第一个孩子{
背景：无；
}
.main菜单ul li a{
浮动：左；
文字装饰：无；
填充：9px 0 9px 0；
字体系列：“swis721_btroman”；
字体大小：粗体；
字体大小：16px；
颜色：#292F51；
}
.main菜单ul li a：悬停{
文字装饰：无；
颜色：#FFF；
溢出：隐藏；
填充：9px 9px 9px 9px；
位置：相对位置；
背景色：#292F51；
}
主菜单{
列表样式类型：无；
显示：无；
}
.main菜单ul：悬停ul{
显示：块；
位置：相对位置；
}

这将很好地工作。最重要的规则是，当你将一个li悬停时，它应该显示它的子ul

。主菜单，
.子菜单{
字体大小：0px；
边际：0px；
列表样式：无；
填充：0px；
字体系列：“Helvetica”；
}
.子菜单{
显示：无；
}
.菜单项，
.分项{
背景：海军；
颜色：白色；
字体大小：14px；
文本对齐：居中；
最小宽度：80px；
填充：4px；
}
.菜单项{
显示：内联块；
垂直对齐：顶部；
}
.菜单项：悬停，
.分项：悬停{
背景：蓝色；
}
.菜单项：悬停>ul{
显示：块；
}


第1项
第2项（含子项！）

第3项
第4项

第5项
第6项（含子项！）

第7项
第8项

这里有两个主要问题：

首先，此选择器

.main菜单ul:hover ul

错误，因为当您将

鼠标悬停在主ul
上时，会显示所有ul
元素
更改为：
.主菜单li：悬停>ul
仅使ul
子元素在li
中可见


此外，这些子菜单需要定位为absolute
，以免干扰上部菜单的布局：
.mainmenu ul li {
  position:relative;
}
.mainmenu ul li > ul {
  display: none;
  position: absolute;
  z-index:10;
}


检查此代码段

.main菜单{
填充：0；
宽度：940px；
位置：相对位置；
列表样式：无；
字体大小：16px；
颜色：#000；
}
李先生{
浮动：左；
文本转换：大写；
填充：0 20px 0 20px；
字体大小：16px；
颜色：#000；
位置：相对位置；
}
.main菜单ul li a{
显示：块；
文字装饰：无；
填充：9px 0 9px 0；
字体大小：粗体；
字体大小：16px；
颜色：#292F51；
}
.main菜单ul li a：悬停{
文字装饰：无；
颜色：#FFF；
背景色：#292F51；
}
.main菜单ul li>ul{
显示：无；
位置：绝对位置；
z指数：10；
}
.主菜单li：悬停>ul{
显示：块；
}










































































我真的不喜欢从无到有（从零开始）编码的子菜单。今天，您可以创建一些菜单“没有”任何CSS
您可以使用类实现如下菜单：

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>

(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);

请注意，一个简单的搜索是有用的。谢谢你的比赛。当你只是一个业余爱好者，像我一样，也许一个简单的搜索不是eno