CSS DropDown Menu style

Hello!

I am trying to create a pull down menu in Dreamweaver. I have watched several tutorials and read many practical guides and my html code looks fine, but the style of editing is really throw me off. I'm a newbie to Dreamweaver, so I'm not sure properties that I need to do this right.  The code below, when I put the cursor on the first button of the menu drop-down goes behind the other two buttons.  I need the dropmenu turns off to the side buttons and down.  If this isn't the case, I can align the buttons to go horizontal, while they are not covered. I hope that makes sense.

Thank you in advance!

M

HTML

< div class= "dropdown" id= "drop" style = "" text-align: left; ">"

< ul >

< li > < a href = "#" > < /a > Americas

< ul >

< li > < a href = "#" > Connecticut < /a > < /li >

< li > < a href = "#" > Ohio < /a > < /li >

< li > < a href = "#" > Vermont < /a > < /li >

< li > < a href = "#" > California < /a > < /li >

< li > < a href = "#" > Canada < /a > < /li >

< li > < a href = "#" > Brazil < /a > < /li >

< /ul >

< /li >

< /ul >

< ul >

< li > < a href = "#" > < /a > China

< ul >

< li > < a href = "#" > China < /a > < /li >

< /ul >

< /li >

< /ul >

< ul >

< li > < a href = "#" > < /a > Europe

< ul >

< li > < a href = "#" > France < /a > < /li >

< li > < a href = "#" > UK < /a > < /li >

< /ul >

< /li >

< /ul >

< / div >

STYLE

#dropdown {
margin: 0;
Width: 150px;
Police-family: Gotham, "Neue Helvetica", Helvetica, Arial, sans-serif;

}

#dropdown ul {
margin: 0;
padding: 0;
line-height: 30px;

}

Li #dropdown {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;

}

#dropdown ul li a {
text-align: center;
height: 30px;
Width: 150px;
display: block;
Color: #000;
text-decoration: none;
border: 1px solid #000;
text-shadow: 1px 1px 1px #000;
background: #CCC;

}
#dropdown ul ul {
position: absolute;
visibility: hidden;
top: 32px;
Police-family: Gotham, "Neue Helvetica", Helvetica, Arial, sans-serif;
}

#dropdown ul li: hover ul {
visibility: visible;
position: absolute;
}

#dropdown li: hover {
background: #7D92C6;
float: left;
}

#dropdown ul li: hover ul li a: hover {
Color: #000;
background: #7D92C6;
}


#dropdown a: hover {
Color: #000;
background: #7D92C6;
}

.clearFloat {
Clear: both;
margin: 0;
padding: 0;
}

I prefer to use HTML5 and the

Tags: Dreamweaver

Similar Questions

  • My message to process is behind my CSS dropdown menu (issue 25)

    Hi all

    Is anyone using the CSS menu drop down with the list of APEX that Scott Wesley gives a tutorial on how to go?  According to the guidelines of this blog: base Oracle: CSS menu using APEX list drop-down

    His departure from here: ultimate Horizontal Drop-Down Menu Demo | Free CSS Menu drop-down framework

    Im running APEX 4.2.4... Ive just crossed to March and updated the application to issue 25. Ive also successfully installed the CSS drop according to the tutorial from Scott... Everything works great and I got to rebuild the application to use with theme 25...

    However, Ive suddenly found that when I get a message error or process jump towards the top of the page as a result of insert/update, or a validation error. , the drop down menu is always on... (i.e. the message box and the content behind the menu..)

    Ive tried to change the regions to my menu list, without success. I guess only he the some CSS is not quite right.

    Ill download a trial on the site, but is anyone using this and hit the same error...?

    For the CSS for the reference excluding images model is:

    <div id="navwrap">
    <ul id="nav" class="dropdown dropdown-horizontal" style="margin-bottom:10px;">

    <style>

    ul {

      list-style-type: none;

    }

    #navwrap {

      float:left;

      width:100%;

      margin-bottom:4px;

      background:#f6f6f6;

      border-style:solid;

      border-color:#d9d9d9 #d9d9d9 #d9d9d9;

      border-width:1px 1px 1px 0;

    }

    </style>

    Thank you very much

    Richard

    Richard Legge wrote:

    Thanks Scott... Now on to the next challenge... Speed up the load Enkitec Navbar, as the unformated menu is located at the corner for a while sometimes... I saw that you can move the files to support for the file system, but I am running with EPG, so I don't think that I can refer to external files...

    What is important is not that the style sheet is stored in the file system, but it is referenced in the page head element (as required by the HTML specification) is available when the browser starts to build the DOM model. You can use an external style sheet located in the APEX or XMLDB repository rather than the file system and refer to this in the page CSS file URL property or the templates or put the rules in the CSS Inline property page template.

    Enkitec vertical list Navbar appears momentarily

    FAC586. Point taken. As always, his maximum weight the chances of the generation of the example on apex.oracle.com vs whether an easy answer...

    I been using CSS for more than 15 years and find that when you use the theme 25 and other new APEX themes here are a few easy answers. Stir in 3 party components and multiple devices and user agents and the possibility of a simple answer is remote. People with the answers do not always have a half hour is detached to reproduce a problem, but can spend 5 or 10 minutes watching an existing example. When it's your problem probably is to you to put the bulk of the effort in fixing it?

  • CSS Dropdown Menu of centering

    Hey guys,.

    I have a little problem.

    I would like to focus my CSS Menu that is placed in a DIV tag so that it is centered below my picture in the header.

    http://jsfiddle.net/UxwQ5/ - here is a jfiddle to take a look.

    If someone could help it would be much appreciated.

    Thank you

    Luke

    CSS in a quick glance:

    {of NAV

    position: relative;

    Width: 1000;  / * Set the width if necessary * /.

    margin: 0 auto;

    padding: 0;

    text-align: center;

    z-index: 1000;

    height: 50;

    }

    NAV ul {}

    margin: 0;

    padding: 0

    }

    nav li {}

    list-style: none;

    do-size: 12px;

    float: left;

    text-align: center;

    do-family: Arial, Helvetica, without serif.

    }

    / * menu of top-level * /.

    nav li a {}

    display: block;

    text-decoration: none;

    right margin: 2px;   / * space between links * /.

    Width: 120px;   / * Adjust according to your needs or use auto * /.

    padding: 8px 15px;

    make-weight: bold;

    line-height: 4;

    color: #506F1A;

    border: 1px solid #FFF;

    Background: #FFF;

    text-align: center;

    }

    / * top menu style on mouse over * /.

    Li: hover NAV > a {}

    background-color: #444;

    color: #fff;

    }

    / * submenu * /.

    nav li ul {}

    display: none;

    text-align: center;

    margin: 0;

    Padding: 1em 0;

    Background: #444;

    Police-weight: normal;

    make-style: oblique;

    }

    / * submenu, help for the older IE * /.

    ul li: hover NAV, nav li.hover ul {}

    display: block;

    position: absolute;

    padding: 0;

    }

    nav li: hover li,

    nav li.hover li {float: none ;}}

    / * drop-down style * /.

    Li li: hover NAV, nav li.hover li a {}

    Width: 10em;  / * Adjust the width according to the needs or use auto * /.

    margin-top: 0;

    line-height: 1.25em;

    Police-weight: normal;

    border: none;

    }

    / * menu style drop down on mouse over * /.

    nav li li a: hover {}

    background: 444;

    color: #fff;

    }

    .nav nav {}

    text-align: center;

    }

    #navigation {of nav

    text-align: center;

    }


    Try adding display: inline-block to your nav ul rule:

    NAV ul {}

    Display: inline-block;

    margin: 0;

    padding: 0

    }

  • CSS Dropdown menu, problems of positioning in IE7

    I created a drop down list using CSS to style links. It appears correctly in Firefox, but level sup links are positioned to the right of the parent link rather than directly below when seen in IE7. For example when I hover over 'News', the drop-down menu the auto position to the right of the 'News' link

    Website: http://sbfl.tmp50.haisoft.net/

    CSS: http://sbfl.tmp50.haisoft.net/templates/sbfl_homepage/css/nav.css

    Thanks for your help.
    Sean

    "seanish" wrote in message
    News:gmv23j$ML1$1@forums. Macromedia.com...
    > I created a drop down list using CSS to style links. He
    > is
    > display well in Firefox, but level sup links are positioned to
    > the
    > law of the mother rather the link directly below seen in IE7.
    > For
    > example when I hover over 'News', the fall down positioned its self to the
    > right
    > the 'News' link
    >
    > Web site: http://sbfl.tmp50.haisoft.net/
    >
    > CSS: http://sbfl.tmp50.haisoft.net/templates/sbfl_homepage/css/nav.css
    >
    > Thanks for your help.

    Try this:

    #mainlevel ul {clear: left ;}}

    --
    Thierry | Adobe Community Expert. Articles and tutorials:
    http://www.TJKDesign.com/go/?0

    Widgets Spry | http://labs.Adobe.com/technologies/Spry/samples/ [click on]
    'Widgets']
    Samples of the Spry menu bar |
    http://labs.Adobe.com/technologies/Spry/samples/menubar/MenuBarSample.html
    --

  • DW6 css dropdown menu help

    eager to create a drop down list using css.  I created this using < ul > and < li > tags, but for some reason he looks right. My html code seems to be OK and I double checked the css and can't seem to find what I did wrong. I chose the tags in a tag to hide, the text is hidden, but the boxes are still displayed.  can someone help a rookie and see what I've done wrong?

    URL is vacationcribs.com

    THX. \

    @bits Mt,

    Please start a new discussion with CSS shadow in your subject line.

    Nancy O.

  • I want to create a 2 cells in demand for numbers, the 1st cell is a dropdown menu with items of text, when choosing an item, that it would be represented by a numeric value in the other cell. How can I do?

    I want to create a 2 cells in demand for numbers, the 1st cell is a dropdown menu with items of text, when choosing an item, that it would be represented by a numeric value in the other cell. How can I do?

    You can use vlookup() like this:

    (1) crate a table like this:

    the first line is a heading row

    the first column contains the same list of items in the context menu

    the second column contains the corresponding values

    name of the table 'value '.

    In another table (where the pop-up menu), you can use the table of choice of 'Value' like this:

    create a drop-down list in cell B1

    Select cell C1 and type (or copy and paste) the formula:

    = VLOOKUP (B1, Value::A:B, 2, 0)

    short hand for this is:

    C1 = VLOOKUP (B1, Value::A:B, 2, 0)

    now change the pop-up to display the value in the change of cell C1

  • Are there more Styles of Menu custom that u can get to 7 DVD Maker window, then those who are pre determined for you in the list of menu styles?

    Are there more Styles of Menu custom that u can get to 7 DVD Maker window, then those who are pre determined for you in the list of menu styles?

    Hello SuperComicCollecter 101,

    Welcome to the Microsoft Answers Forum!

    You can't even download new menus/styles; You can then bring yourself with the SDK pack that you can download from the official website of Microsoft. It would be a bit complicated, but if you are good at programming you can use this SDK package. There are many online tutorials that will help you.

    Windows Movie Maker and Windows DVD Maker SDK:

    http://www.Microsoft.com/downloads/details.aspx?FamilyId=db25c30a-44F4-4306-BE62-2f3b7ef3849f&displaylang=en

    After downloading this file, I suggest to install in compatibility mode, to do this, please follow the steps below

    Right click on the downloaded file > properties > click on the Compatibility tab > under compatibility mode > check the box run this program in compatibility mode for and select windows 7 in the drop-down list in the menu drop down and then apply the settings.

    I hope this information helps. Please get back to us if you have any other questions on this subject.

    Thanks and greetings
    Mir - Microsoft Answers Support Engineer
    Visit our Microsoft answers feedback Forum and let us know what you think.

  • Hi I use PH CS6 on an IMac, I try to print a picture when I clicked on what kind of paper I wanted to use from the dropdown menu and the photos the two disappeard. W when I tried to print the same photo I get this. There was an error poening your printer.

    Hi I use PH CS6 on an IMac, I try to print a picture when I clicked on what kind of paper I wanted to use from the dropdown menu and the photos the two disappeard. W when I tried to print the same photo I get this. There was an error poening your printer. print functions will be unavailable until you have selected a printer and reopened all documents. If I open the picture in preview oe my IPad it will print. So, how to choose a printer in PH CS6? Thanks John

    Jakee, salvation

    Please follow the steps below to reset the photoshop preferences.

    > Hold down Option + command + shift (Mac OS) when you start Photoshop. You are prompted to delete the current settings. New preferences files are created the next time you start Photoshop.

    Note: Using the hotkey, preference files for custom shortcuts, workspaces, and color settings will also reset to the default.

    If you are still facing the same issue, please uninstall and reinstall the printer drivers and check for the issue.

    Also, please mention what operating system are you using?

    Let me know if it helps.

    ~ UL

  • Can accordion jquery and a jquery dropdown menu to work together?

    For some reason I can't get an accordion jquery and a jquery dropdown menu to work together. Don't know why, but they seem to conflict.

    When I add this accordion and this drop-down menu on the same page that they do not work?

    Anyone has an idea why not?

    Thank you!

    Have a look here http://pleysier.com.au/quest/, keeping in mind that I have a different accordion of what you got.

    You will be able to copy the files in the linked document.

  • Dropdown Menu problem Dynamics

    Hi all

    Hope someone can help me with this little problem. I am filling a form of dynamic dropdown menu using data from my database. Store values in a single column of my database... However, there are duplicated in some records and no name in other names and I want that my drop-down menu to display only one option at a time... then...

    Rather than view this:

    option01
    option01
    option02
    option03
    option03

    I just like it to appear:
    option01
    option02
    option03

    My SQL to query the database is:

    SELECT *.
    OF databasetable
    WHERE databasefield IS NOT NULL
    ORDER BY databasefield ASC

    But what I need is something like:
    SELECT *.
    OF databasetable
    WHERE databasefield IS NOT NULL and does not multiple records with the same value
    ORDER BY databasefield ASC

    Problem is that I don't know the code to achieve and does not multiple records with the same value

    Any help much appreciated.
    Steve

    Dave

    Thank you very much... I've knew the SEPARATE command but could not work out where in the code is to be placed. As always a simple answer when you know how, but it takes someone competent and friendly enough to help others.

    Dave, your help is much appreciated.
    Steve

  • Horizontal dropdown menu/css

    Have developed a horizontal menu using css but I'm stuck with unrolling of the part. There are two areas that go down, one under the data entry and the other under reports. So far the only style used is display: inline; See the file-> http://classreunionprogram.com/test_css/css.menu.htm

    Also get an error in validation due to ignorance of the way of. Any help is great.

    Thank you.

    Is that what you had in mind?

    http://ALT-Web.com/demos/CSS2-Horiz-drop-menu.shtml

    NOTE: Carefully observe how the markup list is laid out.

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    www.Alt-Web.com/
    www.Twitter.com/ALTWEB
    www.Alt-Web.blogspot.com

  • Can't the forms with CSS in DWCS6 style / must add menu WYSIWYG

    Hi all

    I put my two 'problems' in a single topic:

    (1) I tried to add some style on my pages of forms in them, but it seems that it does not work well, I explain: I create a php page, I insert a form with text fields (user name and password, for example) and the "login" button The form ID is "LogForm. I create a CSS class called "." FormCSS' and inside I put the rule "align text: right. I apply the rule to the form and all of the text inside goes to the right. I try online (real server and local server, I tried both) but nothing happens, the form elements to remain on the left. I tried to apply the Lun ID of the form. Nothing.

    No doubt, I'm doing something wrong. Even with the text and the tables within the shape, I can't move/change, at all. In design mode, I see all the changes, I can't online (chrome and IE). What should I do?

    (2) I create a page to insert long text in a database, as when you post in a forum. I would like to insert some kind of toolbar with options align, style and so on, as WYSIWYG editors. Is this possible? Is it possible to put a toolbar like this in DWCS6?

    Thank you

    #1 you're not comb the selectors in correct form: form, fieldset, label lable, input, textarea...

    See example of a CSS style HTML5 form. View source to see the code.

    HTML5 form with jQuery Validation

    #2 Watch CK Editor.

    CKEditor.com | The best text editor of web for all

    Nancy O.

  • Dropdown missing styles in properties

    I created a new site with an attached CSS.

    When I click on the style dropdown in the Properties menu box, styles are not there to choose from.

    The only choices are "zero, rename, set the style sheet.

    The style sheet is already fixed (and I can do the awkward thing and go into the code and change from there, but obviously want a quick view of the designer to edit which is rather the point of the use of Dreamweaver)

    I have two other sites where the drop down menu works very well to choose styles so assume it's nothing to do with Dreamweaver (CS3) itself or my computer (Windows XP sp3).

    I can't take a screenshot with the menu dropdown list actually, but this is where I talk to you

    screenshot.jpg

    Help gratefully received. Thank you.

    Sarah

    Hello

    To add to my last post of your css p2 and p3 are incorrect (it's perhaps why they cannot be applied) you should have one. (point) in front of them - .p2 and .p3 point indicating a class is required.

    PZ

  • Problem of menu style

    I had some style menus so that the current page button had a different background (.thispage). After changing the color scheme to be degraded for menu items, color has ceased to show for the current page.

    Original: http://www.aptcoweb.com/dev/vip/index.htm

    New: http://www.aptcoweb.com/dev/vip/index2.htm

    That's happened?

    On line 83 Content9 - 12.css, add the property and the value displayed in red:

    . Menu .thispage {}

    background-color: #166 38 c;

    background-image: none ;

    border-radius: 0;

    color: white;

    letter-spacing: 0.1em;

    margin: 4px 1%;

    }

  • Hide elements with CSS size screen style sheets?

    I have a little trouble finding ways to hide from the elements with the size of the screen.  I have a set of mobile entertainment for a menu that has to hide the desktop of style.css.  I guess I'll have to add JS instead of a visibility: hidden; on the div id?  Thank you if you are able to help, a little lost on this.

    Office: style.css for 800 + px

    Mobile. CSS-800px

    Try something like this - http://www.heathrowe.com/edge/resize/

    Download:http://www.heathrowe.com/edge/resize/resize.zip

    I don't know what it is that you are trying to hide/show, so my example is simple. Please take a look at the compositionReady Manager resize() if else statement.

    Darrell

Maybe you are looking for