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

    HTML / Java dropdown menu

    Del Advanced

      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.





      <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;}







      <div class="nav">




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




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


          <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>





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


          <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>







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