css code supposes display sub-menu relatively , not pushing other contents right side. sub-menu2 displays contents correctly when mouse palces on header displays pushes next header. wrong here , how 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*/ 
position: relative not remove element document flow. position: absolute does. if change .submenu , .submenu2 (which technically combine 1 class) position: relative position: absolute , add in position: relative .nav.navbar , submenus drop nicely without interfering 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 helps!
Comments
Post a Comment