子菜单将内容推送到右侧

Question

CSS代码假设相对显示子菜单而不是将其他内容推送到右侧。子菜单2正确显示其内容，但当鼠标停留在标题上时，它会显示但是它会推动下一个标题。这里有什么问题以及如何解决？

 <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/">Home</a></li>
                    <li><a runat="server" href="~/About">About Company</a></li>
                    <li id="businessU">
                        <a href="#">Business Units</a>
                        <ul class="sub-menu">
                            <li><a href="#">Solution Engineering Sdn Bhd</a></li>
                            <li><a href="#">Solution Bioforce Sdn Bhd </a></li>
                            <li><a href="#">Solution Biogen Sdn Bhd</a></li>
                            <li><a href="#">Solution A&C Technology Sdn Bhd</a></li>
                            <li><a href="#">Solution E&E Technology Sdn Bhd</a></li>
                        </ul>
                    </li>
                    <li id="Investor">
                        <a href="#">Investor Relations</a>
                        <ul class="sub-menu2">
                            <li><a runat="server" href="~/InvestorRelation/Directors">Directors</a></li>
                            <li><a runat="server" href="~/InvestorRelation/CorporateStructure">Corporate Structure </a></li>
                            <li><a runat="server" href="~/InvestorRelation/News">News</a></li>
                            <li><a runat="server" href="~/InvestorRelation/Events">Events</a></li>
                            <li><a runat="server" href="~/InvestorRelation/Anno">Announcements</a></li>


                        </ul>
                    </li>
                    <li><a runat="server" href="~/Contact">Contact Us</a></li>
                </ul>

CSS

/* sub menu1 display*/

.nav .sub-menu {      
     position:relative;
     display:none;

}

#businessU:hover .sub-menu {
    background-color:white;
    display:block;
}

ul {
list-style-type:none;
margin:0;
padding:2px;
float:right;

}
 /* sub menu1 display end*/

/* sub menu2 display*/

.nav .sub-menu2 {      
     position:relative;
     display:none;

}

#Investor:hover .sub-menu2 {
    background-color:white;
    display:block;
}

ul {
list-style-type:none;
margin:0;
padding:2px;
float:left;

}
/* sub menu2 display end*/  

Answer 1

position: relative不会从文档流中删除元素。 position: absolute。如果您将.submenu和.submenu2（技术上可以合并为一个类）从position: relative更改为position: absolute，并将position: relative添加到.nav.navbar并且子菜单很好地丢弃而不会干扰其他任何东西。

＆＃13;

＆＃13;

/* sub menu1 display*/

.nav .sub-menu {
  position: absolute;
  display: none;
}

#businessU:hover .sub-menu {
  background-color: white;
  display: block;
}
/* sub menu1 display end*/
/* sub menu2 display*/

.nav .sub-menu2 {
  position: absolute;
  display: none;
}

#Investor:hover .sub-menu2 {
  background-color: white;
  display: block;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 2px;
  float: left;
}
/* sub menu2 display end*/

.nav.navbar-nav {
  position: relative;
}

.nav.navbar-nav > li {
  display: inline-block;
  margin-right: 10px;
}

＆＃13;

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/About">About Company</a></li>
    <li id="businessU">
      <a href="#">Business Units</a>
      <ul class="sub-menu">
        <li><a href="#">Solution Engineering Sdn Bhd</a></li>
        <li><a href="#">Solution Bioforce Sdn Bhd </a></li>
        <li><a href="#">Solution Biogen Sdn Bhd</a></li>
        <li><a href="#">Solution A&C Technology Sdn Bhd</a></li>
        <li><a href="#">Solution E&E Technology Sdn Bhd</a></li>
      </ul>
    </li>
    <li id="Investor">
      <a href="#">Investor Relations</a>
      <ul class="sub-menu2">
        <li><a runat="server" href="~/InvestorRelation/Directors">Directors</a></li>
        <li><a runat="server" href="~/InvestorRelation/CorporateStructure">Corporate Structure </a></li>
        <li><a runat="server" href="~/InvestorRelation/News">News</a></li>
        <li><a runat="server" href="~/InvestorRelation/Events">Events</a></li>
        <li><a runat="server" href="~/InvestorRelation/Anno">Announcements</a></li>
      </ul>
    </li>
    <li><a runat="server" href="~/Contact">Contact Us</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！

Answer 2

这是你想要达到的目标吗？您的子菜单已将position: relative更改为position: fixed。

＆＃13;

＆＃13;

/* sub menu1 display*/

.nav .sub-menu {
  position: fixed;
  display: none;
}
#businessU:hover .sub-menu {
  background-color: white;
  display: block;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 2px;
  float: right;
}
/* sub menu1 display end*/

/* sub menu2 display*/

.nav .sub-menu2 {
  position: fixed;
  display: none;
}
#Investor:hover .sub-menu2 {
  background-color: white;
  display: block;
}
/* sub menu2 display end*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a>

    </li>
    <li><a runat="server" href="~/About">About Company</a>

    </li>
    <li id="businessU"> <a href="#">Business Units</a>

      <ul class="sub-menu">
        <li><a href="#">Solution Engineering Sdn Bhd</a>

        </li>
        <li><a href="#">Solution Bioforce Sdn Bhd </a>

        </li>
        <li><a href="#">Solution Biogen Sdn Bhd</a>

        </li>
        <li><a href="#">Solution A&C Technology Sdn Bhd</a>

        </li>
        <li><a href="#">Solution E&E Technology Sdn Bhd</a>

        </li>
      </ul>
    </li>
    <li id="Investor"> <a href="#">Investor Relations</a>

      <ul class="sub-menu2">
        <li><a runat="server" href="~/InvestorRelation/Directors">Directors</a>

        </li>
        <li><a runat="server" href="~/InvestorRelation/CorporateStructure">Corporate Structure </a>

        </li>
        <li><a runat="server" href="~/InvestorRelation/News">News</a>

        </li>
        <li><a runat="server" href="~/InvestorRelation/Events">Events</a>

        </li>
        <li><a runat="server" href="~/InvestorRelation/Anno">Announcements</a>

        </li>
      </ul>
    </li>
    <li><a runat="server" href="~/Contact">Contact Us</a>

    </li>
  </ul>
  <div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是一个解决方案，您只需将其调整为您的类和ID：

＆＃13;

＆＃13;

* {
    box-sizing: border-box;
}
ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
li {
    display: block;
    position: relative;
}
ul ul {
    position: relative;
    display: none;
}
li:hover ul {
    display: block;
}

＆＃13;

<div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/">Home</a></li>
                    <li><a runat="server" href="~/About">About Company</a></li>
                    <li id="businessU">
                        <a href="#">Business Units</a>
                        <ul class="sub-menu">
                            <li><a href="#">Solution Engineering Sdn Bhd</a></li>
                            <li><a href="#">Solution Bioforce Sdn Bhd </a></li>
                            <li><a href="#">Solution Biogen Sdn Bhd</a></li>
                            <li><a href="#">Solution A&C Technology Sdn Bhd</a></li>
                            <li><a href="#">Solution E&E Technology Sdn Bhd</a></li>
                        </ul>
                    </li>
                    <li id="Investor">
                        <a href="#">Investor Relations</a>
                        <ul class="sub-menu2">
                            <li><a runat="server" href="~/InvestorRelation/Directors">Directors</a></li>
                            <li><a runat="server" href="~/InvestorRelation/CorporateStructure">Corporate Structure </a></li>
                            <li><a runat="server" href="~/InvestorRelation/News">News</a></li>
                            <li><a runat="server" href="~/InvestorRelation/Events">Events</a></li>
                            <li><a runat="server" href="~/InvestorRelation/Anno">Announcements</a></li>


                        </ul>
                    </li>
                    <li><a runat="server" href="~/Contact">Contact Us</a></li>
                </ul>

＆＃13;

＆＃13;

＆＃13;