Back To Website Design Forum

Zapatec CSS Drop-Down Menu

  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Sep 27, 2007
  • Posts: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Post August 5th, 2009, 11:03 am

Greetings,

I am trying to add a drop-down menu for my website. It appears to be working correctly in firefox.

However, internet explorer seems to be giving the menu some problems.

I have broken down the code into a simple example of what it is doing:

http://www.green-watch.org/test4.cfm

I want the menu to hover above the search bar like it does in firefox.

Here is the code for the menu:

HTML Code: [ Select ]
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<script type="text/javascript" src="http://www.green-watch.org/zapatec/utils/zapatec.js"></script>
<script type="text/javascript" src="http://www.green-watch.org/zapatec/zpmenu/src/zpmenu.js"></script>
 
<style>
 
body
{
    background: #FFF url(img/jpg/bg1_2.jpg) repeat-x 0 0;
}
 
#wrap
{
    margin: auto;
    text-align: left;
    width: 100%;
    position: relative;
}
 
#header, #search, #low-header, #menu, #body, #footer
{
    float: none;
    margin: auto;
}
 
    #header
    {
        background: url(img/gif/bg_header.gif) repeat-x 0 0;
        height: 121px; width: 100%;
        position: relative;
        background-color:#064A04;
    }
   
    #header .content
    {
        width: 795px;
        margin:auto;
    }
       
    #header .myHeaderBanner
    {
        width: 590px;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        height: 80px;
    }
       
#searchBar
{
    background: #E7E2CE;
    width: 100%;
    float: none;
    margin:auto;
    height:40px;
}   
   
#search
{
    background: url(img/gif/bg_search.gif) no-repeat right bottom;
    height: 35px; width: 795px;
    position: relative;
    border: 1px solid #e7e2ce;
}
       
.float
{
    float: left;
}      
           
</style>
 
</head>
 
<body>
 
  <div id="wrap">
 
    <div id="header" class="float">
   
      <div class="content">
             
        <div class="myHeaderBanner"></div>
 
          <ul id="menu-items">
                         
          <li><a href="#">businesses</a>
               
            <ul>
                 
              <li>Menu 1.0
                   
                <ul>
                     
                  <li>Submenu 1.0</li>
                  <li>Submenu 2.0</li>
                  <li>Submenu 3.0</li>
                     
                </ul>
                   
              </li>
                   
              <li>Menu 2.0</li>
              <li>Menu 3.0</li>
              <li>Menu 4.0</li>
                 
            </ul>
               
          </li>
           
        </ul>
   
        <script type="text/javascript">
        var myMenu = new Zapatec.Menu
        ({
            theme: "barblue",
            source: "menu-items"
        });
        </script>  
             
      </div>  
                         
    </div>
   
    <div id="searchBar" class="float">
 
      <div id="search" class="float">
                 
 
     
      </div>
     
    </div>
   
  </div>
 
</body>
 
</html>
 
 
  1.  
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6.  
  7. <head>
  8.  
  9. <script type="text/javascript" src="http://www.green-watch.org/zapatec/utils/zapatec.js"></script>
  10. <script type="text/javascript" src="http://www.green-watch.org/zapatec/zpmenu/src/zpmenu.js"></script>
  11.  
  12. <style>
  13.  
  14. body
  15. {
  16.     background: #FFF url(img/jpg/bg1_2.jpg) repeat-x 0 0;
  17. }
  18.  
  19. #wrap
  20. {
  21.     margin: auto;
  22.     text-align: left;
  23.     width: 100%;
  24.     position: relative;
  25. }
  26.  
  27. #header, #search, #low-header, #menu, #body, #footer
  28. {
  29.     float: none;
  30.     margin: auto;
  31. }
  32.  
  33.     #header
  34.     {
  35.         background: url(img/gif/bg_header.gif) repeat-x 0 0;
  36.         height: 121px; width: 100%;
  37.         position: relative;
  38.         background-color:#064A04;
  39.     }
  40.    
  41.     #header .content
  42.     {
  43.         width: 795px;
  44.         margin:auto;
  45.     }
  46.        
  47.     #header .myHeaderBanner
  48.     {
  49.         width: 590px;
  50.         margin: 0px 0px 0px 0px;
  51.         padding: 0px 0px 0px 0px;
  52.         height: 80px;
  53.     }
  54.        
  55. #searchBar
  56. {
  57.     background: #E7E2CE;
  58.     width: 100%;
  59.     float: none;
  60.     margin:auto;
  61.     height:40px;
  62. }   
  63.    
  64. #search
  65. {
  66.     background: url(img/gif/bg_search.gif) no-repeat right bottom;
  67.     height: 35px; width: 795px;
  68.     position: relative;
  69.     border: 1px solid #e7e2ce;
  70. }
  71.        
  72. .float
  73. {
  74.     float: left;
  75. }      
  76.            
  77. </style>
  78.  
  79. </head>
  80.  
  81. <body>
  82.  
  83.   <div id="wrap">
  84.  
  85.     <div id="header" class="float">
  86.    
  87.       <div class="content">
  88.              
  89.         <div class="myHeaderBanner"></div>
  90.  
  91.           <ul id="menu-items">
  92.                          
  93.           <li><a href="#">businesses</a>
  94.                
  95.             <ul>
  96.                  
  97.               <li>Menu 1.0
  98.                    
  99.                 <ul>
  100.                      
  101.                   <li>Submenu 1.0</li>
  102.                   <li>Submenu 2.0</li>
  103.                   <li>Submenu 3.0</li>
  104.                      
  105.                 </ul>
  106.                    
  107.               </li>
  108.                    
  109.               <li>Menu 2.0</li>
  110.               <li>Menu 3.0</li>
  111.               <li>Menu 4.0</li>
  112.                  
  113.             </ul>
  114.                
  115.           </li>
  116.            
  117.         </ul>
  118.    
  119.         <script type="text/javascript">
  120.         var myMenu = new Zapatec.Menu
  121.         ({
  122.             theme: "barblue",
  123.             source: "menu-items"
  124.         });
  125.         </script>  
  126.              
  127.       </div>  
  128.                          
  129.     </div>
  130.    
  131.     <div id="searchBar" class="float">
  132.  
  133.       <div id="search" class="float">
  134.                  
  135.  
  136.      
  137.       </div>
  138.      
  139.     </div>
  140.    
  141.   </div>
  142.  
  143. </body>
  144.  
  145. </html>
  146.  
  147.  


Thanks in advance for any suggestions on how to fix this problem.

Sincerely,
Travis Walters
twalters84@hotmail.com
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 5th, 2009, 11:03 am

  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post August 5th, 2009, 4:51 pm

Do you really need a multi-level drop down menu?
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Sep 27, 2007
  • Posts: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Post August 5th, 2009, 6:19 pm

Yes, I do need one.

This environmental website has a lot of features and a lot more are going to be implemented before the start of next year.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post August 5th, 2009, 6:45 pm

Check this out... they got multi-level CSS drop-down menus.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 5th, 2009, 11:49 pm

only a couple days ago I answered this question and wrote a piece of css code.

http://www.ozzu.com/website-design-forum/vertical-navigation-flyout-deep-css-t99314.html
Use your words like arrows to shoot toward your goal.

Page 1 of 1

Post Information

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

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