2 replies [Last post]
JustinErswell
Offline
newbie
Rye, East Sussex
Last seen: 10 years 22 weeks ago
Rye, East Sussex
Joined: 2009-03-11
Posts: 2
Points: 0

Hi Everyone

I am trying to put a menu together with two levels one with TABS (images) and the sub menu just as text.

I want the sub menu to sit underneath the main tabs

I have heard tell of nested ul's but im struggling to get the submenu to appear where i want it to

Code: (HTML)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 
  <% base_tag %>
  $MetaTags
  <title>Marshall Products | $Title</title>
 
		<!--[if IE 7]>
			<style type="text/css">
			 @import url(themes/marshalls/css/layout.css);
			</style> 
		<![endif]-->
 
</head>
 
<body>
<div id="content">
  <div id="header">
      <img style="padding-left: 10px; float: left" src="$ThemeDir/images/logo.gif" alt="Marshall Product's" />
   	  <div id="top_info"><img src="$ThemeDir/images/marshallcrestcolor.gif" alt="Marshall Products" width="59" height="75" /><br />
		<script type="text/javascript">
		var d = new Date();
		document.write(d.toLocaleString());
		</script>
	  </div>
  </div>
 
  <div id="tabs" style="padding-left: 8px; text-align: center; position: relative; z-index: 3;">
    <% if Menu(1) %>
    <ul>
      <% control Menu(1) %>	  
        <li><a href="$Link" title="Go to the $Title page" class="$LinkingMode">$MenuTitle</a></li>
      <% end_control %>
    </ul>
    <% end_if %>
  </div>  
    <div id="subs">
		<ul>
		<% control Menu(2) %>	  
		    <li><a href="$Link" title="Go to the $Title page" class="$LinkingMode">$MenuTitle</a></li>
		<% end_control %>
		</ul>
	</div>
 
 	  <div class="gboxtop" style="background-color: #ffffff;"></div>
	  <div class="gbox" style="text-align: center;">
       <h2 style="color: #ffffff; font-weight: 16px;">The Specialists in Airway Management</h2>
 
	  </div> 
 
  <div id="left">
	<div class="left_articles">
		$Layout
	</div>
  </div>
 
		<div class="footer">
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="15%"><img src="$ThemeDir/images/ISO.gif" alt="Bunzl" width="148" height="60" /> </td>
                <td width="85%" align="right"><img src="$ThemeDir/images/bunzl.gif" alt="ISO9001" width="148" height="60" /> <img src="$ThemeDir/images/NHSFoot.gif" alt="NHS Supply Chain" width="148" height="60" /> <img src="$ThemeDir/images/neoforce.gif" alt="NeoForce" width="148" height="60" /></td>
              </tr>
            </table>
			<p>· <a href="#">About US</a> · <a href="#">Contact Us</a> · <a href="#" title="Terms & Conditions">Terms & Conditions</a> · <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> · <br />
			© Copyright 2009 Marshall Products · Design: <a href="http://www.erswell.co.uk" title="Justin Erswell | Web & Software">Justin Erswell</a></p>
	  </div>
</div>
</body>
</html>

Code CSS:

body { padding: 0; margin: 0; font: 0.7em Tahoma, Arial, sans-serif; line-height: 1.6em; background: #fff; color: #454545; }
 
/* links */
a { color: #003B6E; background: inherit; }
a:hover { color: #9EC068; background: inherit; }	
 
/* headings */
h1 { font: bold 2.5em "Arial", Sans-Serif; margin: 0; letter-spacing: -1px; }
h2 { font: bold 2em Arial, Sans-Serif; margin: 0; padding: 0; }
h1 a, h2 a { color: #2b2b2b; background: #fff; text-decoration: none; }
h1 a:hover, h2 a:hover { color: #2b2b2b; background: #FFF; }
.title { color: #808080; background: #fff; }
 
/* lists and form elements */
ul { margin: 0; padding : 0; list-style : none; }
form { margin: 0; }
input.search { width: 279px; border: none; background: #fff url(../images/input.gif) no-repeat; padding: 6px 10px; color: #1E67A8; font-weight: bold; }
input.button { padding: 3px; }
 
/* content holder */
#content { margin: 10px auto; width: 960px; background-image: url(../images/bg.gif); background-repeat:no-repeat; background-position: center; }
 
/* header */
#header {
	height: 90px;
}
#logo { padding: 15px 0 10px 8px; }
#logo p { margin: 0; padding: 0 0 0 10px; color: #808080; background: #fff; }
#top_info {
	float: right;
	width: 570px;
	text-align: right;
	height: 75px;
}
 
/* horizontal tabbed menu */	
#tabs {
	background: #fff url('../images/bigbox.gif') no-repeat top left;
	color: #000;
	height: 64px;
	text-align: center;
	padding: 0 0 0 0;
	position: relative;
	z-index: 2;
}
#tabs li { display: inline; height: 45px; }
#tabs li a {float: left; background: #fff url(../images/barbg.gif) no-repeat; color: #808080; padding: 7px 0; width: 82px; text-align: center; font-weight: bold; text-decoration: none; }
#tabs li a:hover { background: #fff url(../images/barcurrent.gif) no-repeat; color: #000; }	
#tabs li a.current { background: #fff url(../images/barcurrent.gif) no-repeat; color: #2C71AE; }	
.key { text-decoration: underline; }
 
#subs {
	color: #ffffff;
	padding-top: -100px;
	list-style-type: none;
	padding-left: 10px;
	position: absolute;
	z-index: 1;
}
#subs a { color: #ffffff; text-decoration: none;}
#subs li a :hover {color:2b2b2b; text-decoration: underline; } 
 
/* search form */
#search { 
	float: left;
	clear: both;
	color: #000;
	background: #fff url(../images/searchbg.gif) no-repeat;
	padding: 14px 0 20px 5px;
	width: 500px;
	margin: 5px 0 0 0;
}
	#search p { padding: 0; margin: 0; }
 
 
/* grey subheader */
.gboxtop { clear: both; height: 8px; background: #dedede url(../images/gboxtop.gif) no-repeat; color: #000; }
.gbox {
	background: #ffffff url(../images/gbox.gif) no-repeat bottom left;
	color: #444;
	padding: 1px 13px 7px 13px;
	margin: 0 0 20px 0;
}
.gbox p { padding: 7px 0; margin: 0;}
 
 
/* left side */
.left { float: left; width: 650px; margin: 0 0 10px 0; }
	.left_articles {
		margin: 0 20px 15px 10px;
		padding: 10px 0 0 0;
		text-align: justify;
		border-bottom: 1px dotted #ccc;
		color: #000;
		background-color: transparent;
	}
.leftfullwidth { float: left; width: 950px; margin: 0 0 10px 0; }
 
	.calendar { height: 50px; float: left; background: #fff url(../images/calendar.gif) no-repeat; width: 50px; padding: 5px 0 0 6px;  color: #808080;}
	.calendar p { padding: 0; margin: 0; }
	.calendarx2 { height: 50px; float: left; background: #fff url(../images/calendarx2.gif) no-repeat; width: 90px; padding: 5px 0 0 10px;  color: #808080;}
	.calendarx2 p { padding: 0; margin: 0; }
	.description { padding: 0 0 2px 0; margin: 0 10px 5px 0; border-bottom: 1px dotted #ccc; }
	.thumbnail { float: left; margin: 0 18px 8px 0; border: 1px solid #dedede; }
	.pdf { height: 50px; float: left; background: #fff url(../images/pdf_icon.gif) no-repeat; width: 50px; padding: 5px 0 0 9px;  color: #808080;}
 
/* bottom thirds */
.thirds { float: left; width: 203px; background: #eee; margin: 0 12px 0 0; color: #5d5d5d; }
	.smallboxtop { height: 14px; background: #fff url(../images/smallboxtop.gif) no-repeat; color: #000; }
	.smallbox { background: #fff url(../images/smallbox.gif) no-repeat bottom left; color: #444; padding: 1px 10px 10px 10px; height: 206px }
	.smallbox p { padding: 0; margin: 0; }
 
 
/* right side */
#right {
	float: right;
	width: 295px;
	margin: 0 0 10px 0;
}
	.boxtop { height: 19px; background: #fff url(../images/boxtop.gif) no-repeat; color: #000; }
	.box { background: #fff url(../images/box.gif) no-repeat bottom left; color: #5b5b5b; padding: 0 10px 15px 10px; margin: 0 0 10px 0; }
	.box p { padding: 0; margin: 0;}
	.image { float: left; margin: 0 9px 3px 0; }
 
 
/* misc */
.buttons { text-align: right; padding: 4px 3px 0 0;}
.left_articles .buttons { float: right; height: 20px; }
.bluebtn { background: #488EB2 url(../images/bluebtn.gif) no-repeat; width: 100px; padding: 1px 16px 5px 16px; color: #fff; text-decoration: none; }
.greenbtn { background: #488EB2 url(../images/greenbtn.gif) no-repeat; padding: 1px 17px 5px 16px; color: #fff; text-decoration: none; }
.bluebtn:hover, .greenbtn:hover { background: #488EB2 url(../images/hoverbtn.gif) no-repeat; color: #fff; }
 
/* footer  */
.footer { clear: both; text-align: center; line-height: 1.8em; padding: 10px 0 10px 0; border-top: 1px solid #ccc; }
 
/* Misc Styles */
#year {color: #4884B9;font-weight: bold;}

I am really stuck here so any help is really appreciated

Cheers

Justin

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 8 years 24 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Welcome to the forum

Welcome to the forum Justin.

Do you have a live url that I can see the problem further?

JustinErswell
Offline
newbie
Rye, East Sussex
Last seen: 10 years 22 weeks ago
Rye, East Sussex
Joined: 2009-03-11
Posts: 2
Points: 0

Thank you

Hi Josh

Thanks so much for the reply

The url is http://www.marshallproducts.info

Thanks

Justin