19 Replies Latest reply on Mar 2, 2016 1:49 PM by nallasivam.jive

    HTML / Java dropdown menu

    Del

      Hello all

       

      Sorry if this isnt the right area in which to ask (feel free to relocate):

       

      I'm attempting to build a very simple horizontal dropdown menu to place in a html widget.

      My skills are - lets just say at beginner level - and  I'm having problems with the dropdowns dissapearing within the HTML widget - and not overlaying on top of the page.

       

      I know I could set the height of the widget but I don't want to have loads of empty space - I'd rather the drop downs overlay the page - like on a 'regular' website.

       

      Can anyone help?

       

      Many thanks

       

       

      See screenshot & code below.

       

      Dropmenu.jpg

      ---------------------------------------------------

      <head>

      <title>Drop Menu Test</title>

       

      <style type="text/css">

      .nav ul {list-style:none; margin:0; padding:0}

      .nav li {float:left; width:100px; background-color:#444444; text-align:center;

               border-right:1px solid white; position:relative;

               height:30px; line-height:30px;}

      .nav li ul li {float:none; width:150px; text-align:left; padding-left:5px;

               border-top:1px solid white;}

      .nav a {text-decoration:none; color:white;}

      .nav li ul {position:absolute; top:30px; left:0; visibility:hidden;}

      .nav li:hover ul {visibility:visible;}

       

      .nav li:hover {background-color:maroon;}

       

      .content {clear:both;}

      }

      </style>

      </head>

       

      <body>

       

      <div class="nav">

      <ul>

       

        <li>

         <a href="home.html">Home</a>

        </li>

       

        <li>

         <a href="photos.html">Photos</a>

         <ul>

          <li><a href="zoo.html">Zoo</a></li>

          <li><a href="lake.html">At the Lake</a></li>

          <li><a href="sunset.html">Sunset</a></li>

         </ul>

        </li>

       

        <li>

         <a href="contact.html">Contact</a>

         <ul>

          <li><a href="me.html">Me</a></li>

          <li><a href="you.html">You</a></li>

          <li><a href="them.html">Them</a></li>

          <li><a href="us.html">Us</a></li>

         </ul>

        </li>

       

      </ul>

      </div>

       

      <h4 class="content">--- This is where the HTML widiget would end ---</h4>

      </body>

      </html>

      ------------------------------------------