Solved

CSS Dropdown menu

Posted on 2011-09-08
6
234 Views
Last Modified: 2012-05-12
I have created a horizontal dropdown menu with css.  However, I'm not sure how to write the second part of the dropdown.  Instead of the second level dropingdown vertically, I want it to drop down a spread out, inline horizontally under the main menu choices.

<ul>
<li>HOME</li>
</i>About
<ul>
<li>Me</li>
<li>partners</li>
<li>Friends</>
</ul>
</li>
</ul>

Open in new window


Does that make sense?
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
6 Comments
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 36504420
give
ul li ul li
{
   list-style-type:none;
   float:left;
   width:60px;
}
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36504509
I try not to reinvent the wheel when I don't have to.  Have you seen Suckerfish menus? The examples are at the very bottom of the page. Fully tested, compliant and very easy to implement.
0
 
LVL 7

Author Comment

by:rgranlund
ID: 36506054
@LZ1 There was not 1 example on that page that refers to the type of menu style I am trying to create.  Did I miss something?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 40

Expert Comment

by:gurvinder372
ID: 36506156
did you tried my suggestion?
0
 
LVL 29

Expert Comment

by:Badotz
ID: 36506945
A quick Google search will turn up hundreds (thousands? millions?) of cross-browser, debugged menus.

If you're a jQuery fan, you have perhaps hundreds more from which to choose.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36509827
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to make footer stick to bottom 9 53
CSS style formatting? 2 35
CSS in HTML 5 52
tiled banner 2 12
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

749 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