Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS Dropdown Menu

Posted on 2013-01-23
3
Medium Priority
?
242 Views
Last Modified: 2013-02-13
I'm normally really good at this but for some reason, I can't get it to work correct.
I have a vertical menu.  At the first ul ul I need <li>to drop straight down and push all of the other menu choices down. However, at the third ul /  <ul><ul><ul> I need the li's to push out to the right.  Can someone give me the brief CSS to make this happen.

<ul>
	<li>ONE</li>
	<li>TWO	
		<ul>
			<li>TWO A</li>
				<ul>
					<li>TWO B</li>
					<li>TWO BB</li>
					<li>TWO BBB</li>
				</ul>
			<li>TWO AA</li>
		</ul>
	</li>
	<li>THREE</li>
	<li>FOUR</li>
</ul>

Open in new window

0
Comment
Question by:rgranlund
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38811142
You are not showing the CSS so I will have to make a guess.  The part that needs to push out to the right needs either display:inline or display:inline-block


Cd&
0
 
LVL 7

Author Comment

by:rgranlund
ID: 38811215
This is all I have.  Can you add a littl more to it so the first level drops down and then the next goes out to the right?

nav ul	{
	display:block;
	width:140px;
	padding:11px 0px 13px 0px;
}

nav li	{
	width:140px;
	display:inline;
	list-style:none;
}


nav ul li a	{
	height:10%;
	padding:0% 0% 0% 5%;
	color:#908f8f;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	text-decoration:none;
	display:block;
}

nav ul li a:hover	{
	color:#ffffff;
}

nav ul ul  {
visibility:hidden:
}

Open in new window

0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 38811766
nav ul ul ul>li {display:inline;}

perhaps.  It would probably easier if you posted a link so I could play with it.

Cd&
0

Featured Post

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

597 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question