www.webdeveloper.com
Results 1 to 5 of 5

Thread: Drop Down Menu Help

  1. #1
    Join Date
    Feb 2006
    Posts
    24

    Drop Down Menu Help

    I am doing a web page for one of my teachers, but I have ran into a problem that I can not seem to fix.

    I have a menu bar underneath the header that is made up and placed using divs. Each div has a background image placed through css, so I can add text on top of it. I am using the list method to create vertical drop down menu on only one of the menu options but It is not working right. Because of image for the background, the menu either does not work, or it creates a blue box (the color of the drop down menus) over the image and it does not match the rest of my menu bar options. Is there a way to have an image as a background that drops down into a menu?

    If this is confusing please ask and I will try and provide more clearity.

    CSS Code:
    Code:
    body { background-color: #000; text-align: left; margin-top: 0; margin-left: 0; padding-top: 15px; padding-left: 15px; }
    td { }
    .option { color: white; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; text-align: center; padding-top: 10px; }
    h2 { color: white; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; text-align: center; text-align: center; width: 100px; height: 12px; z-index: 10; }
    a:link { }
    
    a:visited { }
    
    a:hover { }
    
    a:active { }
    #head { color: #fff; font-size: 30px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; background-image: url(../images/header.jpg); background-repeat: no-repeat; text-decoration: none; text-align: left; width: 1000px; height: 200px; margin-left: 50px; padding-left: 50px; }
    #title { position: absolute; top: 75px; left: 250px; }
    #menu1 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; vertical-align: bottom; position: absolute; top: 142px; left: 205px; width: 100px; height: 29px; }
    #menu2 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; position: absolute; top: 142px; left: 310px; width: 100px; height: 29px; vertical-align: bottom; }
    #menu3 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; position: absolute; top: 142px; left: 415px; width: 100px; height: 29px; vertical-align: bottom; }
    #menu4 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; position: absolute; top: 142px; left: 520px; width: 100px; height: 29px; vertical-align: bottom; }
    #menu5 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; position: absolute; top: 142px; left: 625px; width: 100px; height: 29px; vertical-align: bottom; list-style-type: none; }
    #dropdown { background-color: #00c; width: 100%; height: auto; float: left; }
    #dropdown ul { width: 100px; float: left; margin: 0; padding: 0; list-style-type: none; }
    #dropdown a { color: #fff; font-size: 10px; font-weight: bold; background-color: #00c; text-decoration: none; text-align: center; vertical-align: middle; margin: 0; padding-top: 6px; padding-bottom: 6px; border: solid 3px #000; display: block; }
    #dropdown a:hover { background-color: #000; }
    #dropdown li { position: relative; }
    #dropdown ul ul { position: absolute; top: 10px; z-index: 500; }
    div#dropdown ul ul { display: none; }
    div#dropdown ul li:hover ul { display: block; }
    Site Code:
    Code:
    <body>
    
    <div id="head">
       <div id="title">Al Gotlieb Gallery.com</div>
    </div>
    		
    <div id="menu1">
       <div class="option">Home</div>
    </div>
    
    <div id="menu2">
       <div class="option">Press Release</div>
    </div>
    
    <div id="menu3">
       <div class="option">Price List</div>
    </div>
    		
    <div id="menu4">
       <div class="option">Contact Me</div>
    </div>
    		
    <div id="menu5">
       <div class="options">Galleries</div>
       <div id="dropdown">
    	<ul>
    	<li>
    		<ul>
    		<li><a href="">Gallery 1</a></li>
    		<li><a href="">Gallery 2</a></li>
    		<li><a href="">Gallery 3</a></li>
    		</ul>
    	</li>
    	</ul>
       </div>	
    </div>
    </body>

  2. #2
    Join Date
    Feb 2006
    Posts
    24

    To make it simpler

    Can some please just tell me how to fix the Galleries thing on the end, and tell me why the drop down isnt working?

    Site Here

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    The dropdown works in browsers, just not IE. IE only understands those attributes in relation to anchor tags. I'd recommend you recode the whole menu as what it is, a list of links.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  4. #4
    Join Date
    Feb 2006
    Posts
    24
    what would be the best way to do that with drop down menus? using java script?

  5. #5
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    You can either use Javascript or something I think is called a behavior file for IE. Here's one. http://www.vladdy.net/demos/iepseudoclassesfix.html

    Here's my favorite Javascript menu. http://juicystudio.com/article/ecmascriptmenu.php
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles