How can I create a rollover drop down menu from a link in Dreamweaver CS5?

Hello all,  I am working on a portfolio website and I was just wanting to know if there is any way that I can create a drop down menu from a text link that cascades once the cursor has made contact with the link. I would like to have it in my navigation bar where the Portfolio link is. Basically, my navigation bar looks like this : Home | Resume | Portfolio | Contact. I only want three items on the drop down menu beneath the portfolio link: Traditional Art, Photography, Graphic Design. I would really appreciate any help I can get! Thanks!

Have a look at what Nancy does http://alt-web.com/DEMOS/CSS-Horiz-menu-2.shtml

Similar Messages

  • How can change background color of drop down menu navigation?

    Hi,
    I am using multi level drop-down-navigation menu in my website.
    I am get good drop-down menu from htmldrive.net, but problem is how can change menu background color black to other colors.
    please help me
    Link & code is given below
    http://www.htmldrive.net/items/demo/913/Multi-Level-Drop-Down-Menu-Navigation-with-CSS3
    HTML Code
    <div id="nav">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our Portfolio</a></li>
    <li><a href="#">One Dropdown</a>
            <ul>
            <li><a href="#">Level 2.1</a></li>
            <li><a href="#">Level 2.2</a></li>
            <li><a href="#">Level 2.3</a></li>
            <li><a href="#">Level 2.4</a></li>
            <li><a href="#">Level 2.5</a></li>
            </ul>
    </li>
    <li><a href="#">Three Levels</a>
            <ul>
            <li><a href="#">Level 2.1</a></li>
            <li><a href="#">Level 2.2</a></li>
            <li><a href="#">Level 2.3</a>
                    <ul>
                    <li><a href="#">Level 2.3.1</a></li>
                    <li><a href="#">Level 2.3.2</a></li>
                    <li><a href="#">Level 2.3.3</a></li>
                    <li><a href="#">Level 2.3.4</a></li>
                    <li><a href="#">Level 2.3.5</a></li>
                    <li><a href="#">Level 2.3.6</a></li>
                    <li><a href="#">Level 2.3.7</a></li>
                    </ul>
            </li>
            <li><a href="#">Level 2.4</a></li>
            <li><a href="#">Level 2.5</a></li>
            </ul>
    </li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    CSS CODE
    #nav {
            float: left;
            font: bold 12px Arial, Helvetica, Sans-serif;
            border: 1px solid #121314;
            border-top: 1px solid #2b2e30;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            overflow: hidden;
    #nav ul {
            margin:0;
            padding:0;
            list-style:none;
    #nav ul li {
            float:left;
    #nav ul li a {
            float: left;
            color:#d4d4d4;
            padding: 10px 20px;
            text-decoration:none;
            background:#3C4042;
            background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
            background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
            background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
            border-left: 1px solid rgba(255, 255, 255, 0.05);
            border-right: 1px solid rgba(0,0,0,0.2);
            text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
    #nav li ul {
            background:#3C4042;
            background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
            background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
            background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
            border-radius: 0 0 10px 10px;
            -moz-border-radius: 0 0 10px 10px;
            -webkit-border-radius: 0 0 10px 10px;
            left: -999em;
            margin: 35px 0 0;
            position: absolute;
            width: 160px;
            z-index: 9999;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
            -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
            -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
            border: 1px solid rgba(0, 0, 0, 0.5);
    #nav li ul a {
            background: none;
            border: 0 none;
            margin-right: 0;
            width: 120px;
            box-shadow: none;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            border-bottom: 1px solid transparent;
            border-top: 1px solid transparent;

    Change this:
    .ddsmoothmenu{
    font: bold 12px Verdana;
    background: #414141; /*background of menu bar (default state)*/
    width: 100%;
    to this:
    .ddsmoothmenu{
    font: bold 12px Verdana;
    background: #new color code;
    width: 100%;
    And repeat this on other selectors.
    Nancy O.

  • How do I remove the autocomplete drop-down menu from textboxs, not the awesome bar?

    I like having the drop-down menu from the url, but the autocomplete option for textboxs within like when I type my username and it pops up with all of the ones that has been used on that site are really annoying. How do I get rid for the latter? I didn't have this before I upgraded to Firefox, and now I can't get rid of it. Fyi, I'm rather tech inept, don't use complicated comp sci words please!

    You can use History > 'Clear Recent History" to clear already saved form data.
    *https://support.mozilla.org/kb/Clear+Recent+History
    Use these steps to remove saved (form) data from a drop down list:
    #Click the (empty) input field on the web page to open the drop down list
    #Highlight an entry in the drop down list
    #Press the Delete key (on Mac: Shift+Delete) to remove it.
    *http://kb.mozillazine.org/Deleting_autocomplete_entries
    See also "Prevent Firefox from automatically completing URLs":
    *https://support.mozilla.org/kb/search-your-bookmarks-history-and-tabs-awesome-bar

  • How can I do an animated drop down menu in Adobe Edge Animate?

    Hi everyone! well, it's easy to create a whole animated (fade color and opacity) navigation buttons menu in Edge Animate with rollover and rollout actions, but thing get too messy when try to make an animated drop down menú. How can I do this process more easy?
    Thanks!
    Néss.

    One useful video : http://www.adobe-edge-forum.com/2012/01/adobe-edge-html5-interactive-drop-down-menu-tutori al/
    But glad to know it worked for you.
    Thanks and Regards,
    Sudeshna Sarkar

  • How can I get the airport drop down menu to allow me to enter a WPA2 Personal Password

    Powerbook G4, with Airport Card firmware 9.52. Through the System Preferences, Network, using the "edit" button, I can enter a WPA2 Personal password, but when I go to connect to the network, the drop down menu only allows me to enter a WEP Password.  And, obviously, I get an error message saying I have the wrong password. Why can I use WPA2 in the system preferences, but the airport menu doesn't then allow me to enter a WPA2 password to connect?

    Try Connect to Other... from the Airport menu.

  • How do I create a drop down menu with Code Snippets and Flash CS5?

    Hi
    I am wondering how to create a drop down menu using the Code Snippets and CS5?
    There are some older tutorials out there and it would be nice if someone could create an updated drop down menu tutorial, and it might be me doing this after I have figured out the best and easiest way to create one, but before that I need some pointers.
    Thanks!
    Have a great day!
    Paal Joachim

    You can use panel widget to create manual menu where set to show target on rollover.
    Something like this :
    http://muse.adobe.com/exchange-library/menu-vertical-accordion-widget-1
    http://muse.adobe.com/exchange-library/tiptop-navigation-menu
    Thanks,
    Sanjit

  • How can I display images in drop down.

    Hi All,
    How can I display images in drop down.
    <select><option>image here</option></select>
    please reply soon.
    anser please
    Thanks

    I have not found html forum..That's just incredible.
    where can i find it ?Sorry, I'm still recovering from that remark.
    please reply soonEvery time you end a post with this, or "urgent" or other such keywords, the forum automatically introduces a 5 minute delay so that will actually make the whole process slower (not faster).

  • How can I enable the automated drop down for the subject line on the email page

    How can I enable the automated drop down for the subject line on the email page as I send more than 300 emails everyday with the same subject line. Before it use to happen in my gmail account but now its not. Please help me as its increasing my work time because I have to type the subject line again and again on each email I send. Please help me guys.

    This is usually caused by one or more bookmarks having a long title.
    You can check that folder in the Library and shorten long names.
    * Bookmarks > Show Al Bookmarks
    *Bug 626066 - History, Bookmarks menus too wide because of pages with long titles on 64bits
    <i>Please do not comment in bug reports: https://bugzilla.mozilla.org/page.cgi?id=etiquette.html</i>

  • How do I reset the font drop-down menu?

    In the font drop-down menu, all used fonts are listed on top of the rest. Now I got a long pile of used fonts, but only two fonts among them are most frequently used, and I want to keep only these two on top of the drop-down menu. How do I reset the list (clear the history)? Thanks.

    Mine shows only the last 6 used fonts. Note that you can option click the fonts drop down menu to show them only by name, without their preview, thus saving you some space.

  • How do I get the complete drop down Menu?

    How do I get the complete drop down menu when I CTRL-Mouse click a folder. I am getting MORE in the bottom, and I need it to be removed.
    Thanks

    The "More" area in the contextual menu's are bothering quite a few people. It's a feature of Leopard and can't be removed. There may be a hack available, but I'm waiting for some help from Apple...
    It reminds me of the Personalized menu's that Microsoft enables by default in some versions of MS Office for Windows. And it's a feature that I turn off immediately after installing Office for a client.
    Two steps forward, One Back.

  • HT5622 How can I create an Apple ID for my child without linking it to a credit card?

    How can I create an Apple ID for my child without linking it to a credit card?

    Hi Kappy..
    that did use to be the case but ios 8 you can create a child's Apple ID which will stay linked to the main Apple ID until they are 13 when they can if you wish take over the Apple ID themselves.
    I Have the same question regarding creating an Apple ID for my son but it insists I have to add a credit card to prove I'm an adult.
    thing is I don't have another card to add to my Apple ID I have been using the same card for all my family's Apple purchases i just update my details when I get issued a new one.
    Any ideas or suggestions greatly accepted.
    cheers

  • How can I create a master PDX that pulls from multiple other PDXs?

    I process aviation maintenance manuals, with the individual manuals having their own PDX. How can I create a master PDX that pulls from the individual PDXs?
    I have access to myriad versions of Windows and Acrobat so there's that...

    I’ve got 100s of manuals each with their own PDX. I’ve been asked to create a master PDX that in effect combines all of the individual PDXs into a single (cross-manufacturer, cross-fleet, cross-manual-type) searchable PDX that can be easily updated.

  • How to import excel list into drop down menu in acrobat pro DC

    Does anyone know if an excel list of 527 items can be imported into a drop down menu in adobe acrobat DC? I am on a mac v10.10.

    I would convert the Excel worksheet into a tab delimited file. Edit that file in a text editor, not Word, into a list that meets the formatting for the array for the setItems. method. Then add the code to use that array to set the items for the drop down field. So you have something like:
    var MyItems = new Array("One", "Two", "Three");
    this.getField("Dropdown1").setItems(MyItems);
    You can then cut and paste this into the JavaScript console, highlight text and execute the text. Or cut and paste the code into a document level JavaScript.

  • Dynamic Drop Down Menu from an Access Database

    Hello Everyone,
    I am user Adobe Designer 7 to create a fillable PDF, and I would like to get the options for a drop down menu from my MS Access database. Basically I would like to populate the drop down menu with the names in the Access database. There i Have a table called PhoneNumbers and it contains the names of all the people I want to appear in the drop down menu that I just created.
    This is what I did:
    I created a drop down menu and then I clicked on Object > Binding > under "Default Binding (Open, Save, Submit)" choose "New Data Connection"
    then connect to the database using a fileDSN. I opened the table where with the "names" column (PhoneNumbers)
    and under the "Query," option, I wrote:
    select * from PhoneNumbers
    Then it gave me all the fields from the table and I dragged the "Last name" field over the drop down menu. I will need to find a way to get the "First Name" field to join the Last Name field to create one name that looks like this: Hill, Angie
    The problem is that even though it shows the name from the Access database, it does not give me a list of all the names when I open the form in Reader 7...
    No matter how much I click that drop down arrow, the name does not change...
    It's almost as if it gets to the databse and gets the data from the database, but it cannot loop through it...
    It's almost as if it's missing the code to loop through it...
    Why is this? Any ideas how to fix it so it gives me a list of ALL the names, when I click on the drop down button?
    After that, how can I add the first name to it?
    The form would look like this:
    Angie H. 202 641 2055
    Right now it does look like that, but I cannot change to another name when I click the drop down menu. For the code to be working when I change to another name, the phone number also changes to the phone number of that person:
    Barry S. 703 555 1258
    The name is in a drop down menu, the phone number is in a textbox.
    Can you help me with this?

    ANGELA,<br /><br />Well, the good new is that you are not far off...What you need is to insert the following code using Java Script under the Initialize function.  Just replace the Connection name,  The Hidden Value, and the Display Text with your information.  This is a function is 8.0 but will work with 7.0<br /><br />/*     This dropdown list object will populate two columns with data from a data connection.<br /><br />     sDataConnectionName - name of the data connection to get the data from.  Note the data connection will appear in the Data View.<br />     sColHiddenValue      - this is the hidden value column of the dropdown.  Specify the table column name used for populating.<br />     sColDisplayText          - this is the display text column of the dropdown.  Specify the table column name used for populating.<br /><br />     These variables must be assigned for this script to run correctly.  Replace <value> with the correct value.<br />*/     <br /><br />var sDataConnectionName = "DataConnection";     //     example - var sDataConnectionName = "MyDataConnection";<br />var sColHiddenValue = "CAT_Corp_SeqNo";               //     example - var sColHiddenValue = "MyIndexValue";<br />var sColDisplayText = "CAT_Corporate";               //     example - var sColDisplayText = "MyDescription"<br /><br />//     Search for sourceSet node which matchs the DataConnection name<br />var nIndex = 0;<br />while(xfa.sourceSet.nodes.item(nIndex).name != sDataConnectionName)<br />     {<br />          nIndex++;<br />     }<br /><br />var oDB = xfa.sourceSet.nodes.item(nIndex);<br />oDB.open();<br />oDB.first();<br /><br />//     Search node with the class name "command"<br />var nDBIndex = 0;<br />while(oDB.nodes.item(nDBIndex).className != "command")<br />     {<br />          nDBIndex++;<br />     }<br /><br />//     Backup the original settings before assigning BOF and EOF to stay<br />var sBOFBackup = oDB.nodes.item(nDBIndex).query.recordSet.getAttribute("bofAction");<br />var sEOFBackup = oDB.nodes.item(nDBIndex).query.recordSet.getAttribute("eofAction");<br /><br />oDB.nodes.item(nDBIndex).query.recordSet.setAttribute("stayBOF", "bofAction");<br />oDB.nodes.item(nDBIndex).query.recordSet.setAttribute("stayEOF", "eofAction");<br /><br />//     Clear the list<br />this.clearItems();<br /><br />//     Search for the record node with the matching Data Connection name<br />nIndex = 0;<br />while(xfa.record.nodes.item(nIndex).name != sDataConnectionName)<br />     {<br />          nIndex++;<br />     }<br />var oRecord = xfa.record.nodes.item(nIndex);<br /><br />//     Find the value node<br />var oValueNode = null;<br />var oTextNode = null;<br />for(var nColIndex = 0; nColIndex < oRecord.nodes.length; nColIndex++)<br />     {<br />          if(oRecord.nodes.item(nColIndex).name == sColHiddenValue)<br />          {<br />               oValueNode = oRecord.nodes.item(nColIndex);<br />          }<br />          else if(oRecord.nodes.item(nColIndex).name == sColDisplayText)<br />     {<br />          oTextNode = oRecord.nodes.item(nColIndex);<br />     }<br />}<br /><br />while(!oDB.isEOF())<br />{<br />      this.addItem(oTextNode.value, oValueNode.value);<br />       oDB.next();<br />}<br /><br />//     Restore the original settings<br />oDB.nodes.item(nDBIndex).query.recordSet.setAttribute(sBOFBackup, "bofAction");<br />oDB.nodes.item(nDBIndex).query.recordSet.setAttribute(sEOFBackup, "eofAction");<br /><br />//     Close connection<br />oDB.close();

  • Ichat drop down menu from menu bar shows up in the wrong place.

    I'm not sure how this happened, but for some reason, ever since I've moved to college, my Ichat drop down menu from the menu bar shows up on the left side of my screen, and you can only see half of the menu. I don't know how to fix this problem so if anyone could help me out that would be great.
    Sincerely,
    Cody Martin

    Yep.
    Go to the Buddy List Status Message and option the Edit option.
    Delete that Status Message that you have that is over 42 characters.
    Ones of about 60 or more will introduce the "Left Shift" (And the fact the drop Down may line up with the right hand edge of the Menu Bar icon on in-between lengths)
    In Snow Leopard it is possible to have a Long Message that displaces the Drop Down Off Screen.
    The other factor is the order of the Menu Bar Icons on that side of the Screen
    The iChat one can be Dragged if you use the Apple (CMD) key.
    If the Drop Down can not fit the message in before the right hand edge of the Screen it will displace.
    Having a Second mac User Account and deciding to Display which mac User is Logged in can give you some extra "space"
    3:24 PM Sunday; October 11, 2009

Maybe you are looking for