2 Replies Latest reply on Jul 5, 2013 4:05 AM by Ken Binney

    Menu hides inside image

    Roopavathy Level 1

      I have placed a drop down menu in my web page.Then i have placed a slideshow..The menu doesn't get overplapped.Instead it gets hidden inside the image slider.What could i do?Menu-not-overlap.JPG

       

      Here is the code:

      <body>

      <header>

      <!--<img src="Bethel-Images/Bethel-title-large.jpg"/>

      -->  <h1 id="maintitle">LORUM IPSUM</h1></header>

      <div class="gridContainer clearfix">

       

        <div id="nav">

        <nav id="menu-wrap">   

          <ul id="menu">

              <li><a href="/">Home</a></li>

       

              <li>

                  <a href="">About Us</a>

                  <ul>

                      <li>

                          <a href="">CSS</a>

                          <ul>

                              <li><a href="">Item 11</a></li>

       

                              <li><a href="">Item 12</a></li>

                              <li><a href="">Item 13</a></li>

                              <li><a href="">Item 14</a></li>

                          </ul>               

                      </li>

                      <li>

                          <a href="">ITEM</a>

       

                          <ul>

                              <li><a href="">Item 21</a></li>

                              <li><a href="">Item 22</a></li>

                              <li><a href="">Item 23</a></li>

                              <li><a href="">Item 24</a></li>

                          </ul>               

                      </li>

       

                      <li>

                          <a href="">ITEM</a>

                          <ul>

                              <li><a href="">Item 31</a></li>

                              <li><a href="">Item 32</a></li>

                              <li><a href="">Item 33</a></li>

                              <li><a href="">Item 34</a></li>

       

                          </ul>               

                      </li>

                      <li>

                          <a href="">Web design</a>               

                          <ul>

                              <li><a href="">Item 41</a></li>

                              <li><a href="">Item 42</a></li>

                              <li><a href="">Item 43</a></li>

       

                              <li><a href="">Item 44</a></li>

                          </ul>   

                      </li>

                  </ul>

              </li>

              <li>

                  <a href="">Our Vision</a>

                  <ul>

       

                      <li>

                          <a href="">Work 1</a>

                          <ul>

                              <li>

                                  <a href="">Work 11</a>       

                                  <ul>

                                      <li><a href="">Work 111</a></li>

                                      <li><a href="">Work 112</a></li>

       

                                      <li><a href="">Work 113</a></li>

                                  </ul>                           

                              </li>

                              <li>

                                  <a href="">Work 12</a>

                                  <ul>

                                      <li><a href="">Work 121</a></li>

                                      <li><a href="">Work 122</a></li>

       

                                      <li><a href="">Work 123</a></li>

                                  </ul>                           

                              </li>

                              <li>

                                  <a href="">Work 13</a>

                                  <ul>

                                      <li><a href="">Work 131</a></li>

                                      <li><a href="">Work 132</a></li>

       

                                      <li><a href="">Work 133</a></li>

                                  </ul>                           

                              </li>

                          </ul>                   

                      </li>

                      <li>

                          <a href="">Work 2</a>

                          <ul>

                              <li>

       

                                  <a href="">Work 21</a>

                                  <ul>

                                      <li><a href="">Work 211</a></li>

                                      <li><a href="">Work 212</a></li>

                                      <li><a href="">Work 213</a></li>

                                  </ul>                           

                              </li>

       

                              <li>

                                  <a href="">Work 22</a>

                                  <ul>

                                      <li><a href="">Work 221</a></li>

                                      <li><a href="">Work 222</a></li>

                                      <li><a href="">Work 223</a></li>

                                  </ul>                           

                              </li>

       

                              <li>

                                  <a href="">Work 23</a>

                                  <ul>

                                      <li><a href="">Work 231</a></li>

                                      <li><a href="">Work 232</a></li>

                                      <li><a href="">Work 233</a></li>

                                  </ul>                           

                              </li>

       

                          </ul>                   

                      </li>

                      <li>

                          <a href="">Work 3</a>

                          <ul>

                              <li>

                                  <a href="">Work 31</a>

                                  <ul>

       

                                      <li><a href="">Work 311</a></li>

                                      <li><a href="">Work 312</a></li>

                                      <li><a href="">Work 313</a></li>

                                  </ul>                           

                              </li>

                              <li>

                                  <a href="">Work 32</a>

       

                                  <ul>

                                      <li><a href="">Work 321</a></li>

                                      <li><a href="">Work 322</a></li>

                                      <li><a href="">Work 323</a></li>

                                  </ul>                           

                              </li>

                              <li>

                                  <a href="">Work 33</a>

       

                                  <ul>

                                      <li><a href="">Work 331</a></li>

                                      <li><a href="">Work 332</a></li>

                                      <li><a href="">Work 333</a></li>

                                  </ul>                           

                              </li>

                          </ul>                   

                      </li>

       

                  </ul>       

              </li>

              <li><a href="">Ministries</a></li>

              <li><a href="">Contact US</a></li>

          </ul>

      </nav>

       

      </div> <!-- end div id="nav" -->

       

        <div id="slider" class="cycle-slideshow" data-cycle-pause-on-hover="true" data-cycle-speed="1000">

        <img src="Slider Images/Go&Preach.jpg">

        <img src="Slider Images/Youth_Ministry.gif">

        <img src="Trial-images/Chocolate2.jpg">

        <img src="Trial-images/Black-forest1.jpg">

        </div>