带有bootstrap和joomla的水平主菜单

Question

我想用bootstrap为joomla创建一个水平主菜单。 内容由joomla动态加载。样式通过引导程序完成，并在单独的css文件中覆盖它。

• 智能手机需要正常折叠。
• 如果可能的话，一切都应该在没有jquery的情况下完成。

任务1

• 菜单需要在水平线上显示子菜单项，即主菜单的开头，在左侧。
• 应将鼠标悬停在父项上显示。我还在子菜单上添加了一个悬停，以便在将鼠标悬停在子菜单项上时保持打开状态。
• 但如果将鼠标悬停在另一个父项上，则需要替换子菜单。

任务2

• 将鼠标悬停在父项上时，backgorund需要显示某种颜色，以便您可以看到您在哪里悬停。
• 在框下方需要有一个相同颜色的小三角形。

问题

• 三角形未显示在所有项目上。
• 带有父项的框将文本向左移动，因为它正在添加一些空格，因为三角形。三角形正在添加：hover：after和content：＆＃39;＆＃39;。

如果我将项目的位置改为亲戚，我得到了三角形和盒子。但是，相对于父项而不是在菜单的开头显示子菜单。

我该如何解决？有没有办法让菜单和三角形相对，子菜单绝对是菜单？

以下是codeply上的代码。

Preview

Code

HTML：

<div class="col-xs-15 col-sm-9 col-md-12 mainmenu">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"></button>
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="navbar">
                <!-- class="nav-collapse collapse" -->
                <!-- begin joomla insert main menu -->
                <ul class="nav navbar-nav">
                    <li class="item-101">
                        <a href="#">Home</a>
                    </li>
                    <li class="item-116 deeper parent"><span class="nav-header">Item 1</span>
                        <ul class="submenu">
                            <li class="item-151">
                                <a href="#">SubItem 1</a>
                            </li>
                            <li class="item-103">
                                <a href="#">SubItem 2</a>
                            </li>
                        </ul>
                    </li>
                    <li class="item-117 deeper parent"><span class="nav-header">Item2</span>
                        <ul class="submenu">
                            <li class="item-254 divider">
                                <span class="separator">SubItem 1</span>
                            </li>
                        </ul>
                    </li>
                    <li class="item-118"><span class="nav-header">Item 3</span></li>
                    <li class="item-119 deeper parent"><span class="nav-header">Item 4</span>
                        <ul class="submenu">
                            <li class="item-158">
                                <a href="#">SubItem 1</a>
                            </li>
                            <li class="item-169">
                                <a href="#">SubItem 2</a>
                            </li>
                        </ul>
                    </li>
                    <li class="item-120">
                        <a href="#">Item 5</a>
                    </li>
                    <li class="item-121"><span class="nav-header">Item 6</span></li>
                    <li class="item-157">
                        <a href="#">Item 7</a>
                    </li>
                </ul>

                <!-- end joomla insert main menu -->
            </div>
        </div>
    </nav>
</div>
</div>

CSS：

.navbar.navbar-default{
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px;
    z-index: 1;
    position: absolute;
}

.navbar.navbar-default > div.container-fluid {
    /* remove padding */
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px;
}
.mainmenu {
    /* remove padding */
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px;
}

ul.nav.navbar-nav {
    font-size: 15px;
    text-transform: uppercase;
    margin-top: 0px;
    margin-left: 0px;
}

.submenu {
    padding: 0px;
    z-index: 1000;
    left: 0px;
    display: none;
    right: 0px;
    float: left;
    position: absolute;
    margin: 0px;
    width: 100%;
}

.submenu > li {
    list-style: none;
    margin: 4px;
    margin-right: 4px;
    padding: 0px;
    white-space: nowrap;
    left: 0px;
    right: 0px;
    float: left !important;
    position: relative;
    top: 4px;
    text-transform: none;
    overflow: hidden;
    color: #41291c;
}
.submenu > li:first-child {
    margin-left: 0px;
    padding-left: 0px;
}
.submenu > li:last-child {
    margin-right: 0px;
}
.submenu > li > a {
    margin: 0px;
    color: #41291C;
}
.submenu > li > a:hover {
    text-decoration: none;
    color: #41291c;
}
.submenu > li > span {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.nav.navbar-nav > li {
    padding-top: 8px;
    padding-left: 11px;
    padding-right: 11px;
    padding-bottom: 4px;
    position: static !important;
    height: 29px !important;
    white-space: nowrap;
    float: left;
    display: inline-block;
}
.nav.navbar-nav > li:first-child {
    padding-left: 0px;
}

.nav.navbar-nav > li:hover {
    background-color: #ded6ad;
}
.nav.navbar-nav > li:hover > .submenu {
    /* let the menu appear on hover */
    display: block;
}

.nav.navbar-nav > li.active > a{
    color: #00aad2;
}
.nav.navbar-nav > li > a {
    /* including submenus */
    font-size: 15px;
    text-transform: uppercase;
    margin-top: 0px;
    padding: 0px;
    color: #222;
}

.nav.navbar-nav > li.active > a {
    /* current active */
    font-size: 15px;
    text-transform: uppercase;
    background-color: #ffffff;
    color: #00aad2;
}

.nav.navbar-nav > li.active > a:hover {
    /* current active on hover*/
    background-color: #ffffff;
    color: #00aad2;
}

.nav-header{
    font-size: 15px;
    text-transform: uppercase;
    line-height: 17px;
    box-sizing: border-box;
    cursor: pointer;
}

.nav-header:hover > ul.submenu {
    display: block !important;
}

.submenu:hover{
    display: block;
}

.nav.navbar-nav > li:hover:after {
    /* adds the triangle */
    z-index: -1;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 3px 0 3px;
    border-color: #ded6ad transparent transparent transparent;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    float: left;
    margin: 0px !important;
    margin-right: -26px;
    padding: 0px !important;
    box-sizing: border-box;
    display: block;
    content: "";
}