Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    53
    Thanks
    6
    Thanked 0 Times in 0 Posts

    dropdown menu bar with graphic that changes?

    Hi, I have created a horizontal menu bar that changes when hovered over, and also the hovered image stays when it is on that page (so it is an image split horizontally in the CSS).

    Does anybody know how to add a drop-down menu to various sections without messing up the horizontal menu? Are there any tutorials that have screenshots?

    The current HTML:

    Code:
    <div id="top_menu">
     <div id="navbar">
     <ul>
    			<li><a href="homepage" class="homepage1">Home</a></li>
    			<li><a href="leadership" class="leadership">Pastor and Leaders</a></li>
    			<li><a href="about" class="about">About Us</a></li>
    			<li><a href="churches" class="churches">Fellowship Churches</a></li>
    			<li><a href="ministries" class="ministries">Ministries</a></li>
    			<li><a href="media" class="media">Media</a></li>
    
    		</ul>
    	</div></div>
    the current css:

    Code:
    #top_menu {
    	text-align:center;
    	height: 54px;
    	width:1000px;
    	/*margin: 16px 50px 0 auto;*/
    	padding-bottom:10px;
    }
    #top_menu #navbar {
    	width: 1000px;
    	height: 54px;
    	margin: 0 auto;
    	
    }
    #top_menu #navbar ul{
        width: 1000px;
     	/*margin: 5px auto 0 auto;*/
     	list-style: none;
    }
    #top_menu #navbar ul li {
    	display: inline;
    }
    #top_menu #navbar ul li a {
        display: block;
        float: left;
        height: 54px;
        background-image: url(header_menu.png);
    	text-indent: -9999px;
    	font: bold 12px 'Bookman Old Style', Times, serif;
    	/*color: #000;*/
    	text-decoration: none;
    	/*padding: 0 9px 0 5px;*/
    	letter-spacing:-0.4px;
    }
    #top_menu #navbar ul li a.homepage {
        width: 168px;
        background-position: 0 0;
    	background-color: #f6edb6;
    }
    #top_menu #navbar ul li a.homepage1 {
        width: 168px;
        background-position: 0 -54px;
    	background-color: #f6edb6;
    }
    
    #top_menu #navbar ul li a.homepage:hover {
        width: 168px;
        background-position: 0 -54px;
    	background-color: #f6edb6;
    }
    #top_menu #navbar ul li a.leadership {
        width: 161px;
        background-position: -168px 0;
    	background-color: #f6edb6;
    }
    #top_menu #navbar ul li a.leadership:hover {
        width: 161px;
        background-position: -168px -54px;
    	background-color: #f6edb6;
    }
    #top_menu #navbar ul li a.leadership1 {
        width: 161px;
        background-position: -168px -54px;
    	background-color: #f6edb6;
    }
    
    #top_menu #navbar ul li a.about {
        width: 169px;
        background-position: -329px 0;
    	background-color: #f6edb6;
    }
    #top_menu #navbar ul li a.about:hover {
        width: 169px;
        background-position: -329px -54px;
    	background-color: #f6edb6;
    }
    #top_menu #navbar ul li a.about1 {
        width: 169px;
        background-position: -329px -54px;
    	background-color: #f6edb6;
    }
    
    #top_menu #navbar ul li a.churches {
        width: 169px;
        background-position: -498px 0;
    	background-color: #f6edb6;
    }
    #top_menu #navbar ul li a.churches:hover {
        width: 169px;
        background-position: -498px -54px;
    	background-color: #f6edb6;
    }
    #top_menu #navbar ul li a.churches1 {
        width: 169px;
        background-position: -498px -54px;
    	background-color: #f6edb6;
    }
    
    #top_menu #navbar ul li a.ministries {
        width: 167px;
        background-position: -667px 0;
    	background-color: #f6edb6;
    }
    #top_menu #navbar ul li a.ministries:hover {
        width: 167px;
        background-position: -667px -54px;
    	background-color: #f6edb6;
    }
    #top_menu #navbar ul li a.ministries1 {
        width: 167px;
        background-position: -667px -54px;
    	background-color: #f6edb6;
    }
    
    #top_menu #navbar ul li a.media {
        width: 166px;
        background-position: -834px 0;
    	background-color: #f6edb6;
    }
    #top_menu #navbar ul li a.media:hover {
        width: 166px;
        background-position: -834px -54px;
    	background-color: #f6edb6;
    }
    #top_menu #navbar ul li a.media1 {
        width: 166px;
        background-position: -834px -54px;
    	background-color: #f6edb6;
    }
    I want to add a drop-down menu to certain sections such as "about us" without displacing the graphic. Can anybody tell me how I can do that with just HTML and CSS?

  • #2
    New Coder
    Join Date
    Dec 2010
    Posts
    53
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Anybody?

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    http://www.cssplay.co.uk/menus/
    http://www.alistapart.com/articles/hybrid/

    I also found at the book "Stylin' with CSS" to be the most useful, particularly the chapter on dropdown menus. You should be able to check it out through your public library as an eBook and read it online, otherwise you'll have to get the actual book.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx


  •  

    Posting Permissions

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