Centering

**lordr22** · 01-10-2014, 11:49 PM

Hello, this might be a simple question, but I am still new to CSS. I used the menu DD offers : http://www.dynamicdrive.com/style/cs...rop_down_menu/ .
What I would like to ask is, how can I center this menu, like position it to the center ?

Thank You

**jscheuer1** · 01-11-2014, 12:08 AM

In the ordinary way. Which in this case for the demo as outlined would be (additions highlighted and red):

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css3splitmenu.css" />

<!--[if lte IE 8]>

<style>

/* Hide split menu from IE8 and below */

div.css3splitmenu {
		margin-right: 5px;
		}

div.css3splitmenu > a:after {
		display: none;
		}

div.css3splitmenu > input {
		display: none;
		}

div.css3splitmenu > ul {
		display: none;
		}

</style>

<![endif]-->

</head>
<body>
<div style="width: 420px; margin: 0 auto;">
<div class="css3splitmenu">
<a href="http://www.dynamicdrive.com">Dynamic Drive</a> <input type="checkbox" />

<ul id="t">
<li><a href="http://www.dynamicdrive.com/new.htm">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm">Revised</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">DD Forums</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a></li>
</ul>
</div>  

<div class="css3splitmenu">
<a href="http://www.javascriptkit.com">JavaScript Kit</a> <input type="checkbox" />

<ul>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/">JS Tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
<li><a href="http://www.javascriptkit.com/howto/">Web Design Tutorials</a></li>
</ul>
</div>  

<div class="css3splitmenu nocss3splitmenu">
<a href="http://www.cssdrive.com">CSS Drive</a>
</div>
</div>

<!-- Script below should follow all split menus -->

<script type="text/javascript">

( function(){ // local scope

	if (!document.querySelectorAll || !document.addEventListener)
		return
	var uls = document.querySelectorAll('div.css3splitmenu > ul'),
			docbody = document.documentElement || document.body,
			checkboxes = document.querySelectorAll('div.css3splitmenu > input[type="checkbox"]'),
			zindexvalue = 100

	for (var i=0; i<uls.length; i++){
		( function(x){ // closure to capture each i value
			checkboxes<i>.addEventListener('click', function(e){
				uls[x].style.zIndex = ++zindexvalue
				for (var y=0; y<uls.length; y++){ // loop through checkboxes other than current and uncheck them (since Chrome doesn't respond to onblur event on checkboxes)
					if (y != x)
						checkboxes[y].checked = false
				}
				e.cancelBubble = true
			})
			checkboxes<i>.addEventListener('blur', function(e){
				setTimeout(function(), 100) // delay before menu closes, for Opera's sake (otherwise links are un-navigatable)
				e.cancelBubble = true
			})
		}) (i)
	}

	docbody.addEventListener('click', function(e){
		for (var i=0; i<uls.length; i++){
			checkboxes<i>.checked = false
		}
	})

})();


</script>

</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/s...tmenu/demo.htm