Having trouble with drop menu

+1 Christopher Doke · September 4, 2014
Hey all, 

This is a question which has already been answered numerous times I'm sure but I can't seem to find a good answer. I am using a drop menu on my page but want the target to show in an iframe. Does anyone know how this can be done? Many thanks in advance!

Post a Reply


Oldest  Newest  Rating
+1 James Grimshaw · September 4, 2014

So you mean when you hover on the dropdown menu, you want the contents of the menu to be an iframe?

I made this example:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<style type="text/css">
.vote-list {
width: 942px;
margin: 0 auto;
padding: 0;
.vote-list li {
width: 468px;
margin-left: 5px;
text-align: center;
position: relative;
float: left;
.vote-list li:first-child {
margin-left: 0px;
.vote-list li a {
color: #FFFFFF;
background-color: #CC0000;
font-weight: bold;
text-decoration: none;
display: block;
padding: 5px 0px;
.vote-list li .vote-widget {
width: 520px;
height: 424px;
position: absolute;
left: -2000em;
z-index: 20;
border: 2px solid #CC0000;
.vote-list li:hover .vote-widget {
left: -30px;
<ul class="vote-list">
 <li><a href="#">Vote for Site</a>
   <!-- Div to display website -->
   <div class="vote-widget">
    <iframe src="http://craftedinengland.org/" width="520px" height="424px"></iframe>

If this isn't what you're looking for, just reply and I'll see if I can help you.

0 Christopher Doke · September 5, 2014
Hey thanks for the reply. That example is really close to what I'm looking for. The way I was thinking of setting it up was to have pages display in an iframe but use a dropdown menu to select what is displayed in the iframe. The question is how to refer from the dropdown to display the iframe. I think I'm missing something. 

<!DOCTYPE html>
<meta charset="UTF-8">
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<form name="post">
<p align="center">
<select name="menu">
<option value="XXXXX\XXXXXX.pdf" target="post">XXXXX</option>
<option value="111111\111111.pdf" target="post">111111</option>
<option value="111111\222222222.pdf" target="post">222222222</option>
<option value="111111\33333.pdf" target="post">33333</option>        
<option value="111111\444444.pdf" target="post">444444</option>
<li><a href="\\XXXX\XXXX 1 XXX XXX XX _ XX.com.pdf" target="post">XX 1</a></li>
<li><a href="\\XXXX\XXXX 2 XXX XXX XX _ XX.com.pdf" target="post">XX 2</a></li>
<li><a href="\\XXXX\XXXX 3 XXX XXX XX _ XX.com.pdf" target="post">XX 3</a></li>
<li><a href="\\XXXX\XXXX 4 XXX XXX XX _ XX.com.pdf" target="post">XX 4</a></li>
<li><a href="\\XXXX\XXXX 5 XXX XXX XX _ XX.com.pdf" target="post">XX 5</a></li>
<div id="post">
<iframe src="\\XXXX\XXXXXX\XXXXXXX\XXXX\XXXX\ 1 XXX XXX XX _ XX.com.pdf" width="900"
height="600" name="post" id="post">">XX 1</iframe>

The entries in the dropdown menu when setup this way don't do anything on click. My goal is to have them display in the iframe but for some reason the dd menu doesn't do anything except list the items.
+1 James Grimshaw · September 7, 2014
Ok, I think I see what you mean. I will try and put something together and get back to you as soon as possible.
+1 Christopher Doke · September 13, 2014
Now I feel stupid. I was reading into what I wanted to do and realized all I needed was the target attribute. It wasn't working for some reason. Once I added the target info it worked like a charm. Thanks for the response. :)
+1 James Grimshaw · September 13, 2014
No problem :)
  • 1

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.