Results 1 to 6 of 6

Thread: jQuery Multi Level CSS Menu #2

  1. #1
    Join Date
    Oct 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default jQuery Multi Level CSS Menu #2

    1) jQuery Multi Level CSS Menu #2

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...el_css_menu_2/

    3) Describe problem: I wonder if someone could help me. I am new to this and have created a website www.thompsonborrell.co.uk. I have used the menu at the top of the page but the drop down part does not line up with the text. I have tried changing a few things but can not get it to line up.

    Thanks in advance

    Vikki

  2. #2
    Join Date
    Feb 2014
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vikki3 View Post
    1) jQuery Multi Level CSS Menu #2

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...el_css_menu_2/

    3) Describe problem: I wonder if someone could help me. I am new to this and have created a website www.thompsonborrell.co.uk. I have used the menu at the top of the page but the drop down part does not line up with the text. I have tried changing a few things but can not get it to line up.

    Thanks in advance

    Vikki
    Hi Vikki, try replacing the rule on line 69 of jqueryslidemenu.css with this:

    Code:
    .jqueryslidemenu ul li ul li a {
    font: normal 11px Verdana;
    width: 100px;
    padding: 0px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 0px solid gray;
    }
    I just turned off the padding.
    Last edited by keyboard; 02-17-2014 at 05:32 AM. Reason: Format: Code Tags [code][/code]

  3. #3
    Join Date
    Oct 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Paulod View Post
    Hi Vikki, try replacing the rule on line 69 of jqueryslidemenu.css with this:

    Code:
    .jqueryslidemenu ul li ul li a {
    font: normal 11px Verdana;
    width: 100px;
    padding: 0px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 0px solid gray;
    }
    I just turned off the padding.
    Thanks Paul, I'll give it a go.

  4. #4
    Join Date
    Oct 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Paul

    The padding seams to be the space inbetween the submenu options and not to move it to the left hand side unfortunetely.

    Vikki

  5. #5
    Join Date
    Feb 2014
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    If you want to move the main links to the left, try this:

    .jqueryslidemenu ul li a {
    display: block;
    background: #3C3436;
    color: #cccccc;
    padding: 7px 5px;
    border-right: 9px solid #3C3436;
    color: #cccccc;
    text-decoration: none;
    }

    I changed the padding (left & right) from 2px to 5px to match the drop links.



    If you want to change just the padding on the sides of the drop links, without affecting the padding between the drop links, try this:

    .jqueryslidemenu ul li ul li a {
    font: normal 11px Verdana;
    width: 100px;
    padding: 5px 12px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 0px solid gray;
    }


    A single value will affect all 4 sides,

    and if there's just two, the first padding value changes the top and bottom and the second affects the left and right.

    And if you want to get more detailed, you can specify them individually:

    http://css-tricks.com/remember-the-o...-with-trouble/



    Sometimes a rule is being over-ruled elsewhere (you can check which values are declared and which actually get computed. Check out Developer Tools in your browser). You can also turn rules on and off here without making permanent changes.
    Last edited by Paulod; 02-17-2014 at 12:19 PM.

  6. #6
    Join Date
    Oct 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by Paulod View Post
    If you want to move the main links to the left, try this:

    .jqueryslidemenu ul li a {
    display: block;
    background: #3C3436;
    color: #cccccc;
    padding: 7px 5px;
    border-right: 9px solid #3C3436;
    color: #cccccc;
    text-decoration: none;
    }

    I changed the padding (left & right) from 2px to 5px to match the drop links.



    If you want to change just the padding on the sides of the drop links, without affecting the padding between the drop links, try this:

    .jqueryslidemenu ul li ul li a {
    font: normal 11px Verdana;
    width: 100px;
    padding: 5px 12px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 0px solid gray;
    }


    A single value will affect all 4 sides,

    and if there's just two, the first padding value changes the top and bottom and the second affects the left and right.

    And if you want to get more detailed, you can specify them individually:

    http://css-tricks.com/remember-the-o...-with-trouble/



    Sometimes a rule is being over-ruled elsewhere (you can check which values are declared and which actually get computed. Check out Developer Tools in your browser). You can also turn rules on and off here without making permanent changes.

    Thanks Paul. All sorted now, I am well pleased.

Similar Threads

  1. jQuery Multi Level CSS Menu #2 not working in IE6 using jQuery 1.4.x
    By Rikko in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-28-2010, 10:57 PM
  2. jQuery Multi Level CSS Menu #2
    By dustnbones in forum CSS
    Replies: 2
    Last Post: 10-16-2010, 05:40 PM
  3. jQuery Multi Level CSS Menu #2
    By dustnbones in forum CSS
    Replies: 1
    Last Post: 10-15-2010, 09:29 PM
  4. jQuery Multi Level CSS Menu #2
    By douza in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 07-06-2010, 08:22 PM
  5. jQuery Multi Level CSS Menu #2 and jQuery 1.4
    By Lee.K in forum Bug reports
    Replies: 1
    Last Post: 04-13-2010, 04:40 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •