Jump to content

Drop Down Menu From Single Item


Azercii
Go to solution Solved by adam_bray,

Recommended Posts

I've followed a few tutorials, as I've never touched drop down before (more of a conventional navbar guy ;D). 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  :shrug:

 

 

 

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 by Azercii
Link to comment
Share on other sites

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 by Azercii
Link to comment
Share on other sites

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 :/

Link to comment
Share on other sites

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;
Link to comment
Share on other sites

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;
Link to comment
Share on other sites

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 :P

Link to comment
Share on other sites

  • Solution

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>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.