<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="/Default.aspx">Home</a> </li> <li class="dropdown"> <a data-toggle="dropdown" href="#"> Data Amendment <b class="caret"></b> </a> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a>Publications Management</a> <ul class="dropdown-menu"> <li> <a href="/FilterPublications.aspx">Manage Bib and Full Text Data</a> </li> <li> <a href="/Publications/OpenAccessList">Manage Publications Open Access</a> </li> <li> <a href="/WOSQuery.aspx">Edit WoS Query</a> </li> <li> <a href="/OverrideLibraryPublicationsLock.aspx">Override Library Publications Lock</a> </li> </ul> </li> <li> <a href="/DataAmendmentRequests/ManageResearchDataAmendmentRequests.aspx">Research Projects</a> </li> <li> <a href="/DataAmendmentRequests/ManageConsultancyDataAmendmentRequests.aspx">Consultancy Projects</a> </li> <li> <a href="/DataAmendmentRequests/ManagePGRDataAmendmentRequests.aspx">PGR Supervision</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" href="#"> Personal Information <b class="caret"></b> </a> <ul class="dropdown-menu"> <li> <a href="/HR/MyInfo.aspx">Personal Information Summary</a> </li> <li> <a href="/ExternalInterests/ViewExternalInterests.aspx">Declaration of External Interests</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" href="#"> Publications <b class="caret"></b> </a> <ul class="dropdown-menu"> <li> <a href="/MyPublications.aspx">View Publications</a> </li> <li> <a href="/AddPublication.aspx">Add Publication</a> </li> <li> <a href="/ClaimPublications.aspx">Claim Publications</a> </li> <li> <a href="/IQA/InternalQualityAssessments.aspx">Author Internal Quality Assessment</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" href="#"> Help <b class="caret"></b> </a> <ul class="dropdown-menu"> <li> <a href="/support.aspx">Contact Support Team</a> </li> <li> <a href="/HelpGuides/userguide_to_manage_role_authorisations.pdf">Manage Role Authorisations User Guide (PDF)</a> </li> <li> <a href="/HelpGuides/userguide_to_declaration_of_external_interests.pdf">Declaration of External Interests User Guide (PDF)</a> </li> <li> <a href="/HelpGuides/faq.html">FAQ</a> </li> </ul> </li> </ul> </div> </div> </div> <hr/> <div class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li> <a href="/Default.aspx">Home</a> </li> <li class="menu-item dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a> <ul class="dropdown-menu"> <li class="menu-item dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a> <ul class="dropdown-menu"> <li class="menu-item "> <a href="#">Link 1</a> </li> <li class="menu-item dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a> <ul class="dropdown-menu"> <li> <a href="#">Link 3</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </div> </div> <div id="logger"></div> </div>

.dropdown-submenu { position:relative; } .dropdown-submenu>.dropdown-menu { top:0; left:100%; margin-top:-6px; margin-left:-1px; -webkit-border-radius:0 6px 6px 6px; -moz-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { display:block; } .dropdown-submenu>a:after { display:block; content:" "; float:right; width:0; height:0; border-color:transparent; border-style:solid; border-width:5px 0 5px 5px; border-left-color:#cccccc; margin-top:5px; margin-right:-10px; } .dropdown-submenu:hover>a:after { border-left-color:#ffffff; } .dropdown-submenu.pull-left { float:none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; }

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { // Avoid following the href location when clicking event.preventDefault(); // Avoid having the menu to close when clicking event.stopPropagation(); // If a menu is already open we close it $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open'); // opening the one you clicked on $(this).parent().addClass('open'); log('click'); }); function log(msg) { $('#logger').add('<p>'+msg+'</p>'); }