www.webdeveloper.com
Results 1 to 11 of 11

Thread: Add code to a menu button to make a drop-down...

  1. #1
    Join Date
    Jul 2011
    Posts
    6

    Add code to a menu button to make a drop-down...

    Hi. I have a row of menu buttons on my church's website, one of which (Archives) links to a page with multiple links. I'd like to change that one button to display a drop-down list. I've read many tutorials on how to create a drop-down list but I want to keep the buttons I already have; I was wondering if it was possible to simply add code to the existing page or style sheet to modify just that one button to make it a drop-down.

    I tried adding the following code to the Archives button...

    Code:
    <div id="menu">
    		<ul>
    			<li id="button1"><a href="http://cbcwalbrook.org/" title="">Home</a></li>
    			<li id="button2"><a href="/doctrine.html" title="">Doctrine</a></li>
    			<li id="button3"><a href="/history.html" title="">History</a></li>
    			<li id="button4"><a href="/ministries.html" title="">Ministries</a></li>
    			<li id="button5"><a href="/archives.html" title="">Archives</a>
    				<ul>
    					<li><a href="/videos.html" title="">Videos</a></li>
    					<li><a href="/pictures.html" title="">Pictures</a></li>
    				</ul></li>
    		</ul>
    	</div>
    ... but all that did was create additional buttons. Am I pursuing an impossible goal using CSS?


    http://cbcwalbrook.org/

    Thank you.

    silas

  2. #2
    Join Date
    Jul 2006
    Posts
    207
    Code:
    #menu ul ul {
    position: absolute;
    visibility: hidden;
    }
    
    #menu li:hover ul {
    visibility: visible;
    }
    Use that in addition to what you have and remove float: left; from #menu a and add it to #menu li.

  3. #3
    Join Date
    Jul 2011
    Posts
    6
    Thanks for your reply, Cory. I did exactly as you recommended but the result was still additional buttons rather than a drop-down (see image).

    http://cbcwalbrook.org/images/dropdownbuttons.jpg

    silas

  4. #4
    Join Date
    Jul 2006
    Posts
    207
    It works correctly for me in Firebug. Can you add it to your site so I can see what the problem is?

  5. #5
    Join Date
    Jul 2011
    Posts
    6
    Here ya go...

    http://cbcwalbrook.org/

    silas

  6. #6
    Join Date
    Jul 2006
    Posts
    207
    What I see in the top 5 latest version browsers: http://i51.tinypic.com/vgkj01.png

    What browser and version are you using?

  7. #7
    Join Date
    Jul 2011
    Posts
    6
    Now that's really weird. I viewed it in IE 9, Firefox 5.0, Chrome 12 and Safari 5.0.5 and it appears the same in each, with the Pictures tab beside the Videos, rather than under it.

  8. #8
    Join Date
    Jul 2006
    Posts
    207
    What's your resolution and OS?

  9. #9
    Join Date
    Jul 2011
    Posts
    6
    I'm on Win 7 Home Prem. (32) @ 1280 x 800.

  10. #10
    Join Date
    Jul 2006
    Posts
    207
    Add width: 1&#37;; to #menu ul ul

  11. #11
    Join Date
    Jul 2011
    Posts
    6
    That did it. You're brilliant. Thank you so much for your help.

    silas

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