CSS Dynamic Collapsible Menu Issues


hello all

 

i struggling creating vertical inline collapsible menu site. have had 2 attempts @ changing current css myself, adapting templates have found none have desired result, can find additional css info achieve need , input have never done css/html work before starting job few week ago! menu appears correct , have placed correct pages sub-menus dragging , dropping pages onto correct link on menu create nest/parent folder (is right term?) need adapt stylesheet recognise it. submenus disabled @ moment appear on top of original menu. current css looks (before attempts):

 

/* dynamic menu */

#navigation ul {

list-style-type: none;

margin-left:-5px;

padding:0px;

width:200px;

}

#navigation li {

font-family: helvetica, arial, sans-serif;

text-indent: 12px;

font-size: 13px;

line-height: 18px;

color: white;

text-decoration:none;

color: #fff;

cursor: pointer;

display:block;

height:25px;

line-height: 25px;                  

width:100%;

}

#navigation li a:hover {

background-image: url(/images/navbg.jpg);

        background-repeat: no-repeat;

}

 

thanks in advance.

matt,

 

not sure hoping design-wise (include link?), might out:

 

/* dynamic menu */

 

#navigation ul {

    list-style-type: none;

    margin: 0;

    padding: 0px;

    width: 200px;

}

#navigation li {

    position: relative;

}

#navigation li {

    font-family: helvetica, arial, sans-serif;

    text-indent: 12px;

    font-size: 13px;

    line-height: 18px;

    color: white;

    text-decoration: none;

    color: #fff;

    cursor: pointer;

    display: block;

    height: 25px;

    line-height: 25px;

    width: 100%;

    background: #333;

   

    position: relative;

}

#navigation li ul {

    left: -999em;

    position: absolute;

}

#navigation li a:hover {

    background: #666;

}

#navigation li:hover > ul {

    left: 200px;

    position: absolute;

    top: 0;

}

 

nicole - bcgurus.com   |  http://bcgurus.com/business-catalyst-templates $7



More discussions in How to - HTML / CSS / JavaScript


adobe

Comments