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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pure CSS Drop Down Menu

    Hello, I'm trying to make a pure css drop down menu. I haven't found any good ways of doing this, without adding some javascript. I'm using nested lists for the navigation menu.
    I initially hide the sub menu with a "display:none", and I'm confused why this doesn't work:
    #nav a:hover ul{
    display: block;
    }

    Below is all of my code.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Welcome!</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    
    <style TYPE="text/css">
    html {
    	margin:0;
    	padding:0;
    }
    
    body {
    	margin: 0;
    	padding: 8px;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 76%;
    	background-color: #eee;
    	color: #000;
    }
    
    /* Top Navigation */
    
    	.clear {
    		clear:both;
    		font-size:0;
    		line-height:0;
    	}
    
    	#topNav {
    		margin: 10px 0px;
    		/*border: 1px solid #0f0;*/
    	}
    
    	#searchBox {
    		margin: 0;
    		padding: 0;
    		float: left;
    		width: 150px;
    		height: 125px;
    		border: 1px solid #000;
    		background: #fff;
    		text-align: center;
    	}
    
    	#nav {
    		
    		margin: 0px 0px 0px 155px;
    		padding: 0;
    		list-style: none;
    		
    	}
    
    	/* Hides from IE-mac \*/
    		* html #nav {height: 1%;}
    	/* End hide from IE-mac */
    
    	#nav li {
    		margin-left: 8px;
    		float: left;
    		display: inline;
    		width: 23%;
    		height: 125px;
    		border: 1px solid #000;
    		background-color: #235;
    		background-repeat: no-repeat;
    		background-position: 50% 100%;
    	}
    
    	#nav a {
    		text-decoration: none;
    		text-align: center;
    		font-size: 1.5em;
    		color: #FFF;
    		background: #c7013f;
    		display: block;
    	}
    
    	#nav li ul {
    		margin: 0;
    		padding: 0;
    		list-style: none;
    		border: 1px solid #0f0;
    		display: none;
    		}
    
    
    
    	#nav li ul li {
    		margin: 4px auto;
    		padding: 0px;
    		height: 1em;
    		width: 85%;
    		display: block;
    
    		
    	}
    
    	#nav li ul li a {
    		font-size: 1.1em;
    		background: #c7013f;
    
    	}
    
    	#nav a.mainMenu:hover {
    		background-color: #235;
    	}
    
    /* Display the sub menu when rollover link */
    
    	#nav a.mainMenu:hover ul{
    		display: block;
    	}
    
    	#nav li ul li a:hover {
    		background: #235;
    	}
    
    
    
    
    /* Side Navigation */
    
    	#sideNav {
    		float: left;
    		width: 151px; /* 1px adjustment for no border */
    		margin-right: 10px;
    	}
    	
    	#sideNav .box {
    		margin-bottom: 10px;
    		padding: 5px 5px 5px 50px;
    		border: 1px solid #000;
    		height: 90px;  /* add 10 for padding */
    		background: #235;
    		color: #fff;
    		background-repeat: no-repeat;
    	}
    	#sideNav a {
    		font-size: 1em;
    		color: #fff;
    		text-decoration: none;
    	}
    
    	#sideNav #calendar {
    		margin: 0px;
    	}
    
    	#sideNav img {
    		border-style: none;
    		width: 150px;
    		height: 150px;
    	}
    	
    	#sideNav a:hover {
    		font-weight: bold;
    	}
    
    /* Main Content Container */
    
    	#main {
    		float: auto;
    		margin: 0px 0px 0px 163px;
    		padding: 10px;
    		border: 1px solid #000; 
    		background: #fff;
    	}
    
    
    /* Page Footer */
    
    	#footer {
    		clear: both;
    		background: #235;
    		border: 1px solid #000;
    	
    		color: #aaa;
    		text-align: center;
    	
    		margin: 10px 0px 0px 0px;
    		padding: 20px;
    	}
    
    	#footer a {
    		color: #fff;
    		font: underline;
    	}
    
    	#footer a:hover {
    		font-weight: bold;
    		letter-spacing: .1em;
    	}
    </style>
    
    <!--[if lte IE 6]>
    <style type="text/css">
    #fixBox {
    margin-right:-3px;
    }
    #dynamicBoxContainer {
    margin-left:8px;
    height:1%;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    
    
    <div id="topNav">
    	<!-- Search Box -->
    
    	<div id="searchBox">
    		Welcome, <b>John Doe</b>!
    		[<a href="#">Admin</a>] [<a href="#">Sign Out</a>]
    	  	<form action="" name="search">
    	    		<input type="text" size="14" name="searchQuery" />
    			
    	    		<input type="submit" value="Search" />
    	  	</form>
    	</div>	
    	<ul id="nav">
    		<li>
    			<a class="mainMenu" href="#">Foundation</a>
    			<ul>
    				<li>
    					<a href="charter.html">Charter</a></li>
    				<li>
    					<a href="#">Committee</a></li>
    				<li>
    					<a href="#">Schedule</a></li>
    
    				<div class="clear">&nbsp;</div>
    			</ul>
    			
    			
    		</li>
    		<li>
    			<a class="mainMenu" href="#">Volunteer</a>
    <ul>
    				<li>
    					<a href="#">Charter</a></li>
    				<li>
    					<a href="#">Committee</a></li>
    				<li>
    					<a href="#">Schedule</a></li>
    				<div class="clear">&nbsp;</div>
    			</ul>
    			
    		</li>
    	
    		<li>
    		<a class="mainMenu" href="#">Submission</a>
    	<ul>
    				<li>
    					<a href="#">Charter</a></li>
    				<li>
    					<a href="#">Committee</a></li>
    				<li>
    					<a href="#">Schedule</a></li>
    			</ul>
    		
    		</li>
    
    		<li>
    		<a  class="mainMenu" href="#">Recipients</a>
    			<ul>
    				<li>
    					<a href="#">Charter</a></li>
    				<li>
    					<a href="#">Committee</a></li>
    				<li>
    					<a href="#">Schedule</a></li>
    			</ul>
    		</li>
    	<div class="clear">&nbsp;</div>
    	</ul>
    <div class="clear">&nbsp;</div>
    
    </div>
    
    <div id="sideNav">
    	<div class="box">
    		<a href="#">link</a></div>
    	<div class="box">
    		<a href="#">link</a></div>
    	<div class="box">
    		<a href="#">link</a></div>
    
    </div>
    
    <!-- Main Content -->
    
    <div id="main">
    
    	Maecenas ut quam rutrum lacus tempus fringilla. Maecenas aliquam tempus libero. Mauris porttitor. 
    
    Etiam at risus a est sodales cursus. Cras ut ipsum. Vivamus at turpis ac lorem posuere rutrum. Vestibulum nisi 
    
    nulla, rhoncus a, rhoncus sit amet, placerat ac, justo. Nam consequat mauris ut orci. Etiam eleifend. Ut sem 
    
    mauris, imperdiet vitae, consectetuer a, ullamcorper non, nibh. Curabitur sapien. Fusce ultricies, ligula eget 
    
    scelerisque tempus, nisi nisl convallis dui, ut scelerisque magna est sit amet leo. Suspendisse facilisis 
    
    tortor faucibus elit. Sed diam. Duis imperdiet blandit mauris. Etiam cursus erat vel ligula.
    				
    
    </div>
    
    
    <div id="footer">
    <a href="#">Feedback</a>
    	| <a href="#">Contact</a>
    	| <a href="#">Site Map</a>
    	| <a href="#">Privacy</a>
    	| <a href="#">Legal</a>
    	<br /><br />
    	Donec aliquet tincidunt velit. Aliquam erat volutpat.<br />
    	Mauris ante. Suspendisse a leo ut leo tristique porta.<br />
    	Aliquam iaculis sem tristique massa fringilla faucibus.
    </div>
    
    
    </div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    Can you show an example page?

    D.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    No sense in doing all that work when you can freely borrow someone else's. Stu Nichols gives these away:

    http://www.cssplay.co.uk/menus/

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was looking at Stu's work, but it seems so overly complicated for what I'm trying to do. Is it really the simplest best way?

    I don't have somewhere that I can freely host the page right now, but here is the code for JUST the navigation menu. Does anyone know why I can't display the nested list with an a:hover style.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Welcome!</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    
    
    
    
    <style>
    html {
    	margin:0;
    	padding:0;
    }
    
    body {
    	margin: 0;
    	padding: 5px;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 76%;
    	background-color: #eee;
    	color: #000;
    }
    
    .clear {
    	clear:both;
    	font-size:0;
    	line-height:0;
    }
    
    
    /* Top Navigation */
    
    
    	#topNav {
    		margin: 10px 0px;
    		border: 1px solid #0f0;
    	}
    
    	#searchBox {
    		margin: 0;
    		padding: 0;
    		float: left;
    		width: 150px;
    		height: 125px;
    		border: 1px solid #000;
    		background: #fff;
    		text-align: center;
    	}
    
    	#nav {
    		margin: 0px 0px 0px 155px;
    		padding: 0;
    		list-style: none;
    		border: 1px dotted #0f0;
    		
    	}
    
    
    	/* Hides from IE-mac \*/
    		* html #nav {height: 1%;}
    	/* End hide from IE-mac */
    
    	#nav li {
    		margin-left: 8px;
    		float: left;
    		display: inline;
    		width: 23%;
    		height: 125px;
    		border: 1px solid #000;
    		background-color: #235;
    		background-repeat: no-repeat;
    		background-position: 50% 100%;
    	}
    
    	#nav a {
    		text-decoration: none;
    		text-align: center;
    		font-size: 1.5em;
    		color: #FFF;
    		background: #c7013f;
    		display: block;
    	}
    
    	#nav a.mainMenu:hover {
    		background-color: #235;
    	}
    
    
    
    	#nav li ul {
    		margin: 0;
    		padding: 0;
    		list-style: none;
    		border: 1px solid #0f0;
    		display: none;
    		}
    
    	#nav li a.mainMenu:hover ul{
    		display: block;
    	}
    
    	#nav li ul li {
    		margin: 4px auto;
    		padding: 0px;
    		height: 1em;
    		width: 85%;
    		display: block;
    
    		
    	}
    
    	#nav li ul li a {
    		font-size: 1.1em;
    		background: #c7013f;
    
    	}
    
    	#nav li ul li a:hover {
    		background: #235;
    	}
    
    </style>
    
    <!--[if lte IE 6]>
    <style type="text/css">
    #searchBox {
    margin-right:-3px;
    }
    #nav {
    margin-left:8px;
    height:1%;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    
    
    <div id="topNav">
    	<!-- Search Box -->
    
    	<div id="searchBox">
    		Welcome, <b>John Doe</b>!
    		[<a href="#">Admin</a>] [<a href="#">Sign Out</a>]
    	  	<form action="" name="search">
    	    		<input type="text" size="14" name="searchQuery" />
    			
    	    		<input type="submit" value="Search" />
    	  	</form>
    	</div>	
    	<ul id="nav">
    		<li id="nav-foundation">
    			<a class="mainMenu" href="foundation.html">Foundation</a>
    			<ul>
    				<li id="nav-charter">
    					<a href="#">Charter</a></li>
    				<li id="nav-committee">
    					<a href="#">Committee</a></li>
    				<li id="nav-schedule"><a href="#">Schedule</a></li>
    				<div class="clear">&nbsp;</div>
    			</ul>
    			
    			
    		</li>
    		<li id="nav-volunteer">
    			<a class="mainMenu" href="#">Volunteer</a>
    <ul>
    				<li id="nav-charter">
    					<a href="#">Charter</a></li>
    				<li id="nav-committee">
    					<a href="#">Committee</a></li>
    				<li id="nav-schedule"><a href="#">Schedule</a></li>
    				<div class="clear">&nbsp;</div>
    			</ul>
    			
    		</li>
    	
    		<li id="nav-submission">
    		<a class="mainMenu" href="#">Submission</a>
    	<ul>
    				<li id="nav-charter">
    					<a href="#">Charter</a></li>
    				<li id="nav-committee">
    					<a href="#">Committee</a></li>
    				<li id="nav-schedule"><a href="#">Schedule</a></li>
    				<div class="clear">&nbsp;</div>
    			</ul>
    		
    		</li>
    
    		<li id="nav-recipients">
    		<a  class="mainMenu" href="#">Recipients</a>
    			<ul>
    				<li id="nav-charter">
    					<a href="#">Charter</a></li>
    				<li id="nav-committee">
    					<a href="#">Committee</a></li>
    				<li id="nav-schedule"><a href="#">Schedule</a></li>
    				<div class="clear">&nbsp;</div>
    			</ul>
    		</li>
    	<div class="clear">&nbsp;</div>
    	</ul>
    <div class="clear">&nbsp;</div>
    
    </div>
    
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I found a much simpler menu at Stu's that I'm going to try to mimic.

    http://www.cssplay.co.uk/menus/basic_dd.html

  • #6
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making Progress!

    Ok, so I'm still rather stuck. I've been trying to modify Stu's menu system to work for me. I have a slightly different situation, since I'm trying to get the drop down menu to display inside of the main menu boxes. The boxes also expand based on window size. Any help would be greatly appreciated!!

    Here is Stu's barebones drop down menu:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Welcome!</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    
    <style type="text/css">
    
    /* remove the bullets, padding and margins from the lists */
    .menu ul{
    list-style-type:none;
    padding:0;
    margin:0;
    }
    
    /* make the top level links horizontal and position relative so that we can position the sub level */
    .menu li{
    float:left;
    position:relative;
    z-index:100;
    }
    
    /* use the table to position the dropdown list */
    .menu table{
    position:absolute;
    border-collapse:collapse;
    z-index:80;
    left:-1px;
    top:25px;
    }
    
    /* style all the links */
    .menu a, .menu :visited {
    display:block;
    font-size:10px;
    width:149px;
    padding:7px 0;
    color:#000;
    background:#949e7c;
    text-decoration:none;
    margin-right:1px;
    text-align:center;
    }
    /* style the links hover */
    .menu :hover{
    color:#444;
    background:#d4d8bd;
    }
    
    /* hide the sub level links */
    .menu ul ul {
    visibility:hidden;
    position:absolute;
    width:149px;
    height:0;
    }
    /* make the sub level visible on hover list or link */
    .menu ul li:hover ul,
    .menu ul a:hover ul{
    visibility:visible;
    }
    
    
    </style>
    
    </head>
    
    <body>
    <div class="menu">
    
    <ul>
    <li><a href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
    	<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
    	<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
    	<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
    	<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
    	<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
    	<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
    	<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
    	<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
    	<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
    	</ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    
    <li><a href="index.html">MENUS<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
    	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
    	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
    	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
    	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
    	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
    	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    	<li><a href="circles.html" title="circular links">circular links</a></li>
    	</ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    
    <li><a href="../layouts/index.html">LAYOUTS<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
    	<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
    	<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
    	<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
    	<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
    	<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
    	</ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    
    <li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
    	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
    	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
    	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
    	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
    	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
    	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    	<li><a href="circles.html" title="circular links">circular links</a></li>
    	</ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    
    <li><a  href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
    	<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
    	<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
    	<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
    	<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
    	<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
    	<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
    	<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
    	<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
    	<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
    	</ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    
    </ul>
    
    
    </div>
    
    </body>
    </html>
    And here is my implemented version of it:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Welcome!</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    
    <style>
    html {
    	margin:0;
    	padding:0;
    }
    
    body {
    	margin: 0;
    	padding: 5px;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 76%;
    	background-color: #eee;
    	color: #000;
    }
    
    .clear {
    	clear:both;
    	font-size:0;
    	line-height:0;
    }
    
    
    /* Top Navigation */
    
    
    	#topNav {
    		margin: 10px 0px;
    		border: 1px solid #ff0;
    	}
    
    	#searchBox {
    		margin: 0;
    		padding: 0;
    		float: left;
    		width: 150px;
    		height: 125px;
    		border: 1px solid #000;
    		background: #fff;
    		text-align: center;
    	}
    
    	#nav {
    		margin: 0px 0px 0px 155px;
    		padding: 0;
    		border: 1px solid #0f0;
    	}
    
    	#nav ul {
    		list-style-type: none;
    		padding: 0;
    		margin: 0;
    	}
    
    	#nav li {
    		
    		margin-left: 8px;
    		float: left;
    /*
    		position: relative;
    		z-index: 100;
    */
    		display: inline;
    		width: 23%;
    		height: 125px;
    		border: 1px solid #000;
    		background-color: #235;
    		background-repeat: no-repeat;
    		background-position: 50% 100%;
    	}
    
    	#nav table {
    /*
    		position:absolute;
    		z-index:80;
    
    */
    		border-collapse: collapse;
    		left: -1px;
    		top:25px;
    	}
    
    	#nav a {
    		display: block;
    		font-size: 1.5em;
    		color: #FFF;
    		background: #c7013f;
    		text-decoration: none;
    		text-align: center;
    	}
    
    	#nav ul li:hover a, #nav ul a:hover {
    		background-color: #235;
    	}
    
    	#nav ul ul {
    		margin: 0;
    		padding: 0;
    		visibility: hidden;
    		border: 1px solid #0f0;
    /*
    		position: absolute;
    */
    		}
    
    	#nav ul ul li {
    		margin: 0 auto;
    		height: 1em;
    		width: 95%;
    	}
    
    
    	#nav ul li:hover ul, #nav ul a:hover ul{
    		visibility: visible;
    	}
    
    </style>
    
    <!--[if lte IE 6]>
    <style type="text/css">
    #searchBox {
    margin-right:-3px;
    }
    #nav {
    margin-left:8px;
    height:1%;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    
    
    <div id="topNav">
    	<!-- Search Box -->
    
    	<div id="searchBox">
    		Welcome, <b>John Doe</b>!
    		[<a href="#">Admin</a>] [<a href="#">Sign Out</a>]
    	  	<form action="" name="search">
    	    		<input type="text" size="14" name="searchQuery" />
    			
    	    		<input type="submit" value="Search" />
    	  	</form>
    	</div>
    
    	<div id="nav">	
    		<ul>
    		<li>
    			<a href="#">Foundation<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul>
    				<li>
    					<a href="#">Charter</a>
    				</li>
    				<li>
    					<a href="#">Committee</a>
    				</li>
    				<li>
    					<a href="#">Schedule</a>
    				</li>
    				<div class="clear">&nbsp;</div>
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		</li>
    
    		<li>
    			<a href="#">Volunteer<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul>
    				<li>
    					<a href="#">Charter</a>
    				</li>
    				<li>
    					<a href="#">Committee</a>
    				</li>
    				<li>
    					<a href="#">Schedule</a>
    				</li>
    				<div class="clear">&nbsp;</div>
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		</li>
    	
    		<li>
    		<a href="#">Submission<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul>
    				<li>
    					<a href="#">Charter</a>
    				</li>
    				<li>
    					<a href="#">Committee</a>
    				</li>
    				<li>
    					<a href="#">Schedule</a>
    				</li>
    				<div class="clear">&nbsp;</div>
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		</li>
    
    		<li>
    		<a href="#">Recipients<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul>
    				<li>
    					<a href="#">Charter</a>
    				</li>
    				<li>
    					<a href="#">Committee</a>
    				</li>
    				<li>
    					<a href="#">Schedule</a>
    				</li>
    				<div class="clear">&nbsp;</div>
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		</li>
    	<div class="clear">&nbsp;</div>
    	</ul>
    <div class="clear">&nbsp;</div>
    	</div>
    
    </div>
    
    </body>
    </html>

  • #7
    Regular Coder
    Join Date
    Jul 2007
    Location
    England
    Posts
    132
    Thanks
    24
    Thanked 0 Times in 0 Posts
    Removed.
    Last edited by Mehdi72; 07-26-2007 at 05:19 PM.

  • #8
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I've made some progress on these drop down menus. I'm still having visual differences between FF and IE. The code is also very messy. I was hoping someone could take a look at help me clean it up and fix the IE problems.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Welcome!</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    
    <style>
    html {
    	margin:0;
    	padding:0;
    }
    
    body {
    	margin: 0;
    	padding: 5px;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 76%;
    	background-color: #eee;
    	color: #000;
    }
    
    .clear {
    	margin:0;
    	padding:0;
    	clear:both;
    	font-size:0;
    	line-height:0;
    }
    
    
    /* Top Navigation */
    
    
    	#topNav {
    		margin: 10px 0px;
    		padding: 0;
    /*		border: 1px solid #ff0; */
    	}
    
    	#searchBox {
    		margin: 0;
    		padding: 0;
    		float: left;
    		width: 150px;
    		height: 125px;
    		border: 1px solid #000;
    		background: #fff;
    		text-align: center;
    	}
    
    	#nav {
    		margin: 0px 0px 0px 153px;
    		padding: 0;
    /*		border: 1px solid #0f0; */
    	}
    
    	#nav ul {
    		list-style-type: none;
    		padding: 0;
    		margin: 0;
    	}
    
    	#nav li {
    		margin-left: 8px;
    		float: left;
    		display: inline;
    		width: 23%;
    		height: 125px;
    		border: 1px solid #000;
    		background-color: #235;9:18 AM 7/27/2007
    /*
    		position: relative;
    		z-index: 100;
    */
    	}
    
    	#nav table {
    		border-collapse: collapse;
    		left: -1px;
    		top:25px;
    /*
    		position:absolute;
    		z-index:80;
    */
    	}
    
    	#nav table a {
    		font-size: 12px;
    		display: block;
    		color: #fff;
    		text-decoration: none;
    		text-align: center;
    		background: #c7013f;
    	}
    
    	#nav ul li a.main {
    		display: block;
    		font-size: 18px;
    		color: #FFF;
    		background: #c7013f;
    		text-decoration: none;
    		text-align: center;
    	}
    
    	#nav ul ul {
    		margin: 0 auto;
    		padding: 0;
    /*		border: 1px solid #0f0; */
    		width: 90%;
    		display: none;
    
    /*
    		visibility: hidden;
    		position: absolute; 
    */
    		}
    
    
    	#nav ul ul li {
    		margin: 4px 0px;
    		padding: 0;
    /*		border: 1px solid #fff; */
    		height: 15px;
    		width: 100%;
    	}
    
    	#nav ul ul li a {
    		font-size: 12px;
    		display: block;
    		color: #fff;
    		text-decoration: none;
    		text-align: center;
    		background: #c7013f;
    
    	}
    
    	#nav ul li:hover a.main, #nav ul a.main:hover {
    		background-color: #235;
    	}
    
    	#nav ul li:hover ul, #nav ul a:hover ul{
    		display:block;
    
    	/*	visibility: visible; */
    
    	}
    
    	#nav ul ul li:hover a, #nav ul ul a:hover {
    		background-color: #235;
    	}
    
    </style>
    
    <!--[if lte IE 6]>
    <style type="text/css">
    #searchBox {
    margin-right:-3px;
    }
    #nav {
    margin-left:8px;
    height:1%;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    
    
    <div id="topNav">
    	<!-- Search Box -->
    
    	<div id="searchBox">
    		Welcome, <b>John Doe</b>!
    		[<a href="#">Admin</a>] [<a href="#">Sign Out</a>]
    	  	<form action="" name="search">
    	    		<input type="text" size="14" name="searchQuery" />
    			
    	    		<input type="submit" value="Search" />
    	  	</form>
    	</div>
    
    	<div id="nav">	
    		<ul>
    		<li>
    			<a class="main" href="#">Foundation<!--[if IE 
    
    7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul>
    				<li>
    					<a href="#">Charter</a>
    				</li>
    				<li>
    					<a href="#">Committee</a>
    				</li>
    				<li>
    					<a href="#">Schedule</a>
    				</li>
    
    				<div class="clear">&nbsp;</div>
    
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		</li>
    
    		<li>
    			<a class="main" href="#">Volunteer<!--[if IE 
    
    7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul>
    				<li>
    					<a href="#">Charter</a>
    				</li>
    				<li>
    					<a href="#">Committee</a>
    				</li>
    				<li>
    					<a href="#">Schedule</a>
    				</li>
    
    				<div class="clear">&nbsp;</div>
    
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		</li>
    	
    		<li>
    		<a class="main" href="#">Submission<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul>
    				<li>
    					<a href="#">Charter</a>
    				</li>
    				<li>
    					<a href="#">Committee</a>
    				</li>
    				<li>
    					<a href="#">Schedule</a>
    				</li>
    
    				<div class="clear">&nbsp;</div>
    
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		</li>
    
    		<li>
    		<a class="main" href="#">Recipients<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul>
    				<li>
    					<a href="#">Charter</a>
    				</li>
    				<li>
    					<a href="#">Committee</a>
    				</li>
    				<li>
    					<a href="#">Schedule</a>
    				</li>
    
    				<div class="clear">&nbsp;</div>
    
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		</li>
    	<div class="clear">&nbsp;</div>
    	</ul>
    <div class="clear">&nbsp;</div>
    	</div>
    
    </div>
    
    </body>
    </html>
    Thanks in advance!


  •  

    Posting Permissions

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