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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Issue With Dropdown Navigation In CSS

    Before I get into any of the details of my problem, I want to start this post off by saying that I am certainly NOT an expert at CSS. Although I have had off-and-on experience working with the code through random little projects, this is still the first major site that I've ever worked on. I'm still learning about good coding practices, web standards, and the such, so please be easy on me if what I've written so far is too messy.

    Alright, my problem has to do with the new navigation that I've been trying to implement into a site for a client that I've acquired through my school's computer teacher. It's a small site for the fundraising club for our soccer team that involves nothing too complex, just a few tables for schedules, etc. For about a month, I've been in contact with the club and have already shown them my entire design and my ideas for each section, including a navigation layout derived from their past site. However, since the new season began this past week, they've been hammering me with extra statistics for each of the four teams at our school (boys varsity, boys junior varsity, etc.). I'm having absolutely no trouble getting all of the stuff written up, my only problem is with how I need to organize this entire mess.

    What I've decided to do is to take my old navigation bar, shown here...



    and change several of the sections to have dropdown menus (the modified buttons have the arrows beneath them). This means that instead of having Boys Schedules as I did before before, I now have Boys Team which will have a dropdown containing Schedules and Rosters.



    As with most sites, I used unordered lists to create my navigation bar. Here is the code for my original site before the modifications:
    Code:
    <!--Navigation--> 
    		<div id="nav"> 
    			<ul> 
       			<li class="current"><a href="index.htm"><span>Home</span></a></li> 
    			<li><a href="boy_schedule.htm"><span>Boy's Schedules</span></a></li> 
       			<li><a href="girl_schedule.htm"><span>Girl's Schedules</span></a></li> 
       			<li><a href="activities.htm"><span>Activities</span></a></li> 
       			<li><a href="summaries.htm"><span>Game Summaries</span></a></li> 
       			<li><a href="spirit.htm"><span>Spirit Store </span></a></li> 
       			<li><a href="stats.htm"><span>Statistics</span></a></li> 
                            <li><a href="coaches.htm"><span>Coaches &amp; Officers</span></a></li> 
       			</ul> 
        	</div> 
            <!--End Navigation-->
    Here is the CSS for my old design:
    Code:
    #nav{ 
    	background: url(../images/nav_fill.png) repeat-x;
    	height:31px;
    	width:830px;
    	border:1px solid;
    	border-color:#000000;
    	border-top:none;
    	border-bottom:none;
    	}
    
    #nav ul li{
    	display:inline;
    	float: left;
        margin: 0 1px 0 0;
    	}
    
    #nav ul{
        height: 2em;
        list-style: none;
        margin: 0;
        padding: 0;
    	}
    
    #nav ul a {
        background: url(../images/tab.png);
        color: #000000;
        display: block;
        float: left;
        height: 2em;
        padding-left: 10px;
        text-decoration: none;
    	}
    	
    #nav ul a:hover {
        background: url(../images/tab.png);
        color: #ffffff;
        display: block;
        float: left;
        height: 2em;
        padding-left: 10px;
        text-decoration: none;
    	}
    
    #nav ul span {
        background: url(../images/tab.png) 100% 0;
        display: block;
        line-height: 2em;
        padding-right: 10px;
    	}
    	
    #nav ul li.current a{
        color: #ffffff;
    	}
    Now, here is my new version to help accomodate the dropdown:
    Code:
    <!--Navigation-->  
    			<ul id="nav"> 
    				<li class="current"><a href="index.htm"><span>Home</span></a></li> 
    				<li><a href="boy_schedule.htm"><span>Boys Team</span></a> 
                		<ul> 
                    		<li><a href="boy_schedule.htm">Schedules</a></li> 
                        	<li><a href="boy_rosters.htm">Rosters</a></li> 
                    	</ul> 
    				</li> 
    				<li><a href="girl_schedule.htm"><span>Girls Team</span></a> 
    					<ul> 
                    		<li><a href="girl_schedule.htm">Schedules</a></li> 
                        	<li><a href="girl_rosters.htm">Rosters</a></li> 
                    	</ul> 
    				</li> 
    				<li><a href="activities.htm"><span>Activities</span></a></li> 
    				<li><a href="summaries.htm"><span>Game Summaries</span></a></li> 
    				<li><a href="spirit.htm"><span>Spirit Store </span></a></li> 
    				<li><a href="stats.htm"><span>Statistics</span></a> 
                		<ul> 
                    		<li><a href="boy_v_stats.htm">Boys Varsity</a></li> 
                        	<li><a href="boy_jv_stats.htm">Boys JV</a></li> 
                        	<li><a href="girl_v_stats.htm">Girls Varsity</a></li> 
                        	<li><a href="girl_jv_stats.htm">Girls JV</a></li> 
                    	</ul> 
                    </li> 
                	<li><a href="coaches.htm"><span>Coaches &amp; Officers</span></a> 
                		<ul> 
                    		<li><a href="coaches.htm">Contact Info</a></li> 
                        	<li><a href="coaches_bios.htm">Bios</a></li> 
                    	</ul> 
                    </li> 
    			</ul> 
            <!--End Navigation-->
    And here is the corresponding CSS:
    Code:
    #nav{ 
    	background: url(../images/nav_fill.png) repeat-x;
    	height:31px;
    	width:830px;
    	border:1px solid;
    	border-color:#000000;
    	border-top:none;
    	border-bottom:none;
    	}
    
    ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	height: 2em;
    	}
    	
    ul span {
        background: url(../images/tab.png) 100% 0;
        display: block;
        line-height: 2em;
        padding-right: 10px;
    	}
    	
    ul li a {
        background: url(../images/tab.png);
        color: #000000;
        display: block;
        float: left;
        height: 2em;
        padding-left: 10px;
        text-decoration: none;
    	}
    	
    ul li ul li a {
    	background: none;
    	padding: 5px 10px 5px 10px;
    	display: block;
    	poistion: relative;
    	}
    
    li {
    	float: left;
    	position: relative;
    	display:inline;
    	}
      
    li ul {
    	display: none;
    	position: absolute; 
    	top: 1em;
    	left: 0;
    	}
    	
    li > ul {
    	top: auto;
    	left: auto;
    	}
    	
    li:hover ul { display: block; }
    Now, I can get the mouseover effect to work. However, whenever I do, it will either show up inline or vertical with varying spaces in between. Also, I have not been able to figure out how I could get the dropdown area to have a one px black border and to add a background image.

    If I'm not explaining this clearly enough or if you'd like to see the entire site, let me know and I can either post a link to what I have so far or go into more detail.

    Thanks in advance!

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    A url is always the best.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

  • #4
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Hi Raeget,
    I have also had troubles in the past trying to create a horizontal navigation that also supports a vertical drop down menu.

    So I created a very detailed tutorial on each step of creating a PURE CSS horizontal and vertical pop out navigation menu.

    Check out my tutorial and I am sure you will find where it is you might need to alter the code slightly to make it preform the way you need.

    PURE CSS Horizontal Navigation Menu with sub menu.

    Hope this help m8.

  • Users who have thanked ubh for this post:

    Raeget (11-09-2008)


  •  

    Posting Permissions

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