Creating a vertical dropdown menu that displays inline

I would like to change how my dropdown menu displays. First I'd like for it to dropdown directly underneath its menu item and in the process move the other links down. And remain visible until it is clicked again, thereby shifting other links back up.
Here is what I am trying to accomplish:
Main menu:
main link 1
main link 2
main link 3
main link 4
Then when user clicks on a link:
main link 1
   sub item
   sub item
   sub item
main link 2
main link 3
main link 4
And for it to remain displayed like the above until clicked again.
So in essence it could even look like this as a user is navigating:
main link 1
   sub item
   sub item
   sub item
main link 2
   sub item
   sub item
   sub item
main link 3
   sub item
   sub item
   sub item
main link 4
   sub item
   sub item
   sub item
And then each submenu disappear as its main link is clicked again.
Hope this makes sense and hope someone can help.
Thanks!
P.S. Im using Dreamweaver CS6

Bare bones example: (needs styling with css) (if you want a bit more of a smooth animation use - $(this).find('.sub_menu').slideToggle(); instead of $(this).find('.sub_menu').toggle(); in the jQuery script below highlighted in red
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Drop Down Menu</title>
<style type="text/css">
ul {
margin:0;
padding:0;
list-style-type:none;
/* hide sub menu */
.sub_menu {
display: none;
    /* indent sub menu */
.sub_menu li {
padding-left: 10px;
        </style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.menu').click(function() {
$(this).find('.sub_menu').toggle();
</script>
</head>
<body>
<ul id="navigation">

<li class="menu"><a href="#">Menu 1</a>
<ul class="sub_menu">
<li><a href="#">Sub Navigation 1</a></li>
<li><a href="#">Sub Navigation 2</a></li>
<li><a href="#">Sub Navigation 3</a></li>
</ul>

</li>
<li class="menu"><a href="#">Menu 2</a>
<ul class="sub_menu">
<li><a href="#">Sub Navigation 1</a></li>
<li><a href="#">Sub Navigation 2</a></li>
<li><a href="#">Sub Navigation 3</a></li>
</ul>

    </li>
<li class="menu"><a href="#">Menu 3</a>
<ul class="sub_menu">
<li><a href="#">Sub Navigation 1</a></li>
<li><a href="#">Sub Navigation 2</a></li>
<li><a href="#">Sub Navigation 3</a></li>
</ul>
    </li>
</ul>
</body>
</html>

Similar Messages

On G4 System Preferences, Network, I have a dropdown menu that says that my settings have been altered by another application and won't go away when I click ok, I can't work in the Network preferences and it won't respond to be closed. Have to Force Quit

On G4 Powerbook System Preferences, Network, have a dropdown menu that says this has been configured by another application. when press OK it keeps coming on & can't work in System Preferences. It won't even respond to Quit System Preferences and I have to Force Quit to close System Pref.
Any ideas?

Look at this link. http://discussions.apple.com/thread.jspa?messageID=9372513
I did BDAqua's suggestion
To stop the pop-up, Go to System Preferences: Security. Check the box next to "Require password to unlock each secure system preference." Then lock Security.
 Cheers, Tom

Create Object dropdown menu not displaying

Hi Guru's,
We are facing an issue with our Oracle WCI 10gR3 portal.
We have got several community administrator groups to which community administrators are added. These groups have activity rights like create portlets, create snapshot query, etc associated with them, which enable the different community administrators to create thier own community objects.
This was working fine until somedays back, however we noticed that now, if we add a person to one of these community administrator groups, the CREATE OBJECT drop down menu does not appear under Administration section for the community administrators.
Please can someone help us with this as we are facing severe flak from the community administrators.

off the top of my head check to make sure that the group has rights on that folder. if they do not have admin rights on that admin folder they will not see the create objects dropdown...try that and post a reply.

CSS - Vertical Dropdown Menu

Hey guys.
I need the CSS for a vertical menu much like the one on the
Adobe Homepage under 'Products and
Solutions' where more data is revealed when the title is scrolled
over.
If anybody has links to a tutorial or even have one of these
menus I could possibly have a look at it would be much appreciated.
Cheers in advance.

Hello,
This is a nice CSS dropdown menu tutorial:
http://projectseven.com/tutorials/navigation/auto_hide/index.htm
And another:
http://www.tjkdesign.com/articles/dropdown/
example of menu:
http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp
Take care,
Tim
"ForensicBop" <[email protected]> wrote in
message
news:g54p5j$nke$[email protected]..
> Hey guys.
>
> I need the CSS for a vertical menu much like the one on
the Adobe homepage
> under 'Products and Solutions' where more data is
revealed when the title
> is
> scrolled over.
>
> If anybody has links to a tutorial or even have one of
these menus I could
> possibly have a look at it would be much appreciated.
>
> Cheers in advance.
>

How do I create a vertical side menu with its own styling separate from the horizontal bar above it?

Hello. I need assistance in styling my side menu. I would like for it to have a different style than the horizontal bar that is above it. I would like that the side menu have a black background and with white text vertically aligned to the left. But I would also like that the mouse's arrow to turn into a hand when it touches the letters instead of during the entire width of the background. When I began styling the text, everything aligned fine until I added the links in html code. When I added the <a> tag and created a link to another page, the text goes from the left to the center of the black box. And the entire width is a link rather than just the words. To correct this, I tried renaming the div tag containg the menu. I tried renaming the ul tag. And I tried renaming the li tag and changing the declarations. None of these ideas worked. I thought about changing the <a> tag in the head of the document, but that didn't change the styling either. I also tried creating the black background by inserting a black box as a background image with the links over top of the image. It didn't work. I would appreciate your assistance.   I will supply the coding if anyone is interested in looking at it. Thank you.
Nora.

I can post a link to the page. But I will need to upload it. It will take a day to show. But after I wrote to you. I began working with creating additional a:link styles. I was able to create a shortened clickable area of one the words in the vertical menu. Your advice reinforced what I have learned. The following code shows that I started to make different styles of the a:link for each word on the vertical menu. I think that this will work. To indicate the different a:link style I used bold letters . Thank you very much.
html:
<div class="side_menu_nav">
     <ul class="side_menu">
          <li class="side_menu"><a href="still image.html">STILL IMAGE</a></li>
          <li class="side_menu_video"> <a href="video.html">VIDEO</a></li>
          <li class="side_menu" ><a href="animation.html">ANIMATION</a></li>
          <li class="side_menu" ><a href="website.html">WEBSITE</a></li>
     </ul>
</div>
CSS:
.side_menu_nav {
    margin-top: 100px;
    width: 190px;
    height: 230px;
    background-color: #F63;
    font-size: 18.5px;
    z-index: 5;
    font-family: Arial, Helvetica, sans-serif;
side_menu ul {
    list-style-type: none;
    padding-left: 10px;
side_menu li {
    display: list-item;
.side_menu a:link {
    text-align: left;
    color: #FFF;
    background-color: #000;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 190px;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 0px;
    text-decoration: none;
    width: 120px;
.side_menu_video a:link {
   text-align: left;
    color: #FFF;
    background-color: #000;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 65px;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 0px;
    text-decoration: none;
.side_menu a:visited {
    color: #FFF;
    background-color: #000;
.side_menu a:hover {
    color: #CCC;
.side_menu a:active   {
    color: #000;/*text*/

How to create a persona header bar that displays correctly in all resolutions - Firefox 20 Linux

I'm in the process of learning how to create Personas for Firefox, and have already created one which I am using locally, but I ran into an unexpected behavior: If I create a header bar that is 3000 X 200 pixels as specified in the guidelines, only the right third or so displays in my browser when the theme is applied. To get this header to display "properly" (as I find aesthetically pleasing) I have to resize the header to 1280 X 85 pixels.
Should not the header bar scale automatically, or do I need to produce a persona header at each possible resolution width to get it to display properly?
For what it's worth, the footer appears to be displaying the left hand third, but this is not so objectionable in this case.
A screenshot of the persona is available at http://www2.netdoor.com/~horus/Persona_2013-04.png.
Thanks for any insights. I feel as though I must be misunderstanding something here.
(I tried to post troubleshooting information the first time, but it overflowed the character limit...)

Probably best to ask that sort of question, or research the answer in one of the AMO forums ('''A'''ddons '''Mo'''zilla). I think this one may be appropriate:
* https://forums.mozilla.org/addons/viewforum.php?f=30
** I think you will need to register before posting
I am wondering where are you doing the learning ?
<br />There are also resources on MDN
*https://developer.mozilla.org/en-US/addons
Detailed discussion of the subject is probably off topic for this forum, but linking to resources or giving as imple answer is not so I hope some of the above are helpful. (You may even find someone else interested and knowledgeable posting a direct answer)

I have this weird right-click popup menu that displayes all of the options for FF:

So sometimes when I right-click my mouse button this popup menu with all the options possible comes up... I have a picture if you need.
P.S. It's not an addon or plugin; this happens to my friends computers and new Firefox installations too.

This issue can be caused by an extension (Tools > Add-ons > Extensions).
Start Firefox in [[Safe Mode]] to check if one of your add-ons is causing your problem (switch to the DEFAULT theme: Tools > Add-ons > Themes).<br />
See [[Troubleshooting extensions and themes]] and [[Troubleshooting plugins]]
If it does work in Safe-mode then disable all your extensions and then try to find which is causing it by enabling one at a time until the problem reappears.
You can use "Disable all add-ons" on the [[Safe mode]] start window to disable all extensions.
You have to close and restart Firefox after each change via "File > Exit" (Mac: "Firefox > Quit"; Linux: "File > Quit")

Best way to do a dropdown menu?

i've been exploring using a spry tooltip and collapsible
panel, not sure what is best and easiest to have a vertical
dropdown menu that opens when your mouse runs over a tab and closes
when your mouse goes off the tab, but remains open while you are
scrolling though the menus under the tab and opens and closes in
the same location regardless of where your mouse runs over the tab.
example of what i want:
Anthropologie.com
(the "new", "clothes", "loungewear", etc. at the top of the page)
how do i do this?

>i don't understand how to use these links.
Click on them. Read and study the page(s) they take you to.
>>what to i do with the code? how do i know where it
goes?
Sounds like you may be getting ahead of yourself. Start with
the basics. IOW
learn HTML & CSS. Here's a good start:
http://www.peachpit.com/bookstore/product.asp?isbn=0321430840&rl=1
http://www.sitepoint.com/books/design1/?SID=b8ccb8757daf84bf0b3b2ae4414031a2
http://www.sitepoint.com/books/html1/
>>what do you mean the project seven is paid for?
Most of P7's stuff are commercial extensions, meaning you
need a credit card
or PayPal account.
>>how do i get it for free?
You CAN'T get the commercial extensions for free but P7
offers some great
free tutorials so you can build your own.
Walt
"aestruth" <[email protected]> wrote in
message
news:gp5u6g$6sh$[email protected]..
>i don't understand how to use these links. what to i do
with the code? how
>do i know where it goes? and what do you mean the project
seven is paid
>for? how do i get it for free?

How do i create a drop-down menu in SharePoint that redirects to a new page?..

Helly everyone, i have a question and really hope someone can help me out here:)
In SharePoint i want to create a drop-down menu that has the possibelty to redirect to other websites.
I fount the code below and it works but just not in SharePoint:(
It only shows the drop-down list but it doesn't redirect you to another website if you click on a site.
Can someone please help me out because it's really getting frustrating.
<form method="post" action="" name="">
<select name="select15" onChange="window.open(this.options[this.selectedIndex].value,'_parent')">
<option selected>Please Select Site to Visit</option>
<option>---------------------------------------------------</option>
<option value="http://leedssocialclubs.co.uk">Leeds Social Clubs </option>
<option value="http://yahoo.co.uk">Yahoo </option>
<option value="http://msn.com">MSN </option>
<option value="http://Moonfruit.com">Moonfruit </option>
<option value="http://burystaffhire.moonfruit.com/#/home/4548482603">Bury Staff Hire</option>
</select>
</form>

<form>
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
<option value="">Choose a site</option>
<option value="http://webdesign.about.com/">Web Design Front Page</option>
<option value="http://webdesign.about.com/library/beginning/bl_begin.htm">
Beginning HTML</option>
<option value="http://webdesign.about.com/od/javascript/">JavaScript Help</option>
</select>
</form>
Demo url
http://webdesign.about.com/od/examples/l/blfaqddredirect.htm
script url
http://webdesign.about.com/od/javascript/a/aa050701a.htm
For me it is working fine

Spry Dropdown Menu properties hidden

I am trying to create a spry dropdown menu but cannot see the light blue menu thing that you click on to edit the spry menu, and so therefore cannot edit it. It should pop up when you hover over the spry menu in design view but I get nothing. Please help

See if this works:
Place your cursor inside on of the menu items, look at the tag above the Property Inspector and you'll see the <ul.MenuBarHorizontal#MenuBar1> tag.
(if it's a vertical menu, it'll say vertical instead of horizontal :-)
Click on the tag - does the editing box for the menu then show up?

Home Sharing Problem: Import Button & "Show" Dropdown menu are missing?

Hi Everyone,
My wife and I are both running iTunes on Macbook Pros and we are both logged into eachother's iTunes libraries through Home Sharing accounts. However, the Import button on the bottom has disappeared, so has the "Show" dropdown menu that is typically to the left of the Import button on the bottom of the screen when you are in the other person's Music Library. The Show dropdown memu typically displays the options: All and Not in Library. We can play and listen to each other's music, however we can't Import songs. Can anyone help me troubleshoot this problem??
Thanks,
Patrick

To clarify as I have this problem repeatedly here is the description and the cure.
Sharing is enabled in the sharing tab. Other computers can see this computers library but cannot import. The icon for the home sharing doesn't show the "house" - it just shows some musical notes.
This means that home sharing is not enabled. JUST SHARING.
In Itunes 11 use: File/Menu/Home Sharing/Turn on Home sharing.
But you are not done.
When home sharing shows up now in the left panel - click it. The right panel will present a sign on for your apple ID. Sign on and enable home sharing.
Then you will be able to import form the target computer again.
It gets disabled with OS upgrades and sometimes with iTunes updates.

How to create a Pop-up menu for an Applet

I need to create a Pop-up menu that works like this:
When the user move his mouse over the applet, the menu will pop up, extending beyond the bounds of the applet.
In other words: The applet will display only the menu headings - a mouse-over should cascade a menu beneath the heading - once again: beyond the bounds of the applet.
(Hopefully, the end result will look and work pretty much like a DHTML menu that uses <div>'s.)
I thought of popping up a JFrame to act as the menu - however, the JFrame has its own title bar.
Any ideas!?

OK - I tried using a JMenuBar - and it does cascade out of the Applet box. The question is:
How do I close the menu without clicking on the Applet box? - i.e. if the user clicks on the web-page, or simply waits a second or 2, the menu should collapse?
Any ideas?

Ctrl Click for dropdown menu crashes finder...

Every time I control click lately, to get the dropdown menu that has items in it like, new window etc... the finder crashes. Any advice?

First thing to try is to open Disk Utility (in Applications>Utilities) and click on the hard drive on the left, then 'Repair Permissions'. This process can take a few minutes, and may report a few items resolved. It has been known for faulty permissions to cause idiosyncratic system behavior.
If that doesn't work, download a copy of Preferential Treatment from www.versiontracker.com. and run it on both system-wide and user levels. This will flag if you have any problems with property list (.plist) files which can also cause this sort of issue.
If that doesn't help, create a new user account and long on to that. Does the problem then disappear?

How to get all the values from the dropdown menu

How to get all the values from the dropdown menu
I need to be able to extract all values from the dropdown menu; I know how to get all those values as a string, but I need to be able to access each item; (the value in a dropdown menu will change dynamically)
How do I get number of item is selection dropdown?
How do I extract a ?name? for each value, one by one?
How do I change a selection by referring to particular index of the item in a dropdown menu?
Here is the Path to dropdown menu that I'm trying to access (form contains number of similar dropdowns)
RSWApp.om.GetElementByPath "window(index=0).form(id=""aspnetForm"" | action=""advancedsearch.aspx"" | index=0).formelement[SELECT](name=""ctl00$MainContent$hardwareBrand"" | id=""ctl00_MainContent_hardwareBrand"" | index=16)", element
Message was edited by: testtest

The findElement method allows various attributes to be used to search. Take the following two examples for the element below:
<Select Name=ProdType ID=testProd>
</Select>
I can find the element based on its name or any other attribute, I just need to specify what I am looking for. To find it by name I would do the following:
Set x = RSWApp.om.FindElement("ProdType","SELECT","Name")
If I want to search by id I could do the following:
Set x = RSWApp.om.FindElement("testProd","SELECT","ID")
Usually you will use whatever is available. Since the select element has no name or ID on the Empirix home page, I used the onChange attribute. You can use any attribute as long as you specify which one you are using (last argument in these examples)
You can use the FindElement to grab links, text boxes, etc.
The next example grabs from a link on a page
Home
Set x = RSWApp.om.FindElement("Home","A","innerText")
I hope this helps clear it up.

How to get rid of the line encasing the left hand side of a vertical spry menu?

Hi,
I have created a vertical spry menu bar. It all works but there is a line like this [ encasing the left hand side of the menu. Does anyone know how to get rid of this?
Thanks!

Line 73 in your Spry css calls for a border
ul.MenuBarVertical{
border: 1px solid #ccc;
Either remove the rule or change the #ccc to #fff

Creating a vertical dropdown menu that displays inline

Similar Messages

Maybe you are looking for