Hi,

 

Below is the code for my Navigation bar and it's CSS. How can I make a dropdown menu under (Upcoming) Events for Boston Marathon, and Boston Head?

 

I have tried but failed miserably.

 

 

HTML:

			<!-- NAVIGATION -->
			<nav class="navbar navbar-default navbar-fixed-top">
				<div class="container">
					<div class="navbar-header">
						<button class="navbar-toggle collapsed" data-target="#my-navbar-collapse" data-toggle="collapse" type=
						"button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class=
						"icon-bar"></span> <span class="icon-bar"></span></button> <!-- TEMPLATE LOGO -->


						<div class="navbar-brand">
							<a href="#"><img alt="img" src="images/logo.png"></a>
						</div>
					</div>


					<div class="collapse navbar-collapse" id="my-navbar-collapse">
						<ul class="nav navbar-nav navbar-right" id="nav">
							<li class="active">
								<a href="">HOME</a>
							</li>


							<li>
								<a href="https://members-area.bostonrowingclub.co.uk">MEMBERS AREA</a>
							</li>


							<li>
								<a href="#ABOUT">ABOUT</a>
							</li>


							<li>
								<a href="#GALLERY">GALLERY</a>
							</li>


							<li>
								<a href="#NEWS">NEWS</a>
							</li>


							<li>
								<a href="#UPCOMING">(UPCOMING) EVENTS</a>
							</li>
							<li class="last">
								<a href="#FOOTER">CONTACT</a>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	</header>
	<!-- slider start -->

CSS:

/*-------------------------
	2. Header Styles
-------------------------*/

.navbar-default.navbar-fixed-top {
	background: none;
	box-shadow: none;
	border: none;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-bottom: 0;
	border-bottom: 1px solid transparent;
	transition: all 0.3s ease-in;
}

.navbar-default.navbar-fixed-top .navbar-nav>.active>a {
	background: none;
	box-shadow: none;
	color: #f2f2f2; //Was #fff
}

.navbar-default.navbar-fixed-top .navbar-nav>.active>a:after {
	width: 100%;
	background: #3598db;
}

.navbar-default.navbar-fixed-top .navbar-nav>li>a {
	text-shadow: none;
	font-size: 12px;
	color: #ffffff;
	letter-spacing: 0.36px;
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
	font-family: "Montserrat", sans-serif;
	transition: all 0.3s ease-in;
}

.navbar-default.navbar-fixed-top .navbar-nav>li>a:after {
	content: '';
	display: block;
	height: 4px;
	width: 0;
	margin-top: 5px;
	background: transparent;
	transition: width .5s ease, background-color .5s ease;
}

.navbar-default.navbar-fixed-top .navbar-nav>li>a:hover:after {
	width: 100%;
	background: #3598db;
}

.navbar-default.navbar-fixed-top .navbar-brand {
	padding: 8px 15px;
}

.navbar-default.navbar-fixed-top.fixed-menu {
	background: rgba(47, 47, 45, 0.89);
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid transparent;
}


/*---------- child-menu --------*/

.navbar-default .has-sub-menu {
	position: relative;
}

.navbar-default .has-sub-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	padding-left: 0;
	list-style: none;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(50px);
	transition: all 0.4s ease-in-out;
}

.navbar-default .has-sub-menu:hover>.sub-menu {
	transform: translateY(0);
	visibility: visible;
	opacity: 1;
}

.navbar-default .sub-menu li {
	width: 150px;
	background: rgba(47, 47, 45, 0.69);
	padding: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.navbar-default .sub-menu a {
	display: inline-block;
	width: 100%;
	color: #ffffff;
	font-size: 11px;
	padding: 12px 20px;
	text-transform: uppercase;
	text-decoration: none;
}

.navbar-default .sub-menu a:hover {
	background: rgba(0, 0, 0, 0.1);
}

.navbar-default .sub-menu .has-sub-menu:before {
	color: #ffffff;
	position: absolute;
	content: "\f105";
	font-family: "FontAwesome";
	top: 14px;
	right: 22px;
}

.navbar-default .has-sub-menu:hover:before {
	color: #3598db;
}

.navbar-default .sub-menu .sub-menu {
	left: 100%;
	top: 0;
}

.navbar-nav .has-sub-menu button {
	display: none;
}

Kind regards,

 

Lewis.

I have now resolved this issues alone, can this topic please be locked or closed.