Layering of Dropdowns using Include

[al2henry]

http://www.conservancyonmayne.com Each main page of this site (other than "index.html") has had its main dropdown menus display via a php include statement - example www.conservancyonmayne.com/talks&walks.php - I have recently added a jslider sequence that appears below this main menu. The problem: when the full dropdown "content" is on the page the menus appear above the slide being displayed but when it is placed using "include" the sub-menu elements are hidden by the slide. The three pages I've updated so far (howhelp.php, programme.php & volunteer.php) only display properly because I have copied the full content from index.html - replacing the include statement.

This work around will get increasingly onerous as time goes by and I need to modify the menus in any way. So I would really like to get the correct layering when using php include. If I need to post code examples please let me know. Usual apologies for dog's breakfast code - amateur learning on the job - any help will be much appreciated!

Regards

Alan

[pritaeas]

The problem: when the full dropdown "content" is on the page the menus appear above the slide being displayed but when it is placed using "include" the sub-menu elements are hidden by the slide.

Did you compare the HTML output of the two? There must be a difference somewhere.

[al2henry]

I thought you solved it! Especially when I found that in the php version the page was referencing a different style from the ul id=#sddm used by the hand-coded original in index.html. The layering hadn't worked there until I added to the z-index value. Your tip made me examine the included code and I was surprised to find that a different style (ul id=#sddm_incl) was being accessed. So I upped the z-index value to match expecting everything to work.

Unhappily the dropdowns in howhelp.php still dive behind the slider. CSS excerpt below, in case that helps! Thank you so much, Priteas!

OK - perhaps posting code doesn't help - the process around posting code has defeated me 3 times so I've given up! - Sorry...

[al2henry]

In case it is of assistance in pointing me to a solution here is the relevant section of the CSS:

/************* #Dropdown styles **************/
#sddm
{   position:relative;
    margin: 0;
    padding: 0;
    z-index: 100000;
}

#sddm li
{   margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 14px arial

}

#sddm li a
{   display: block;
    margin: 0 1px 0 0;
    padding: 2px 2px;
    width: 158px;
    background: #265420;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    border: 1px solid #ffffff
}

#sddm li a:hover
{   background: #49A3FF}

#sddm div
{   position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #EAEBD8;
    border: 1px solid #265420}

    #sddm div a
    {   position: relative;
        display: block;
        margin: 0;
        padding: 5px 10px;
        width: auto;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background: #eeeeee;
        color: #265420;
        font: 14px arial}

    #sddm div a:hover
    {   background: #49A3FF;
        color: #FFF}

#sddm-incl
{   margin: 0;
    padding: 0;
    z-index: 100000}

#sddm-incl li
{   margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 13px arial
}

#sddm-incl li a
{   display: block;
    margin: 0 1px 0 0;
    padding: 2px 2px;
    width: 157px;
    background: #265420;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    border: 1px solid #ffffff}

#sddm-incl li a:hover
{   background: #49A3FF}

#sddm-incl div
{   position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #EAEBD8;
    border: 1px solid #265420}

    #sddm-incl div a
    {   position: relative;
        display: block;
        margin: 0;
        padding: 5px 10px;
        width: auto;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background: #eeeeee;
        color: #265420;
        font: 13px arial}

    #sddm-incl div a:hover
    {   background: #49A3FF;
        color: #FFF}

I have used z-index values in two places - under #sddm and #sddm-incl. The former fixed the problem on the Home Page where the menu/submenu content was always fully written out, but the latter did not make things right where the content is built from a php file, namely mddmenu.php

Can I post any more info that might enable someone to let me know where I'm going wrong?

Many thanks

Alan

[diafol]

setting the dropdown position to static (if you can) may help .

[al2henry]

Thank you, Diafol, for the tip. It wasn't the solution as "static" didn't do it. However your suggestion made me realise that #sddm-incl didn't have positioning instructions though I had given it a z-index value. So now both #sddm & #sddm-incl have position: relative; - that worked!

Thanks too to Pritaeas who helped me understand that I could inspect the the page that the php script built. Between the 3 of us - marking it "Solved"