CSS Drop down menu; How to align the edge right of the menu drop down and the parent menu?

Hi all

I have a drop down menu that works well.

The only change that I need to do is to have the right edge of the drop-down menu below to align with the right edge of the parent menu. When you hover over the menu, it currently "injects" down and to the right, with the left edges aligned.

I want the menu to 'drop' down and to the left, so the straight edges are aligned.

I tried fiddling with floats and absolute/relative positioning. I don't know what needs to be changed.

You can provide any assistance is greatly appreciated! I learn through 'cut and paste', please go easy on any terminology you can use.

Thank you!

Here is my code:

.chromestyle{
     width: 100%;
     font-weight: bold;
     float: left;
     height: 29px;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}

How about this?

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

Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
http://ALT-Web.com/
http://Twitter.com/ALTWEB

Tags: Dreamweaver

Similar Questions

  • How to align the position of a node in a pane of the grid using CSS?

    Hello

    I have an interface defined in FXML:
    <?xml version="1.0" encoding="UTF-8"?>
    
    <?import java.lang.*?>
    <?import javafx.scene.*?>
    <?import javafx.scene.control.*?>
    <?import javafx.scene.layout.*?>
    
    <BorderPane xmlns:fx="http://javafx.com/fxml" >
        <center>
            <GridPane alignment="top_center" hgap="8" prefWidth="450" vgap="8" style="-fx-padding: 10;" >
                <styleClass>
                    <String fx:value="form"/>
                </styleClass> 
                        
                <children>
    
                    <Label text="From" GridPane.columnIndex="0" GridPane.rowIndex="0" />
                    <TextField fx:id="from" GridPane.columnIndex="1" GridPane.rowIndex="0"/>
    
                    <Label text="Recipient(s)" GridPane.columnIndex="0" GridPane.rowIndex="1" />
                    <TextField fx:id="recipients" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
                    
                    <Label text="Subject (defaults to title)" GridPane.columnIndex="0" GridPane.rowIndex="2" />
                    <TextField fx:id="subject" GridPane.columnIndex="1" GridPane.rowIndex="2"/>                   
                    
                    <Label text="Send mail as ..." GridPane.columnIndex="0" GridPane.rowIndex="3" />
                    <ListView fx:id="mail_format" prefHeight="100" GridPane.columnIndex="1" GridPane.rowIndex="3" />  
                    
                    <Label text="Plain Text Mail" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.halignment="center" GridPane.rowIndex="4" />                  
                    
                    <Label text="Template" GridPane.columnIndex="0" GridPane.rowIndex="5" />
                    <TextField fx:id="plain_template" GridPane.columnIndex="1" GridPane.rowIndex="5"/>                
                                      
                    <Label text="Send as is (do not dump into plain text)" GridPane.columnIndex="0" GridPane.rowIndex="6" />
                    <CheckBox fx:id="plain_noconvert" GridPane.columnIndex="1" GridPane.rowIndex="6"/>
                    
                    <Label text="HTML Mail" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.halignment="center" GridPane.rowIndex="7" />
                                    
                    <Label text="Template" GridPane.columnIndex="0" GridPane.rowIndex="8" />
                    <TextField fx:id="html_template" GridPane.columnIndex="1" GridPane.rowIndex="8"/>               
    
                    <Label text="Other configuration" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.halignment="center" GridPane.rowIndex="9" />
                    
                    <Label text="Reply-To" GridPane.columnIndex="0" GridPane.rowIndex="10" />
                    <TextField fx:id="reply_tos" GridPane.columnIndex="1" GridPane.rowIndex="10"/>
                    
                    <Label text="Cc" GridPane.columnIndex="0" GridPane.rowIndex="11" />
                    <TextField fx:id="ccs" GridPane.columnIndex="1" GridPane.rowIndex="11"/>
                    
                    <Label text="Bcc" GridPane.columnIndex="0" GridPane.rowIndex="12" />
                    <TextField fx:id="bccs" GridPane.columnIndex="1" GridPane.rowIndex="12"/>
                    
                    <Label text="HTML base (defaults to current server)" GridPane.columnIndex="0" GridPane.rowIndex="13" />
                    <TextField fx:id="html_base" GridPane.columnIndex="1" GridPane.rowIndex="13"/>
                                                                                                                   
                    
                </children>
            </GridPane>
        </center>
    </BorderPane>
    I want to align the labels to right using CSS:
    .form *.label {
      -fx-alignment: right;
      -fx-font-weight: bold;
      -fx-hpos: right;
      -fx-text-alignment: right;
      -fx-text-wrap: true;
    }
    However I have not found any way to align the labels in the GridPane using CSS, or - fx-alignment: right, - fx-node-hpos: right. -fx-hpos: right. -fx-text-alignment: seem to work well...


    The only way to make it work is to define the attribute of each label Grid.halignment:
                    <Label text="HTML Mail" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.halignment="right" GridPane.rowIndex="7" />
    But what happens if I want to change that at a later stage-> I need to change this attribute for each node.


    How can align the labels to right using CSS only?

    Currently CSS in JFX cannot really be used for layout page (or calibration). This is one of those grey areas between what is style (which should be in the CSS) and what is layout (which should be in the FXML). I think I remember Richard mentioning once in a forum or an article that he did not want to add alignment stuff to the CSS at a certain point, but don't quote me on that. You might have a search through Kenai to see if there is a feature request for it and if not add one.

    Perhaps you could it with fake labels stretch to fill the available space in the GridPane. For this, you need to disable the restriction of maximum size (setMaxWidth and setMaxHeight to Integer.MAX_VALUE) and ensure your forced GridPane are such that the label will fill the cell. Once you have a stretched label alignment will come into play as the text is aligned relative to the area of the label (as opposed to a manager that aligns the entire label compared to its parent). I think that put a border on the label when debugging to work on what's going on.

    Another less confined but more flexible alternative might be to use variables in your FXML files. You can do this in a number of ways. We must create a bean that has all the variables of your on it with accessors get and then you can move it to your charger FXML namespace and then reference it by using things like ${myConstants.gridAlignment}. Another is to create static methods on a class that a node, these can then be called from the FXML using a notation similar to GridPane.alignment. This second approach only works for things where you want to work directly on the node, but for your scenario which should be ok I think. And then there is always the option to activate a script language in your FXML, allowing you to perform more nothing.

    Hope that helps,
    zonski

  • How to align the c4100 series ink cartridge

    I have problems hologram out, so far I did 8 pages of alignment, and they look the same all OK for me, now I'm trying to align the cartridges.  My laptop uses windows 8.1.  How to align the cartridges.

    Thanks in advance.

    Hi @lyjonne

    You can install the full software features and use the Printer Wizard to align the cartridges, or you can use the printing and scanning doctor.

    Use this link to download and run the HP printer install wizard for Windows

    The HP printer for window installation wizard was created to help Windows 7, Windows 8, and users Windows 8.1 download and install the latest and most appropriate HP software solution for their HP printer.

    Or click here to download and run the printing and scanning doctor > www.hp.com/go/tools

    As you can see the Print and Scan Doctor allows you to print a page, to perform the alignment, to clean the print heads, get print diagnostic information and more.

    I hope this helps.

    -In support of Movember

  • How to align the Hcenter fields in VFM?

    How to align the Hcenter fields in VFM? its giving problem

    solution on mine! years of posting for reference...

    what I did earlier.

    I wanted to have a manager of fixed size (maximum size) and put fields here, during an aliging then using stylebit it did not work. I used sublayout and fixed to what extent a perticular dimension

    resovled doing problem.

    It is not sufficient (or necessary) to if you want to use sublayout to have a fixed size, if you use the alignment, bcz setting hardcodedly properties, the other model overridden, so u must override the methods 'getPrefferedWidth & height', not the two held all the time, but according to the needs, if you want to:-alignment, you can try only method "width" and comparable to V-alignment. I included these methods and found that half of my UI related issues would have resolved more easily, if I tried this previously.

    Thank you best regards &.

  • How to align the edges of the images

    I have an image that resembles a parallelogram because when the inage has been taken there does not match the grid. How to align the edges?

    Appreciate the help.

    Different ways to do it... but without seeing an image of what you are doing then I would suggest that.

    First SNAP TO GRID.

    View > Snap To > grid

    Then

    Edit > Transform > distort

    This will allow you to move the corners and stretch the image.

    But if you share a screenshot or image we can help you in more detail.

  • How to align the text to the right in the text filed using Adobe Acrobat Pro?

    How to align the text to the right in the text filed using Adobe Acrobat Pro? I am able to align the text box, but not the alignment of the text with the deposited text.

    In the Options tab of the field properties dialog box, you can choose left, Center, or right alignment.

  • How to align the dialog box in the center of a popup programmatically

    Hey,.

    I use jdeveloper 11g release 2.

    Can someone help on how to align the dialog box programmatically a popup?

    Kind regards

    Steve

    Hello

    As far as I know, if we do not have indications of the dialog then displays on the center of the screen by default.

    This will solve your problem?

    Gud luck!

    HA

  • How to rehabilitate the Parental control?

    During the installation process of Windows 7, I made a mistake: I chose the domain Mode (when should I choose the user Home Mode) there are three butterflies.

    When I try to run games with side as an adult, I have can´t access.  It appears messages like 'Parental controls blocked this game' or 'you don't have permission to run the game.  Check the Parental control in the game Explorer window.

    I have no Parental controls in Control Panel.  How to rehabilitate the Parental control?  or how to rehabilitate the Home user in Windows 7 with Parental Control Mode?

    Note: I am the rights owner and the administrator of my computer.

    TododeAzul,
    Click Start > computer (right click) > properties > change
    This will give you the ability to change from a domain to a workgroup.  After that, change is effective, it should open the Parental controls for you. Mike - Engineer Support Microsoft Answers
    Visit our Microsoft answers feedback Forum and let us know what you think.

  • How to align the two side by side anchored objects in InDesign.

    I put a Word document in my InDesign doc and there are a number of images. They came as embedded images. Some of them I want to appear side by side or in a grid of all kinds. I'm not too familiar with anchored objects. Is there an easy way to align the ups and downs (i.e. ensure that the images are of the same height as the other) so that when they are side by side, they're aligned? Whatever I do for them seems to move them a little bit, but they are not perfectly aligned. Because I can't pick them out and do a typical line up as I would with ordinary objects, I don't know what to do. Sorry if this is a stupid/easy question. Thank you very much!

    • Right-click on the selection of an anchored object and choose anchored object > Options.
    • In the anchored object Options dialog box, choose Customize from the Position menu and click OK.
    • The subject will probably move when the dialog box closes, but because it is now a Custom anchored object, you can drag to reposition.
    • Alignment of an object embedded custom to other objects cannot be done with the control panel features line up because the anchored objects select individually, but with benchmarks commented under tension, you should be able to logically position.

    Note: you can of course always UN-anchor an object if you want. Simply select cut, press ESC to kill the active insertion point and paste.

  • How to align the previous next page link in an interactive report?

    Hello

    interactive report navigation, links between pages are displayed at the bottom right. This becomes a problem if the report has many fields, as long as the user must do scroll down and go down to get the previous page by pressing the link (IE (< =) 15-30 (= >)). How is it possible to have this links left-aligned in a report, or put them in another part of the report?

    TIA

    Hello

    You can set the display Position of the Pagination of the IR with
    -BottomRight (default)
    -TopLeft
    -TopRight
    -TopAndBottomRight
    -TopAndBottomLeft
    If this is not enough, you must use some top of javascript (jQuery prefs) move the object to where you want...

    Greetings,
    Roel
    http://roelhartman.blogspot.com/
    You can reward this response in marking it as useful or Correct ;-)

  • How to align the text with fields of the table values

    Hi friends

    My Baisc requirement is to display some values of address with some raising in boxes at the same level as the half left of the page displays address and other half right side of the page displays the values in the boxes, but when I created a table to display the value in boxes, he does not insert text of the Ant at the same level on half of the page as my requirement is

    My requirement is

    AddressAddressAddressAddress val in a val in a box2 box1 / / I m not able to display any square here box
    AddressAddressAddressAddress val in a box3 val in a box of 4
    AddressAddressAddressAddress val in a val in a box6 box5
    AddressAddressAddressAddress val in a val in a box8 box7

    but it comes as

    Val in a val in a box2 box1 / / I m not able to display any square here box
    Val in a box3 val in a box of 4
    Val in a val in a box6 box5
    Val in a val in a box8 box7
    AddressAddressAddressAddress
    AddressAddressAddressAddress
    AddressAddressAddressAddress
    AddressAddressAddressAddress

    and that's my problem I do not know how to align bot at the same level, any advice would be very help full

    Thanks in advance

    Thank you
    Pratap

    You can send me your sample xml and RTF, it would be better that I can see the RTf.

  • How to align the areas that fall within GridFieldManager

    Hello

    I have a GridFieldManager and I want to align the first three fields on the left and the last to the right. I tried to use ad FIELD_LEFT FIELD_RIGHT, but this does not seem to do the trick. Any ideas?

    My code:

    GridFieldManager grid = new GridFieldManager(3, 4, USE_ALL_WIDTH | NON_FOCUSABLE);
            for (int i = 0; i < data.length; i++) {
                LabelField label = new LabelField(data[i].getS1(), FIELD_LEFT | NON_FOCUSABLE);
                LabelField value = new LabelField(data[i].getS2(), FIELD_LEFT | NON_FOCUSABLE);
                LabelField unit = new LabelField(data[i].getS3(), FIELD_LEFT | NON_FOCUSABLE);
                BitmapField pic = new BitmapField(b, FIELD_RIGHT | NON_FOCUSABLE);
                grid.insert(label, i, 0);
                grid.insert(value, i, 1);
                grid.insert(unit, i, 2);
                grid.insert(pic, i, 3);
            }
            add(grid);
    

    Hello

    Try using Insert with a style:

    grid.insert(label, i, 0, FIELD_LEFT);
    

    Here is the link:

    http://www.BlackBerry.com/developers/docs/5.0.0api/NET/rim/device/API/UI/container/GridFieldManager...

    E.

  • How to align the Guides?

    (Mac OSX, Illustrator CS5)

    When you move objects around the editing table, what is the voodoo magic trick to get Illustrator to align the guides? I can't find a setting for this anywhere. Surely, you can align pins with Illustrator, can't you?

    Thank you-

    Turn on the guides. And set the preferences for them (check 'tools of transformation')

    Illustrator aligns with the position of the cursor

  • How to interrupt the parental control feature?

    How to take the function of parental control of my computer?

    Hello

    I suggest you to follow the steps from the link below and check if it helps:

    http://explore.live.com/Windows-Live-Family-Safety-remove-uninstall-FAQ

    http://support.Microsoft.com/kb/938275

    Hope this information is useful.

  • How to cancel the parental control

    Although I looked for the steps to cancel the parental control, could not find them.  can someone send please you not to do.  We don't need this feature. Thank you.

    Hi EWGibson,

    Thank you for using Microsoft Vista answers Forums.

    Here are the steps to turn off the Parental control

    1. go into the control panel of the

    Windows Start menu.
    2. click on user accounts.
    3. click on Parental controls.
    4. click on your account picture.
    5. Select Parental control off

    If please reply and let us know if your problem is resolved or if you need further assistance.

    David O
    Microsoft Answers Support Engineer
    Visit our and tell us what you think.

Maybe you are looking for

  • Windscribe VP N

    I am a novice to the vpn and need help. Life of vpn windscribe download says I need to disable firevault. It makes me nervous. Is windscribe a ligit good vpn? Any vpn to turn off FileVault

  • Qosmio F20 can be the battery

    Can someone help me? I have a Qosmio F20 and recently I picked up a strange problem. The battery light turns off and the energy saver told me that there is no battery... If I remove the battery and put back on, he finds it and cool for about 10 minut

  • HP pavilion p6226it: can I upgrade my pc with a new graphics card?

    Hi, I have a hp pavilion p6226it, I would like to know if the graphc 7750 HD card would go well on my old pc. matherboard: M2N78-(Violet6) Processor: AMD Athlon II X 4 620 RAM: 6 GB Graphics card: HD 4650 Same expert people told me that I could have

  • The use of HP34401A in LabView gives 1073807343 error code

    Hi all I used the Example.vi HP34401A of the read-only to read data from HP34401A.  However, the following error occurs, "Error-1073807343 is is produced when opening VISA in HP34401A Initialize.vi-> Untitled 1 Possible reasons: VISA: (Hex 0xBFFF0011

  • F5 - 572G Acer and SSD, is this possible?

    Hello I was wondering if it is possible to add an SSD to this laptop. And if it is possible I will have to replace current HARD drive or is there a possibility to add another HARD drive?