drop down menu formatting

  • Resolved titous09

    (@titous09)


    13 years, 11 months ago

    hello everyone,

    i rencently started adding drop down menus to my site https://www.photocs.net and I’m having some trouble with the CSS.

    Here is what I’m looking help with:
    1) moving all the menus to the left side of black box (i made the box black just so that i can refer to it easily in this question) so that the navigation bar fits below the word CS Photography
    2) when you hover over client list, you can see that the sub-menus seem to be centered within the drop down menu (look at the bottom shadow of the drop down menu to see where the edges of it are), i’d like these sub-menus to be aligned on the left side.
    3) i’d like to change it so that the upper level menus (travel, client list, portraits) are not links, but rather open the drop menu when you either hover over or click on the menu.

    Thank you all for your help!

Viewing 8 replies - 1 through 8 (of 8 total)

  • hi

    i don’t understand #1

    2) the client list is left justified, it just has padding to its left.
    add this to stylesheet:
    ul ul.children, ul ul.children li:hover a { padding-left: 0 }

    3) install a plugin such as
    https://www.ads-software.com/extend/plugins/page-links-to/
    Edit the pages for the top links and set the URL they are linking to to #
    add this to CSS:
    #access ul > li:hover > a { cursor: default }
    The top level links are still links. They won’t look like links, and if they are clicked they link to the exact spot the user is already viewing.

    Thread Starter titous09

    (@titous09)

    Hi stvwlf,

    Let me clarify:

    1) I’d like to shift all the navigation links (travel, clients, etc) to the left until they are all sitting directly below the word CS Photography. There seems to be some sort of padding within “masthead” that is keeping the first menu (Travel) to be aligned all the way on the left.

    As for your post:
    2) situation resolved, thank you.

    3) situation resolved, thank you!

    thank you for your help!

    Add this to your CSS
    #access .menu > ul { padding: 0 0 0 12px; }

    Should take care of #1

    Thread Starter titous09

    (@titous09)

    Didn’t work, any other thoughts?

    I again added that same line to the bottom of your stylesheet (in my browser only, not on your site) and I again saw the nav move over where I’d seen it the first time.

    I don’t see that line of CSS being applied to your nav prior to my manually adding it back in. I suggest you try again. Put it at the end of the sheet for now.

    Thread Starter titous09

    (@titous09)

    I’ve got it at the end of my style sheet and it’s not moving for me. ?? what else do you suggest i try?

    The reason its not working is it evidently got pasted into your stylesheet as

    #access .menu & g t ; ul { padding: 0 0 0 12px; }

    It needs to be
    #access .menu > ul { padding: 0 0 0 12px; }

    If you copy and paste it, change the & g t ; to > by hand

    ( I had to leave spaces between & g t ; for the forum software to not convert it to >)

    Thread Starter titous09

    (@titous09)

    perfect! that fixed it, thank you very much!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘drop down menu formatting’ is closed to new replies.