CODEWITHSUNDEEP
css
Saif AL-Qiari
Saif AL-Qiari

Reputation: 469

sub menu pushing content to right side

CSS code supposes to display sub-menu relatively and not pushing other contents to right side. Sub-menu2 displays its contents correctly but when the mouse palces on the header it displays but it pushes the next header. what is wrong here and how to solve it? 

 <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*/

enter image description here

Upvotes: 0

Views: 1504

Answers (3)

David Mann
David Mann

Reputation: 2260

position: relative does not remove an element from the document flow. position: absolute does. If you change your .submenu and .submenu2 (which you could technically combine into one class) from position: relative to position: absolute and add in position: relative to your .nav.navbar and the submenus drop nicely without interfering with anything else.

/* 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;
}
<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>

Hope this helps!

Upvotes: 1

odedta
odedta

Reputation: 2478

Here is a solution, all you need to do is adjust it to your classes and IDs:

* {
    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;
}
<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>

Upvotes: 0

vanburen
vanburen

Reputation: 21663

Is this what you are trying to achieve? Changed position: relative to position: fixed for your submenus.

/* 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*/
<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>

Upvotes: 0

Related Questions