Back To Programming / Scripting / Coding Forum

drpop up menu help

  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Joined: Jun 21, 2006
  • Posts: 487
  • Loc: Conroe, Texas
  • Status: Offline

Post July 9th, 2010, 6:58 pm

Okay i am really lost on this one. the popping up works but its making the products and faq go big and i dont want that.... here is a link to see what i am talking about.
http://www.planetpeeps.com/test
here is the code.

css code
Code: [ Select ]
.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
.menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
        float:left;
        padding:0px;
        }
    .menu li a{
        background:#333333 url("images/seperator.gif") bottom right no-repeat;
        color:#cccccc;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        
        }
        .menu li a:hover, .menu ul li:hover a{
            background: #2580a2 url("images/hover.gif") bottom center no-repeat;
            color:#FFFFFF;
            text-decoration:none;
            }
    .menu li ul{
        background:#333333;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:relative;
        width:225px;
        z-index:200;
        top:-175px;
        /*left:0;*/
        }
    .menu li:hover ul{
        display:block;
        
        }
    .menu li li {
        background:url('images/sub_sep.gif') bottom left no-repeat;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:225px;
        }
    .menu li:hover li a{
        background:none;
        
        }
    .menu li ul a{
        display:block;
        height:35px;
        font-size:12px;
        font-style:normal;
        margin:0px;
        padding:0px 10px 0px 15px;
        text-align:left;
        }
        .menu li ul a:hover, .menu li ul li:hover a{
            background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
            border:0px;
            color:#ffffff;
            text-decoration:none;
            }
    .menu p{
        clear:left;
        
        }    

        
  1. .menu{
  2.     border:none;
  3.     border:0px;
  4.     margin:0px;
  5.     padding:0px;
  6.     font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  7.     font-size:14px;
  8.     font-weight:bold;
  9.     }
  10. .menu ul{
  11.     background:#333333;
  12.     height:35px;
  13.     list-style:none;
  14.     margin:0;
  15.     padding:0;
  16.     }
  17.     .menu li{
  18.         float:left;
  19.         padding:0px;
  20.         }
  21.     .menu li a{
  22.         background:#333333 url("images/seperator.gif") bottom right no-repeat;
  23.         color:#cccccc;
  24.         display:block;
  25.         font-weight:normal;
  26.         line-height:35px;
  27.         margin:0px;
  28.         padding:0px 25px;
  29.         text-align:center;
  30.         text-decoration:none;
  31.         
  32.         }
  33.         .menu li a:hover, .menu ul li:hover a{
  34.             background: #2580a2 url("images/hover.gif") bottom center no-repeat;
  35.             color:#FFFFFF;
  36.             text-decoration:none;
  37.             }
  38.     .menu li ul{
  39.         background:#333333;
  40.         display:none;
  41.         height:auto;
  42.         padding:0px;
  43.         margin:0px;
  44.         border:0px;
  45.         position:relative;
  46.         width:225px;
  47.         z-index:200;
  48.         top:-175px;
  49.         /*left:0;*/
  50.         }
  51.     .menu li:hover ul{
  52.         display:block;
  53.         
  54.         }
  55.     .menu li li {
  56.         background:url('images/sub_sep.gif') bottom left no-repeat;
  57.         display:block;
  58.         float:none;
  59.         margin:0px;
  60.         padding:0px;
  61.         width:225px;
  62.         }
  63.     .menu li:hover li a{
  64.         background:none;
  65.         
  66.         }
  67.     .menu li ul a{
  68.         display:block;
  69.         height:35px;
  70.         font-size:12px;
  71.         font-style:normal;
  72.         margin:0px;
  73.         padding:0px 10px 0px 15px;
  74.         text-align:left;
  75.         }
  76.         .menu li ul a:hover, .menu li ul li:hover a{
  77.             background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
  78.             border:0px;
  79.             color:#ffffff;
  80.             text-decoration:none;
  81.             }
  82.     .menu p{
  83.         clear:left;
  84.         
  85.         }    
  87.         


page code
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body><table width="100%" border="1">
 <tr>
  <td><p>sdfsdfasdfdfg</p>
  <p>dfg</p>
 
  <p>sdfg</p>
  <p> sdf</p>
  <p> gsd</p>
  <p>&nbsp;</p></td>
 </tr>
 <tr>
  <td><p>asdfa</p>
  <p>sdf</p>
  <p>asdf</p>
  <p>asf</p>
  <p>asd</p>
  <p>fas</p>
  <p>df</p>
  <p>&nbsp;</p></td>
 </tr>
 <tr>
  <td>    <div class="menu">
        <ul>
            <li><a href="#" >Home</a></li>
            <li><a href="#" id="current">Products</a>
                <ul>
              <li><a href="#">Drop Down CSS Menus</a></li>
                    <li><a href="#">Horizontal CSS Menus</a></li>
                    <li><a href="#">Vertical CSS Menus</a></li>
                    <li><a href="#">Dreamweaver Menus</a></li>
              </ul>
      </li>
            <li><a href="/faq.php">FAQ</a>
        <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        </ul>
</li>
            <li><a href="/contact/contact.php">Contact</a></li>
        </ul>
    </div>
</td>
 </tr>
</table>

    <br>
    <br>

</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <link rel="stylesheet" href="menu_style.css" type="text/css" />
  8. </head>
  9. <body><table width="100%" border="1">
  10.  <tr>
  11.   <td><p>sdfsdfasdfdfg</p>
  12.   <p>dfg</p>
  13.  
  14.   <p>sdfg</p>
  15.   <p> sdf</p>
  16.   <p> gsd</p>
  17.   <p>&nbsp;</p></td>
  18.  </tr>
  19.  <tr>
  20.   <td><p>asdfa</p>
  21.   <p>sdf</p>
  22.   <p>asdf</p>
  23.   <p>asf</p>
  24.   <p>asd</p>
  25.   <p>fas</p>
  26.   <p>df</p>
  27.   <p>&nbsp;</p></td>
  28.  </tr>
  29.  <tr>
  30.   <td>    <div class="menu">
  31.         <ul>
  32.             <li><a href="#" >Home</a></li>
  33.             <li><a href="#" id="current">Products</a>
  34.                 <ul>
  35.               <li><a href="#">Drop Down CSS Menus</a></li>
  36.                     <li><a href="#">Horizontal CSS Menus</a></li>
  37.                     <li><a href="#">Vertical CSS Menus</a></li>
  38.                     <li><a href="#">Dreamweaver Menus</a></li>
  39.               </ul>
  40.       </li>
  41.             <li><a href="/faq.php">FAQ</a>
  42.         <ul>
  43.         <li><a href="#">1</a></li>
  44.         <li><a href="#">2</a></li>
  45.         <li><a href="#">3</a></li>
  46.         <li><a href="#">4</a></li>
  47.         </ul>
  48. </li>
  49.             <li><a href="/contact/contact.php">Contact</a></li>
  50.         </ul>
  51.     </div>
  52. </td>
  53.  </tr>
  54. </table>
  56.     <br>
  57.     <br>
  59. </body>
  60. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post July 9th, 2010, 6:58 pm

  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Joined: Mar 28, 2009
  • Posts: 305
  • Loc: AFK
  • Status: Offline

Post July 9th, 2010, 8:57 pm

Just gave your ".menu li" element in your css a fixed width. Copy and paste this and see if it works for you.

Code: [ Select ]
.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
.menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
        float:left;
        padding:0px;
        width: 100px;
        }
    .menu li a{
        background:#333333 url("images/seperator.gif") bottom right no-repeat;
        color:#cccccc;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        
        }
        .menu li a:hover, .menu ul li:hover a{
            background: #2580a2 url("images/hover.gif") bottom center no-repeat;
            color:#FFFFFF;
            text-decoration:none;
            }
    .menu li ul{
        background:#333333;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:relative;
        width:200px;
        z-index:200;
        top:-175px;
        /*left:0;*/
        }
    .menu li:hover ul{
        display:block;
        
        }
    .menu li li {
        background:url('images/sub_sep.gif') bottom left no-repeat;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:200px;
        }
    .menu li:hover li a{
        background:none;
        
        }
    .menu li ul a{
        display:block;
        height:35px;
        font-size:12px;
        font-style:normal;
        margin:0px;
        padding:0px 10px 0px 15px;
        text-align:left;
        }
        .menu li ul a:hover, .menu li ul li:hover a{
            background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
            border:0px;
            color:#ffffff;
            text-decoration:none;
            }
    .menu p{
        clear:left;
        
        }    

        
  1. .menu{
  2.     border:none;
  3.     border:0px;
  4.     margin:0px;
  5.     padding:0px;
  6.     font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  7.     font-size:14px;
  8.     font-weight:bold;
  9.     }
  10. .menu ul{
  11.     background:#333333;
  12.     height:35px;
  13.     list-style:none;
  14.     margin:0;
  15.     padding:0;
  16.     }
  17.     .menu li{
  18.         float:left;
  19.         padding:0px;
  20.         width: 100px;
  21.         }
  22.     .menu li a{
  23.         background:#333333 url("images/seperator.gif") bottom right no-repeat;
  24.         color:#cccccc;
  25.         display:block;
  26.         font-weight:normal;
  27.         line-height:35px;
  28.         margin:0px;
  29.         padding:0px 25px;
  30.         text-align:center;
  31.         text-decoration:none;
  32.         
  33.         }
  34.         .menu li a:hover, .menu ul li:hover a{
  35.             background: #2580a2 url("images/hover.gif") bottom center no-repeat;
  36.             color:#FFFFFF;
  37.             text-decoration:none;
  38.             }
  39.     .menu li ul{
  40.         background:#333333;
  41.         display:none;
  42.         height:auto;
  43.         padding:0px;
  44.         margin:0px;
  45.         border:0px;
  46.         position:relative;
  47.         width:200px;
  48.         z-index:200;
  49.         top:-175px;
  50.         /*left:0;*/
  51.         }
  52.     .menu li:hover ul{
  53.         display:block;
  54.         
  55.         }
  56.     .menu li li {
  57.         background:url('images/sub_sep.gif') bottom left no-repeat;
  58.         display:block;
  59.         float:none;
  60.         margin:0px;
  61.         padding:0px;
  62.         width:200px;
  63.         }
  64.     .menu li:hover li a{
  65.         background:none;
  66.         
  67.         }
  68.     .menu li ul a{
  69.         display:block;
  70.         height:35px;
  71.         font-size:12px;
  72.         font-style:normal;
  73.         margin:0px;
  74.         padding:0px 10px 0px 15px;
  75.         text-align:left;
  76.         }
  77.         .menu li ul a:hover, .menu li ul li:hover a{
  78.             background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
  79.             border:0px;
  80.             color:#ffffff;
  81.             text-decoration:none;
  82.             }
  83.     .menu p{
  84.         clear:left;
  85.         
  86.         }    
  88.         
Custom Web Design
  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Joined: Jun 21, 2006
  • Posts: 487
  • Loc: Conroe, Texas
  • Status: Offline

Post July 9th, 2010, 9:10 pm

thanks alot it worked!
Thanks, Josh --DemonMaestro
www.LilNetwork.com
Fun Website www.ShoutsCloud.com
  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Joined: Jun 21, 2006
  • Posts: 487
  • Loc: Conroe, Texas
  • Status: Offline

Post January 31st, 2011, 3:28 am

okay alittle issue is i have it set to the bottom of the page how ever when i mouse over the menu and the window comes up it extends the screen. i dont know why its doing it.

http://planetpeeps.com/work/work%20in%2 ... ss/source/
Thanks, Josh --DemonMaestro
www.LilNetwork.com
Fun Website www.ShoutsCloud.com
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post March 16th, 2011, 10:18 am

Before I even hover over the menu elements on the bottom I already have a horizontal scrollbar. Is it doing that for you? What fixed it for me was adding a margin of 0 for the body. So add this to your stylesheet:

CSS Code: [ Select ]
body {
   margin:0;
}
  1. body {
  2.    margin:0;
  3. }


I do not think that was your main problem though, what is also happening when I hover over an menu element is a large amount of space is showing up below the menu. I think that is what your question is actually about.

The problem is how you are positioning that element with a negative number for the top property. So what I might try if I were you is to complete get rid of the top property and instead try to do the same thing using negative margins. So instead of:

CSS Code: [ Select ]
.menu li ul{
   background:#333333;
   display:none;
   height:auto;
   padding:0px;
   margin:0px;
   border:0px;
   position:relative;
   width:200px;
   z-index:200;
   top:-175px;
}
 
  1. .menu li ul{
  2.    background:#333333;
  3.    display:none;
  4.    height:auto;
  5.    padding:0px;
  6.    margin:0px;
  7.    border:0px;
  8.    position:relative;
  9.    width:200px;
  10.    z-index:200;
  11.    top:-175px;
  12. }
  13.  


try this:

CSS Code: [ Select ]
.menu li ul{
   background:#333333;
   display:none;
   height:auto;
   padding:0px;
   margin:-175px 0 0 0;
   border:0px;
   position:relative;
   width:200px;
   z-index:200;
}
 
  1. .menu li ul{
  2.    background:#333333;
  3.    display:none;
  4.    height:auto;
  5.    padding:0px;
  6.    margin:-175px 0 0 0;
  7.    border:0px;
  8.    position:relative;
  9.    width:200px;
  10.    z-index:200;
  11. }
  12.  


Let me know if that does anything differently.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Joined: Jun 21, 2006
  • Posts: 487
  • Loc: Conroe, Texas
  • Status: Offline

Post March 16th, 2011, 3:47 pm

it works how ever it takes out one of the options when you scroll over the menu.
Thanks, Josh --DemonMaestro
www.LilNetwork.com
Fun Website www.ShoutsCloud.com
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post March 16th, 2011, 4:38 pm

Yeah I see what you are referring to. Lets try a different approach. Get rid of that margin I told you to add and instead put top to -140px and instead of having position as relative lets take it out of the document flow and put it as absolute. So change .menu li ul to:

CSS Code: [ Select ]
.menu li ul{
   background:#333333;
   display:none;
   height:auto;
   padding:0px;
   border:0px;
   position:absolute;
   width:200px;
   z-index:200;
   top:-140px;
}
  1. .menu li ul{
  2.    background:#333333;
  3.    display:none;
  4.    height:auto;
  5.    padding:0px;
  6.    border:0px;
  7.    position:absolute;
  8.    width:200px;
  9.    z-index:200;
  10.    top:-140px;
  11. }


Then I noticed you still have a small space below that menu. Maybe you are wanting that, but if you are wanting it flush with the bottom you need to remove the height of 50px from the #bottom id in your css. Let me know if this fix is any better :)
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Joined: Jun 21, 2006
  • Posts: 487
  • Loc: Conroe, Texas
  • Status: Offline

Post March 18th, 2011, 2:54 pm

it works but still an issue... theres no menu now... lol

http://planetpeeps.com/work/work%20in%2 ... ss/source/
Thanks, Josh --DemonMaestro
www.LilNetwork.com
Fun Website www.ShoutsCloud.com
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post March 18th, 2011, 3:54 pm

For me it shows a working menu in both IE and FF. What browser are you using? Are you sure you cleared your cache after making the changes?
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Joined: Jun 21, 2006
  • Posts: 487
  • Loc: Conroe, Texas
  • Status: Offline

Post March 18th, 2011, 3:58 pm

im using ie and its not showing anything... just the menu but not the pop ups.
Thanks, Josh --DemonMaestro
www.LilNetwork.com
Fun Website www.ShoutsCloud.com
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post March 18th, 2011, 4:02 pm

What version of IE? I am using IE8 and it worked fine, I put it in IE7 mode and it still works fine. Are you using a PC or MAC? Very strange.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Joined: Jun 21, 2006
  • Posts: 487
  • Loc: Conroe, Texas
  • Status: Offline

Post March 18th, 2011, 4:45 pm

ie6. its what we have at work,
Thanks, Josh --DemonMaestro
www.LilNetwork.com
Fun Website www.ShoutsCloud.com
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post March 19th, 2011, 9:33 am

Ahh I see, IE6 performs drastically different from IE7 and above. IE6 has been such a thorn in the past for developers. Many big companies have stopped making sure their websites are compatible for IE6, including Youtube:

http://www.techradar.com/news/internet/ ... ort-616309

I have also stopped worrying about IE6 as only about 2-3% of our visitors are stilling using it, and Microsoft has just released IE9. So to actually answer your question about why its not displaying properly in IE6, I am not sure. I no longer have any access to IE6 to run some tests, but there are many IE6 quirks and bugs here that you may be able to derive the answer from:

http://www.positioniseverything.net/explorer.html

Skip the first two as those are bugs for IE7 and IE8, the rest are for IE6 and any one of those bugs could be the cause here for why you are not seeing anything. The link directly above does show fixes for each bug, so you may try that if you really want to get this to work properly for IE6.
Ozzu Hosting - Want your website on a fast server like Ozzu?

Page 1 of 1

Post Information

  • Total Posts in this topic: 13 posts
  • Users browsing this forum: No registered users and 171 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.