[CSS] Submenu

Discussion in 'CSS' started by Shinsen, Sep 7, 2009.

  1. #1
    Hi
    My english sux a bit but I will try to explain whats my problem.
    I made 3lvl vertical menu with css/php and everything is working fine but the list of elements that showing in 1st submenu is much to long.
    I wish to make menu like this :

    1mainmenu
    2mainmenu 2.1submenu 2.6submenu
    3mainmenu 2.2submenu 2.7submenu
    __________ 2.3submenu ....
    __________ 2.4submenu ....
    __________ 2.5submenu ....

    Can I change it using css ?
    Any other solution for this problem will be great
     
    Shinsen, Sep 7, 2009 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What exactly do you mean here? Also can you paste some code it would make it easier for a solution to be offered.
     
    wd_2k6, Sep 7, 2009 IP
  3. Shinsen

    Shinsen Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thx for replay.

    Ok here is link to my site
    http://elzlaczne.prv.pl/www4/szukaj.php

    And check: 'Åšruby' for example

    As u can see those elements that showing with hover option are to long.

    I want to change is somehow.

    Im using only css/php
    This is code css for this menu:

    #navigation {width:150px; font-size:12px;}
    #navigation ul {margin:0px; padding:0px; background-color:#666;}


    #navigation ul li {

    height:25px;
    line-height:25px;
    list-style:none;
    padding-left:10px;

    color:#FFF;
    border-top:#fff solid;
    border-bottom:#fff solid;
    border-width:1px;
    cursor:pointer;
    }




    #navigation ul li:hover {background-color:#F90; position:relative;}
    #navigation ul ul {
    display:none;
    position:absolute;
    left:75px;
    top:0px;
    border:#fff solid;
    border-width:1px;
    background-color:#999;

    }

    #navigation ul li:hover ul {display:block;}
    #navigation ul ul li {border:none; width:100px; float:left; display:inline;}
    #navigation ul ul li:hover {text-decoration:underline; border:none; }

    #navigation li:hover ul li ul {display:none;}
    #navigation ul ul li ul {left:110px; background-color:#0099CC;}
    #navigation ul ul li:hover ul {display:block;}
    #navigation ul ul ul li {width:320px;}
    #navigation ul ul ul li :hover {background-color:#FFFFFF;}
     
    Shinsen, Sep 7, 2009 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi,

    When you say "too long" do you mean too wide? If so then....................

    To change the width of the second menu (with the light grey background), find the line:
    
    #navigation ul ul li {border:none; [B]width:100px[/B]; float:left; display:inline;} 
    
    Code (markup):
    and change the width to whatever you want it to be.


    To change the width of the 3rd menu (the one with the blue background) find the line:
    
    #navigation ul ul ul li {[B]width:320px;[/B]} 
    
    Code (markup):
    and change the width to whatever you want it to be :).
     
    wd_2k6, Sep 7, 2009 IP
  5. Shinsen

    Shinsen Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I mean that too many elements is showing in 1 column
    I wish to make few columns for few elements each.
    Now those elemnts r showing like
    1
    2
    3
    4
    5
    6

    I want to change it to

    1 ... 2 ... 3
    4 ... 5 ... 6
     
    Shinsen, Sep 7, 2009 IP
  6. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Oh Ok Then, well try adding this line:

    
    #navigation ul li ul { width:330px;}
    
    Code (markup):
    To the bottom of your menu CSS :)
     
    wd_2k6, Sep 7, 2009 IP
  7. Shinsen

    Shinsen Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Oh my God :)
    Man u killed me rly

    So many ppl tried with java scripts ect.

    And u added 1 line and its working

    I just need to change a little 'width' but its all I wanted.

    Love ya :)
    Thx a lot
     
    Shinsen, Sep 7, 2009 IP
  8. Shinsen

    Shinsen Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Damn ...
    Sorry for taking your time ...
    But now I have other problem :(

    I changed width options but its kinda horrible

    //elzlaczne.prv.pl/www4/szukaj.php

    How u can see its working but cause of this 2nd hover I cant type element thats right next to it.

    Maybe u know any solution for it ? I dont even know how it could be fixed.

    Ok I just put 'top' option' to it and its better

    If u find any way to improve it let me know :)
     
    Last edited: Sep 7, 2009
    Shinsen, Sep 7, 2009 IP
  9. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I'll have to have a look later, not on my P.C now :)
     
    wd_2k6, Sep 7, 2009 IP