tiny drop down

Ive finally managed to add the tiny dropdown to my website but i seem to be having a few issues My Site please have a look for me and let me know what you think the green bar should show the dropdown menu but it only shows when you mouse over it. and even then it doesnt show up properly. thanks ant
asked Apr 3, 2011 by anonymous

5 Answers

0 votes
Sorry I did not get back to you earlier I had not check this mail for a day or two.

I had problems where my background image was obscuring the  menu however  I found that once I  enclosed my menu tags the problem was resolved .

I found that if  I used <div id=menu> </div> the back ground image overlaid the menu. if I removed the background image I could use <div id=menu> </div> and the menu did not get obscured.

I  have also found that one can leave the background image in  and  use undefined division.

 <div>

<ul class="menu" id="menu">

"menu layout"

</ul>

 </div>

I found that if the menu list was not enclosed  within tags the sub menus flickered after being revealed in Internet Explorer.

The site I used this on is "http://lcpc.on.ca"

Feel free to look at the  menu structure.

Below is the CSS I used

#menu {

    width: 700px;

    height: 28px;

   

   

    border-left: 3px solid #ffffff;

    border-right: 3px solid #ffffff;

    background: #37AEF2 url(images/headerover.gif);

     

    margin: 0 auto;

 

   

 

}

ul.menu

{

list-style:none;

 margin:0;

padding:0

}

 

ul.menu *

{

margin:0;

padding:0

}

 

ul.menu a

{

display:block;

color:#000;

text-decoration:none

}

ul.menu li

{

position:relative;

float:left;

margin-right:2px

}

 

ul.menu ul

{position:absolute;

top:30px;

left:0;

background:#ffffff;

display:none;

opacity:0;

list-style:none

}

ul.menu ul li

{

position:relative;

/*

border:1px solid #aaa;

*/

border-top:none;

width:128px;

margin:0

}

 

ul.menu ul li a

{

display:block;

padding:3px 7px 5px;

background-color:#d1d1d1

}

 

ul.menu ul li a:hover

{

background-color:#ff8844

}

 

ul.menu ul ul

{

left:128px;

top:-1px

}

 

ul.menu .menulink

{

border:1px solid #aaa;

padding:5px 0px 8px 8px;

font-weight:bold;

background:url(images/header2.gif);

width:128px

}

 

ul.menu .menulink:hover, ul.menu .menuhover

{

background:url(images/headerover.gif)

}

 

ul.menu .sub

{

background:#d1d1d1 url(images/arrow.gif) 125px 8px no-repeat

}

 

ul.menu .topline

{

border-top:1px solid #aaa

}
answered Apr 3, 2011 by anonymous
0 votes
You need to make some changes to your CSS I would start by removing the back ground image on the list items

    #menu ul li a {

    display: block;

    float: left;

    padding: 0 12px;

    color: #fff;   

    text-decoration: none;

    /*background: url(sep.jpg) no-repeat 100% 100%;*/

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

can you please clarify a bit more on this please. did the rest easy enough but this bit still confusing me. please tell me what exactly needs replacing thanks.
answered Apr 3, 2011 by anonymous
0 votes
sorry this site was momentarily down and I tried to use your contact form on yore site it did not work out quite right. ok ive put that at the bottom but its still acting strange. ive upload it to my serve so if you visit www.thegreenpatch.net you can see what i mean. its supposed to be where the horizontal green bar is. --------------------------------------------------- You need to make some changes to your CSS I would start by removing the back ground image on the list items #menu ul li a { display: block; float: left; padding: 0 12px; color: #fff; text-decoration: none; /*background: url(sep.jpg) no-repeat 100% 100%;*/ in your html drop the answered Apr 3, 2011 by anonymous
0 votes
ok ive put that at the bottom but its still acting strange. ive upload it to my serve so if you visit www.thegreenpatch.net you can see what i mean. its supposed to be where the horizontal green bar is.
answered Apr 3, 2011 by anonymous
0 votes
add the following just above your </body> tag

<script type="text/javascript">

    var menu=new menu.dd("menu");

    menu.init("menu","menuhover");

</script>
answered Apr 3, 2011 by anonymous
Powered by Question2Answer