Drop Down Menu From Single Item

[Azercii]

I've followed a few tutorials, as I've never touched drop down before (more of a conventional navbar guy ). But none are dropping the nested list  . I even took the code from one, no changes made, and it still didn't drop the menu 

 

 

 

This is as far as I got on this tutorial (http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu) before coming here

#topbar-navigation
{
	width: 101%;
	margin: 0 auto;
	;
	margin-top: -8px;
	height: 56px;
	background: #ffffff;
	display: inline-block;
	text-align: center;
	min-width: 1100px;
	-webkit-box-shadow: 0 1px 8px 0px #b5b5b5;
	   -moz-box-shadow: 0 1px 8px 0px #b5b5b5;
	        box-shadow: 0 1px 8px 0px #b5b5b5;
}



#topbar-navigation ul
{
	display: inline-table;
	list-style: none;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	top: 0;
	left: 765px;
	right: 0;
}


#topbar-navigation ul:after
{
	content: "";
	clear: both;
	display: block;
}


#topbar-navigation ul ul
{
	display: none;
}


#topbar-navigation ul li:hover > ul
{
	display: block;
}

	

	
#topbar-navigation ul li a
{
	display: block;
	padding: 25px 40px;
	color: #99a0a8;
	text-decoration: none;
	font-family: 'sinkin_sans400_regular';
	font-size: 12px;
}

<div id="topbar-navigation">
		<a href="index.php"><img src="images/moduniverselogo.png" class="site-logo" draggable="false" /></a>
			<ul>
			<li><a href="#">Welcome, <b style="color:#ff924e" ><?php echo $user->data['username'] ?></b></a></li>
				<ul>
					<li><a href="#">My Profile</a></li>
					<li><a href="#">Edit Account</a></li>
					<li><a href="#">Log Out</a></li>
				</ul>
			</ul>
	</div>

I want it nested to the right like on the site currently: http://i.imgur.com/llZPUbZ.png

Edited June 21, 2014 by Azercii

[adam_bray]

In your first style you have an extra ; that'll mess up what you're expecting. You could also rewrite the margin to

margin: -8px auto 0;

I've written a tutorial on my site for a multi-tiered dropdown menu, this should help - http://www.adam-bray.com/blog/91/easy-html-5-css-3-navigation-menu/

[Azercii]

That ; is a bug with this site, encountered it a few times now. It just removed a line (margin - left -8px ; ) from the style after pasting. So it should be working as far as you can see? I don't understand why the untouched one wouldn't work either :/

Edited June 21, 2014 by Azercii

[Azercii]

Fixed comment after bug happened again

Edited June 21, 2014 by Azercii

[Azercii]

I've written a tutorial on my site for a multi-tiered dropdown menu, this should help - http://www.adam-bray.com/blog/91/easy-html-5-css-3-navigation-menu/

 

That one works! Just playing around with it now, thank you

 

How would I get the menu over to where I want it? I have styling ready for the text placement;

.welcome-user
{
	font-family: 'sinkin_sans400_regular';
	font-size: 12px;
	color: #99a0a8;
	position: absolute;
	margin - left: auto;
	margin - right: auto;
	margin - top: 20px;
	top: 0;
	left: 765px;
	right: 0;
}

But that moves the menu out of screen if I style the UL, styling the A messes with the top bars placement also :/

[adam_bray]

Absolute positioning most probably isn't the answer as it doesn't allow much flexibility at all. Do you have a link to where you're doing this?

 

You don't need to specify margins and padding over 4 rules, you can combine them into 1 rule. There also shouldn't be a space around the -

 

This

margin - left: auto;
margin - right: auto;
margin - top: 20px;

Should be

margin-left: auto;
margin-right: auto;
margin-top: 20px;

But this works better (read up on the web developers compass)

margin: 20px auto 0;

[Azercii]

http://mod-universe.com/

 

 

Username: test

Password: test123

 

 

 

I know the spacing was there because whenever I type margin-left on here, it blanks the entire thing out 

[adam_bray]

Looking through your CSS, I'd change a couple of things.

1. You've set a height on your main container, I presume that's because the background disappears without it. If so, look at using a clearfix
2. You should create a wrapper class that sets a standard width across everything (header, content, footer) -

div.wrapper {
margin: 0 auto;
width: 1000px;
}

1. continued... with the wrapper in place, set the <ul> to float: right;

[Azercii]

With my topbar-navigation inside the wrapper, it breaks the full span of the element. I can see how floating right within 1000px gives me what I'm asking (aside from a little problem after shifting the <ul>'s margin into place)

 

Should I place the menu and site logo into the wrapper separate from the nav itself, with the nav sitting behind it?

 

 

 

Thanks for that heads up on Clearfix! That was why I was calling height, that annoyed me so much but could never explain to Google what was happening

[adam_bray]

I see you've added a single wrapper to your page, the way I'd do it would be to add 2 or 3.

<div id="topbar-navigation" class="clearfix">
	<div class="wrapper">
		<div id="logo"> <!--FLOAT LEFT-->
			<!--LOGO HERE-->
		</div>
		<nav> <!--FLOAT RIGHT-->
			<ul> <!--NO FLOAT-->
				<li>...</li>
			</ul>
		</nav>
	</div>
</div>
<div id="main-container" class="wrapper clearfix">
	<!--CONTENT HERE-->
</div>

[Azercii]

The simplest of methods, how did that slip my mind! 

 

 

Thanks man! Little offset from the href, but I can live with that could you give it one final check?