yes i am trying to create a drop down list menu for example

test 1 when click on this link it will drop down under
test 2

that type i dont mind if it is in css or html style i have checked everything im dont know css very well but am a quick learner if anyone has any kind of code it would be helpful please and thanks

<a href="#" onclick="javascript: document.getElementById('menu').style.display = 'block'">Show menu</a>
<div id="menu" style="display: none;">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</div>

Is this like what you had in mind? If not, please explain some more what you want.

thank you very much yes this is what in mind now if i can ask you one more thing is there a added code that we can do that when you click on show menu it will collapse and take away the list item 1 and 2

The easiest way I can think of is with JavaScript

<script type="text/javascript">
  function show_hide(o){
    if(o.className == "hidden"){
      document.getElementById('menu').style.display = 'block';
      o.className = "show";
    }else if(o.className == "show"){
      document.getElementById('menu').style.display = 'none';
      o.className = "hidden";
    }
  }
</script>

<a href="#" class="hidden" onclick="show_hide(this)">Show menu</a>
<div id="menu" style="display: none;">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</div>

thank you, this is awesome i would never have thought about doing it this way.

is there away that when click on show menu it will drop right under it as to it having a space between show menu and list1

I'm not sure I understood you exactly, perhaps this is what you had in mind...

<style type="text/css">
  #menu{
    margin-left: -40px;
    margin-top: -17px;
  }
  #menu ul{
    list-style: none;
  }
</style>

basically this is how i imagine it being set up

show menu when you click on this

show menu and this is what i want it to look like
list 1
list 2

the way that you created it for me which i like to is more like this

show menu

*test 1
*test 2

That's what the last reply with the CSS was for, please have a look at it

is this the correct set up that should make it work im new with the css so im just basically copying and pasting


<html>
<style type="text/css">
#menu{
margin-left: -40px;
margin-top: -17px;
}
#menu ul{
list-style: none;
}
</style>
<a href="#" class="hidden" onclick="show_hide(this)">Show menu</a>
<div id="menu" style="display: none;">
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</div>
</html>

Everything should be within the <body> tags

<html>
<head>
</head>
<body>
<style type="text/css">
  #menu{
    margin-left: -40px;
    margin-top: -17px;
  }
  #menu ul{
    list-style: none;
  }
</style>
<script type="text/javascript">
  function show_hide(o){
    if(o.className == "hidden"){
      document.getElementById('menu').style.display = 'block';
      o.className = "show";
      return false;
    }else if(o.className == "show"){
      document.getElementById('menu').style.display = 'none';
      o.className = "hidden";
      return false;
    }
  }
</script>

<a href="#" class="hidden" onclick="return show_hide(this)">Show menu</a>
<div id="menu" style="display: none;">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</div>
</body>
</html>

dude you are a life saver thank you very much for your assistance if i need any more help with my website i will let you know

My pleasure, enjoy coding...

P.S. Please make this 'Solved'...

sure thing just one last thing

do you now how to do frames in css

What do you mean 'frames'?

never mind back to the drop down list lets say i want to create another show menu link with another set of information under for example

show menu
list 1
list 2
show menu 2 
link 1 
link 2

this is what i added to it

<html>
<head>
</head>
<body>
<style type="text/css">
  #menu{
    margin-left: -40px;
    margin-top: -17px;
  }
  #menu ul{
    list-style: none;
  }
</style>
<script type="text/javascript">
  function show_hide(o){
    if(o.className == "hidden"){
       document.getElementById('menu').style.display = 'block';
       o.className = "show";
       return false;
    }else if(o.className == "show"){
      document.getElementById('menu').style.display = 'none';
      o.className = "hidden";
      return false;
    }
  }
 </script>

 <a href="#" class="hidden" onclick="return show_hide(this)">E-Mail</a>
 <div id="menu" style="display: none;">
   <ul>
    <li>MAC Mail</li>
    <li>Outlook Express 6</li>
    <li>Windows Mail</li>
    <li>Windows Live MAil<li>
    <li>Microsoft Outlook 2003</li>
    <li>Microsoft Outlook 2007</li>
    <li>Microsoft Outlook 2010</li>
   </ul>
 </div>
<p>
 <a href="#" class="hidden" onclick="return show_hide(this)">Windows XP</a>
 <div id="menu" style="display: none;">
   <ul>
    <li>MAC Mail</li>
    <li>Outlook Express 6</li>
    <li>Windows Mail</li>
    <li>Windows Live MAil<li>
    <li>Microsoft Outlook 2003</li>
    <li>Microsoft Outlook 2007</li>
    <li>Microsoft Outlook 2010</li>
   </ul>
 </div>
 </body>
 </html>

what did i do incorrect

The easiest way would be to give each a distinct 'id' (which is also the correct way), and make to separate JS functions, separately targeting the 'divs'...

<style type="text/css">
#menu{
margin-left: -40px;
margin-top: -17px;
}
#menu ul{
list-style: none;
}
</style>
<script type="text/javascript">
function show_hide(o){
if(o.className == "hidden"){
document.getElementById('menu1').style.display = 'block';
o.className = "show";
return false;
}else if(o.className == "show"){
document.getElementById('menu1').style.display = 'none';
o.className = "hidden";
return false;
}
}
function show_hide2(o){
if(o.className == "hidden"){
document.getElementById('menu2').style.display = 'block';
o.className = "show";
return false;
}else if(o.className == "show"){
document.getElementById('menu2').style.display = 'none';
o.className = "hidden";
return false;
}
}
</script>

<a href="#" class="hidden" onclick="return show_hide(this)">E-Mail</a>
<div id="menu1" style="display: none;">
<ul>
<li>MAC Mail</li>
<li>Outlook Express 6</li>
<li>Windows Mail</li>
<li>Windows Live MAil</li>
<li>Microsoft Outlook 2003</li>
<li>Microsoft Outlook 2007</li>
<li>Microsoft Outlook 2010</li>
</ul>
</div>
<p>
<a href="#" class="hidden" onclick="return show_hide2(this)">Windows XP</a>
<div id="menu2" style="display: none;">
<ul>
<li>Microsoft Outlook 2003</li>
<li>Microsoft Outlook 2007</li>
<li>Microsoft Outlook 2010</li>
<li>MAC Mail</li>
<li>Outlook Express 6</li>
<li>Windows Mail</li>
<li>Windows Live MAil</li>
</ul>
</div>

My point was that they should have different ids (e.g. menu1, menu2)

thank you that has worked, but now the orginal format is back where its spaced out again

show menu

list

this is confusing lol thank you for your paitence

Where it says #menu (in the CSS) change it to #menu1,#menu2

thank you thank you thank you thank you

My pleasure

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.