Wordpress Dropdown Menu Theme

[Vaibhav]

I'm currently working on a theme for iDevotees. They use Wordpress and the owner wants a dropdown menu. The menu has links to the homepage, other pages and categories on the top level and then the dropdown level shows the subcategories of the highlighted category. I found a way to do it but the code spread the dropdown level across the page and made the page far too wide. To see what I mean, check out suburbanjunkie.zxq.net You can notice at the bottom: the horizontal sliebar, we want to remove it. It would be awesome of someone could tell me what's wrong or offer an alternative solution. HTML/PHP:

<ul id="nav2" class="clearfloat">	<li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>	<?php wp_list_pages('title_li=&depth=1');	wp_list_categories('orderby=name&title_li=&depth=1');	$this_category = get_category($cat);	if (get_category_children($this_category->cat_ID) != "") {		echo "<ul>";		wp_list_categories('orderby=id&show_count=0&title_li=&child_of=&use_desc_for_title=1&depth=1'.$this_category->cat_ID);		echo "</ul>";	}	?></ul>

CSS:

#nav2{	display: block;	font-size:1.1em;	height:50px;	width:100%;	padding: 0 50%;}[/size][/font][/color] #nav2, #nav2 ul {	line-height: 1;	list-style: none;}#nav2 a ,#nav2 a:hover{	border:none;	display: block;	text-decoration: none;}#nav2 li {	float: left;	list-style:none;	text-decoration: none;	font-size: 15px;	padding: 5px 5px;	border-radius: 5px;	margin: 10px 5px;	box-shadow: 3px 3px 6px #CCC inset;	font-family: Myriad Pro, sans-serif;	background: #d3d5d7;	font-weight: 100;}#nav2 li:hover {	background: #59a4ff;	box-shadow: 3px 3px 6px #4787d5 inset;}#nav2 a,#nav2 a:visited {	display:block;	font-weight:bold;	padding:6px 12px;}#nav2 a:hover, #nav2 a:active {	color:#fff;	text-decoration:none}#nav2 li ul {	height: auto;	left: 100px;	position: absolute;	z-index:999;	width: 100%;	padding: 0 50%;}#nav2 li li {	width: auto;}#nav2 li li a,#nav2 li li a:visited {	font-weight:normal;	font-size:0.9em;}#nav2 li li a:hover,#nav2 li li a:active {	color:#fff;}#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {	left: 30px;}

Edited May 15, 2012 by Vaibhav

[dsonesuk]

You need to give #nav2 li position: relative; this will force sublevel ul position to be determined by parent li top and left edge #nav2 li { float: left; list-style:none; text-decoration: none; font-size: 15px; padding: 5px 5px; border-radius: 5px; margin: 10px 5px; box-shadow: 3px 3px 6px #CCC inset; font-family: Myriad Pro, sans-serif; background: #d3d5d7; font-weight: 100;position: relative;}sublevel ul needs to be hidden from view until called upon #nav2 li ul { height: auto; /*left: 100px;*/left: -9999em; position: absolute; z-index:999; width: 100%; /*maybe consider a fixed width*/ padding: 0 50%;}

[Vaibhav]

Thanks a lot. I'll try this out and let you know

[Drewza1243]

You need to give #nav2 li position: relative; this will force sublevel ul position to be determined by parent li top and left edge #nav2 li { float: left; list-style:none; text-decoration: none; font-size: 15px; padding: 5px 5px; border-radius: 5px; margin: 10px 5px; box-shadow: 3px 3px 6px #CCC inset; font-family: Myriad Pro, sans-serif; background: #d3d5d7; font-weight: 100; position: relative;} sublevel ul needs to be hidden from view until called upon #nav2 li ul { height: auto; /*left: 100px;*/left: -9999em; position: absolute; z-index:999; width: 100%; /*maybe consider a fixed width*/ padding: 0 50%;}

That fixes the spacing of the menu items issue however the page is still unnecessarily wide

[dsonesuk]

Well because the OP specifically asked about menu items in the first place, that what OP got! The rest is a mishmash of misused padding, float, which maybe because the OP was experimenting to come up with a solution to fix this problem, but if the OP wishes a solution to this problem he/she just needs to repost stating that fact. Edit: Actually the use of padding 50% within ul would have contributed to width problem since it was not using position absolute at the time, these would not have been taken out of the flow from the rest of the page content.

Edited May 29, 2012 by dsonesuk

[Vaibhav]

We both are working on the same theme. Since your account has to be verified before posting something on this forum, Drew1243 made a post using my account.

[Drewza1243]

Well because the OP specifically asked about menu items in the first place, that what OP got! The rest is a mishmash of misused padding, float, which maybe because the OP was experimenting to come up with a solution to fix this problem, but if the OP wishes a solution to this problem he/she just needs to repost stating that fact. Edit: Actually the use of padding 50% within ul would have contributed to width problem since it was not using position absolute at the time, these would not have been taken out of the flow from the rest of the page content.

Thanks. Sorry if my previous comment was a bit short and rude

[dsonesuk]

So A Non verfied user, can use someone elses account, but have their username appear with your account posting??? did not know you could do that!

Edited May 29, 2012 by dsonesuk

[Drewza1243]

So A Non verfied user, can use someone elses account, but have their username appear with your account posting??? did not you could do that!

Sorry, didn't consider that Edit:

Actually the use of padding 50% within ul would have contributed to width problem since it was not using position absolute at the time, these would not have been taken out of the flow from the rest of the page content.

Your solution worked! Thank you so much! Edited May 29, 2012 by Drewza1243