Forum Moderators: not2easy
I've attached the html code for a test page I'm working on together with the CSS:
HTML
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:146px;
height:115px;
z-index:1;
left: 931px;
top: 58px;
}
#Layer2 {
position:absolute;
width:183px;
height:171px;
z-index:2;
left: 576px;
top: 307px;
}
#Layer3 {
position:absolute;
width:151px;
height:112px;
z-index:2;
left: 583px;
top: 295px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>UKGAC</h1>
<h2>Company Initials</h2>
<h2> </h2>
<h2> </h2>
<h2> </h2>
<h2>Company Name</h2>
</div>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Forms </a>
<li><a href="accreditation.html">Accreditation Info </a></li>
<li><a href="services.html">Services</a></li>
<li><a href="news.html">News & Events</a>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
CSS
/** Common Styles */
body {
margin: 30px 0 20px 0;
padding: 0;
background: #D7D7BD url(images/img01.png) repeat;
text-align: left;
line-height: 20px;
font-family: Tahoma, Arial, Helvetica, sans-serif, calibri;
font-size: 12px;
color: #4C4C4C;
float: right;
}
h1, h2, h3 {
padding: 0;
margin: 0;
color: #FF3232;
}
strong {
color: #000000;
}
p, ul, ol {
margin-bottom: 1.5em;
float: none;
padding-left: 23px;
}
ul {
margin: 0px;
padding: 0;
}
a {
color: #308AC0;
border-bottom: 1px #97C8E5 dotted;
}
a:hover {
text-decoration: none;
color: #005880;
}
/** Style for header starts here */
#header {
width: 800px;
height: 150px;
margin: 0px auto;
background: #FFAC16 url(images/img03.jpg) no-repeat left top;
}
#header h1, #header h2 {
padding: 0;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header h1 {
float: left;
padding: 43px 10px 10px 20px;
font-size: 4em;
}
#header h2 {
float: none;
margin:: 1.5em;
padding-left: 23px;
font-size: 20px;
}
/** Style for menu starts here */
#menu {
width: 800px;
height: 50px;
margin: 0px auto;
background: #000000;
}
#menu ul {
margin: 0px;
padding: 0 0 0 20px;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
border: none;
background: url(images/img05.jpg) no-repeat left 55%;
padding: 14px 30px 10px 12px;
text-decoration: none;
color: #FFFFFF;
}
#menu a:hover {
color: #FFFFFF;
font-weight: bold;
}
/** Style for wrapper starts here */
#wrapper {
width: 840px;
margin: 0px auto;
padding: 20px 0;
background: #FFFFFF url(images/img02.jpg) repeat-y left top;
}
The effect I'm trying to achieve is to have sub menus appear below the "services" and "news" top level menus. The sub-menus should just drop down immediately below the top level menus and should be the same (i.e. with the blue bullets against each sub menu).
I'd be eternally grateful for any help you can give me.
Thanks
[edited by: tedster at 4:45 pm (utc) on May 15, 2009]
[edit reason] Make company anonymous [/edit]
