drpop up menu help

  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Posts: 675
  • Loc: Conroe, Texas

Post 3+ Months Ago

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.         }    
  86.         


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>
  55.     <br>
  56.     <br>
  57. </body>
  58. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

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.         }    
  87.         
  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Posts: 675
  • Loc: Conroe, Texas

Post 3+ Months Ago

thanks alot it worked!
  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Posts: 675
  • Loc: Conroe, Texas

Post 3+ Months Ago

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/
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

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.
  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Posts: 675
  • Loc: Conroe, Texas

Post 3+ Months Ago

it works how ever it takes out one of the options when you scroll over the menu.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

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 :)
  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Posts: 675
  • Loc: Conroe, Texas

Post 3+ Months Ago

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

http://planetpeeps.com/work/work%20in%2 ... ss/source/
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

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?
  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Posts: 675
  • Loc: Conroe, Texas

Post 3+ Months Ago

im using ie and its not showing anything... just the menu but not the pop ups.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

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.
  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Posts: 675
  • Loc: Conroe, Texas

Post 3+ Months Ago

ie6. its what we have at work,
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

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.

Post Information

  • Total Posts in this topic: 13 posts
  • Users browsing this forum: No registered users and 186 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.