Navbar / Dropdown menu help

bootstrap
php

#1

Hi there,

I new with scripting so i hope someone can help me out with this issue.
I created a Navbar, see my script... what i want is the dropdown menu in Hover style, so i don't have to click on the button to open the dropdown menu.

What is want is when iam going with my mouse over the menu the menu button dropdown automatically en closedown automatically.

Sorry for my english guys...

Thanks for your time and support!


#2

strong text


#3

I can't upload the script, because i am new....


#5

@info2015 is this something you are looking for

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		
		<style>
			.dropdown{
				margin-left:50px;
				width:100%;	
			}
			.dropdown .dropdown-toggle,
			.dropdown-menu{
				width:200px;
			}

			.dropdown-menu .divider{
				height:40px;
			}
			.divider{
				padding:0px;
			}
		
	
		</style>
	</head>
	<body>
		<div class="container">
			<div class = "dropdown">
				<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Services</button>
				<ul class="dropdown-menu" role = "menu">
	<?php	
		//Good idea to use an array to store the links and their descriptors
		//then use a for loop to render them onto the page
		$services = array(	"service 1" =>"#",
						 	"service 2" =>"#",
						 	"service 3" =>"#",
						 	"service 4" =>"#",
						    "service 5" =>"#",
						 	"service 6" =>"#",
						 	"service 7" =>"#",
						 	"service 8" =>"#",
						 	"service 9" =>"#");
		
		foreach($services as $service =>$link){
			echo "<li><a href = \"$link\" target = \"_blank\" class=\"divider\">$service</a></li>";
		}
	?>
	</ul>
	</div>
		</div>
	</body>
</html>