AnsweredAssumed Answered

HTML / Java dropdown menu

Question asked by Del Champion on Sep 12, 2012
Latest reply on Mar 2, 2016 by nallasivam.jive

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>

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

Outcomes