lulu50
asked on
Horizontal Menu
Hi,
I can't get my horizontal menu to work correctly and I don't know how to fix it.
Please help me!
This is what I have
CSS code
My HTML code
Thanks,
Lulu
I can't get my horizontal menu to work correctly and I don't know how to fix it.
Please help me!
This is what I have
CSS code
* {
margin: 0; padding: 0;
}
body {
text-align: center;
font: 11px Verdana;
color: #333333;
background: #EEEEEE url(../images/backgroundtop.gif) repeat-x 0 0;
}
a {
color: #4A79A5;
}
a:hover {
text-decoration: none;
color: #a51d43;
/* color: #ff0000; */
}
img {
border: 0;
}
.break {
font-size: 0;
width: 0; height: 0;
clear: both;
}
.alignleft {
float: left;
margin: 4px 10px 5px 0;
}
.alignright {
float: right;
margin: 4px 0 5px 10px;
}
.aligncenter {
text-align: center;
}
.hidden {
display: none;
}
/** BEGIN wrapper **/
#wrapper {
width: 100%;
margin: auto auto;
text-align: left;
}
/** END wrapper **/
/** BEGIN header **/
#header {
overflow: hidden;
}
#header .pages {
list-style-type: none;
height: 20px;
padding-top: 7px;
background: url(../images/bgcolorHeaderup.jpg);
/* background-color: #6d90b0; */
}
#header .pages li {
float: left;
text-transform: uppercase;
font-size: 0.9em;
}
#header .pages li a {
display: block;
text-decoration: none;
color: #a51d43;
font-weight: bold;
display: block;
padding: 0px; 12px;
border-width: 0 1px;
border-style: solid;
border-color: #F0F0F0;
}
#header .pages li a:hover {
border-color: #ffffff;
}
#header .logo {
float: left;
clear: both;
height: 70px;
}
#header .logo h1 {
text-transform: uppercase;
font-size: 2.5em;
padding-top: 3px;
}
#header .logo h1 a {
text-decoration: none;
}
#header .logo p {
font-weight: bold;
text-transform: uppercase;
color: #888888;
}
#header .Welcome {
float: right;
margin-right:15px;
margin-top:10px;
}
#header .categories {
list-style-type: none;
height: 30px;
margin-left: -15px;
background: #EEEEEE url(../images/background.gif) repeat-x 0 0;
}
#header .categories li {
float: left;
}
#header .categories li a {
display: block;
padding: 9px 30px 6px;
text-decoration: none;
border-width: 0 1px;
border-style: solid;
border-color: #F0F0F0;
}
#header .categories li a:hover {
/*border-color: #ffffff; */
font-weight: bold;
color: #ffffff;
background-color: #a51d43;
}
.topHeader {
border:solid;
border:1px;
border-top:#cccbcb;
border-bottom:#cccbcb;
width:100%;
background: url(../images/bgcolorHeader.jpg);
}
.HeaderTitle
{
float:left;
width:300px;
margin-left:200px;
margin-top:15px;
}
/** END header **/
/** BEGIN sidebars **/
.box {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
padding: 6px;
margin-bottom: 10px;
}
.box h2 {
background-color: #b8b8b9;
/* 9c9d9f */
color: #ffffff;
font-size: 1em;
text-transform: uppercase;
padding: 4px;
}
.SubDivBox{
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
#lsidebar {
width: 200px;
float: left;
padding-bottom: 10px;
}
#lsidebar ul {
list-style-type: none;
}
#lsidebar ul li {
line-height: 1.4em;
padding: 4px 0 4px 17px;
background: url(../images/bullet.gif) no-repeat 2px 9px;
border-bottom: 1px dotted #B6B6B6;
}
#lsidebar ul li a {
color: #333333;
text-decoration: none;
}
#lsidebar ul li a:hover {
color: #4A79A5;
text-decoration: underline;
}
#rsidebar {
/* width: 315px; */
width:15%;
float: right;
padding-bottom: 10px;
}
#rsidebar .ads {
padding: 0 7px;
text-align: center;
}
#rsidebar .ads img {
margin: 7px;
}
#rsidebar form {
height: 33px;
background: url(../images/search.gif) no-repeat center 0;
}
#rsidebar form input {
border: 0;
/*width: 290px;*/
width:15%;
margin: 9px 0 0 5px;
}
#rsidebar form button {
display: none;
}
#rsidebar ul {
list-style-type: none;
padding: 5px 8px;
}
#rsidebar ul li {
line-height: 1.4em;
padding: 5px 0;
}
#rsidebar ul li a {
font-weight: bold;
}
#rsidebar ul li p {
padding-top: 5px;
}
#rsidebar .flickr {
text-align: center;
padding: 0 7px;
}
#rsidebar .flickr img {
margin: 6px;
}
#rsidebar .video {
padding: 2px;
}
#rsidebar .tags {
padding: 2px 6px;
}
#rsidebar .tags a {
}
#rsidebar .tags a:hover {
}
/** END sidebars **/
/** BEGIN content **/
#content {
margin-left:200px;
padding: 0 10px 10px 0px;
}
#featured {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
margin-bottom: 10px;
padding: 6px;
}
#content .featured {
position: relative;
padding: 0 6px 12px;
height: 240px;
}
#featured h2 {
background-color: #d6d7d7;
color: #ffffff;
font-size: 12px;
text-transform: uppercase;
padding: 10px;
margin-bottom: 5px;
font-weight:bold;
}
#content .featured .comments a {
position: absolute;
display: block;
width: 31px; height: 25px;
background: url(../images/comments.gif) no-repeat 0 0;
top: 5px; right: 10px;
text-align: center;
font-size: 0.8em;
color: #333333;
text-decoration: none;
padding-top: 5px;
}
#content .featured h3 {
font-size: 1.5em;
margin-bottom: 10px;
font-weight: normal;
padding: 0 50px 0 4px;
}
/* #content .featured img {
float: left;
margin: 5px 10px 10px 4px;
width: 134px; height: 134px;
} */
#content .featured p {
line-height: 1.4em;
margin-bottom: 10px;
padding: 0 4px;
}
#content .featured .details {
clear: both;
text-transform: uppercase;
font-size: 0.8em;
margin-bottom: 0;
}
#content .featured .details a {
color: #333333;
text-decoration: none;
}
#content .featured .details a:hover {
color: #4A79A5;
text-decoration: underline;
}
#content .recent {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
padding: 6px;
margin-bottom: 10px;
}
#content .post {
position: relative;
padding: 5px;
margin-bottom: 10px;
}
#content .recent h2 {
background-color: #4A79A5;
color: #ffffff;
font-size: 1em;
text-transform: uppercase;
padding: 4px;
margin-bottom: 5px;
}
#content .post .comments a {
position: absolute;
display: block;
width: 31px; height: 25px;
background: url(../images/comments.gif) no-repeat 0 0;
top: 10px; right: 10px;
text-align: center;
font-size: 0.8em;
color: #333333;
text-decoration: none;
padding-top: 5px;
}
#content .post h3 {
font-size: 1.5em;
margin-bottom: 10px;
font-weight: normal;
padding: 0 50px 0 4px;
}
#content .post img {
float: left;
margin: 5px 10px 10px 4px;
width: 134px; height: 134px;
}
#content .post p {
line-height: 1.4em;
margin-bottom: 10px;
padding: 0 4px;
}
#content .post .details {
clear: both;
text-transform: uppercase;
font-size: 0.8em;
margin-bottom: 0;
}
#content .post .details a {
color: #333333;
text-decoration: none;
}
#content .post .details a:hover {
color: #4A79A5;
text-decoration: underline;
}
#content .postnav {
clear: both;
padding: 10px 0;
}
#content .postnav ul {
list-style-type: none;
padding: 10px;
}
#content .postnav ul li {
float: left;
color: #B5B4BC;
padding: 4px;
}
#content .postnav ul li a {
color: #636363;
text-decoration: none;
display: block;
padding: 2px 6px;
border: 1px solid #E2E2E2;
}
#content .postnav ul li a:hover {
border-color: #ffffff;
}
#wp_page_numbers ul {
border-top: 0 !important;
}
#wp_page_numbers .page_info {
padding: 3px 6px !important;
margin-right: 2px;
border: 1px solid #e0e0e0 !important;
margin-top: 4px;
}
#wp_page_numbers .active_page a {
background-color: #ffffff !important;
border: 0 !important;
}
/** END content **/
/** BEGIN footer **/
#footer {
clear: both;
background-color: #4A79A5;
color: #2E4B54;
font-size: 0.9em;
height: 35px;
padding-top: 20px;
padding-bottom: 20px;
}
#footer a {
color: #ffffff;
}
#footer .wrapper {
width: 960px;
margin: auto auto;
text-align: left;
}
#footer .l {
float: left;
}
#footer .r {
float: right;
}
/** END footer **/
/** BEGIN miscellaneous **/
#content .single {
padding: 2px;
}
#content .single p {
line-height: 1.5em;
margin-bottom: 10px;
}
#content .single ul, #content .single ol {
list-style-position: inside;
margin-bottom: 10px;
}
#content .single li {
line-height: 1.5em;
padding: 2px 0;
}
#content .single blockquote {
padding: 10px 10px 5px;
margin-bottom: 10px;
background-color: #eeeeee;
border-width: 1px 0;
border-style: solid;
border-color: #e0e0e0;
}
#content .single h3, #content .single h4, #content .single h5, #content .single h6 {
font-size: 1.2em;
margin-bottom: 5px;
}
#comments {
padding: 2px;
}
#comments a {
text-decoration: none;
}
#comments h2 {
font-size: 1.6em;
margin: 10px 0;
}
#comments p {
margin-bottom: 10px;
line-height: 1.6em;
}
#comments form {
}
#comments form p {
margin-bottom: 5px;
}
#comments form input {
margin-right: 5px;
}
#comments form input, textarea {
border: 1px solid #cccccc;
font-size: 0.9em;
font-family: Verdana;
padding: 4px;
background-position: 4px 4px;
background-repeat: no-repeat;
}
#comments form input {
width: 240px;
border: 1px solid #cccccc;
}
#comments form textarea {
width: 350px;
padding: 4px 4px !important;
border: 1px solid #cccccc;
}
#comments form button {
border: 1px solid #a0a0a0;
font-size: 1em;
font-family: Verdana;
padding: 2px 6px;
}
.commentdetails {
margin-top: 25px;
}
.commentauthor {
margin-bottom: 5px !important;
font-weight: bold;
}
.commentdate {
font-size: 0.8em;
margin-bottom: 5px;
color: #909090;
}
.required {
color: #ff0000;
}
h2.title {
font-size: 1em !important;
text-transform: uppercase;
padding: 10px;
color: #565656;
}
.notfound {
padding: 40px;
}
.notfound h2 {
font-size: 18px;
font-weight: normal;
margin-bottom: 10px;
}
/** END miscellaneous **/
#comments ol {
list-style-type: none;
clear: both;
padding: 0;
margin: 0;
}
#comments .buffer {
padding: 10px;
}
#comments ol li {
margin-bottom: 10px;
}
#comments ol li ul li {
border: 1px solid #e0e0e0;
padding: 10px;
}
#comments ol li .avatar {
float: right;
}
#comments ol li .comment-author {
}
#comments ol li .comment-author .fn {
font-weight: bold;
font-size: 1.2em;
}
#comments ol li .comment-meta {
font-size: 0.9em;
color: #999999;
margin: 5px 0 10px;
}
#comments ol li .reply {
font-size: 0.9em;
font-weight: bold;
padding-bottom: 10px;
}
#comments .children {
list-style-type: none;
}
#comments .navigation {
padding: 0 0 40px;
font-size: 0.9em;
}
#comments .navigation a {
color: #999999;
padding: 3px 8px;
border: 1px solid #cccccc;
}
#comments .navigation a:hover {
color: #000000;
border-color: #000000;
text-decoration: none;
}
#comments .says {
display: none;
}
.footerfont {
font-family:Verdana, Geneva, sans-serif;
font-size:8pt;
text-align:center;
color:#eaeaea;
text-decoration:none;
font-weight:bold;
cursor:pointer;
}
.hdr {
font-size: 13px;
padding: 10px;
background-position: top left;
background-repeat: repeat-x;
background-color: #eaeaea;
border: solid 1px #dddddd;
color:#4a79a5;
font-weight:bold;
}
.leftcolbox {
background-color: #fcfcfc;
border: solid 1px #dddddd;
padding: 10px;
color: #555555;
line-height: 1.3em;
}
.msgcnttitle {
background-color: #f4f9f9;
max-height: 35px;
font-size: 13px;
margin: auto;
padding: 10px;
color:#7a7a7b;
font-weight:bold;
border: solid 1px #dddddd;
}
.ErrorStyle {
color: #FFF;
display: inline-block;
padding: 1px 2px;
font-weight:bold;
color:#F00;
}
/* beginning Navigation Style*/
#nav ul li a {
color:#FFF;
}
#nav ul li.active {
background-color:#a51d43;
}
/* end Navigation Style*/
.LeftMenuLine{
border-bottom-style:dotted;
border-bottom-width:1px;
border-bottom-color:#dddddd;
}
/* beginning Upload*/
input.fileStyle {
position: relative;
font-family: calibri;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #f1f2f2;
cursor:pointer;
width:500px;
color:#3d6183;
font-weight:bold;
}
/* end Upload
a {
color: #4A79A5;
}
a:hover {
text-decoration: none;
color: #a51d43;
}*/
.leftcolbox a:hover
{
text-decoration:underline;
color: #000;
}
.leftcolbox a
{
text-decoration: none;
color: #a51d43;
}
hr
{
color:#4a79a5;
}
.ListGridHeader
{
/*background-color:#b8b8b9;*/
height:20px;
color:#fff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.RotateRow
{
color:#4a79a5;
}
.paggingRcd
{
cursor:pointer;
color:#a51d43;
text-decoration: none;
}
.paggingRcd:hover
{
text-decoration: underline;
color:#000000;
}
.Redcolor
{
color:#b72035;
}
/* Begin Menu Navigation */
/* End Menu Navigation */
My HTML code
<!-- BEGIN header -->
<div id="header">
<!-- begin pages -->
<ul class="pages">
<li class="f"><a href="index.html">Business Configuration Unit
1-800-555-5555</a></li>
<li class="f" style="text-align:right;float:right;margin-right:30px;font-weight:bold;"><span style="color:#888888;">Welcome <cfoutput>#GetSomeUsers.givenName#</cfoutput></span></li>
</ul>
<!-- end pages -->
<!-- begin logo and header -->
<div class="topHeader">
<div class="logo" id="sub-header"><img src="images/Logo.jpg" /></div>
<div class="HeaderTitle"><p style="color:#4a79a5; text-transform::uppercase; font-size:24px; font-weight:bold;"> BLAZE UNIT TESTING </p></div>
</div>
<!-- end logo and header -->
<!-- begin categories -->
<menu id="nav">
<ul class="categories" style="font-size:12px;">
<li><a href="index.cfm" class="index" style="padding-left:-5px; padding-right:15px;font-weight:bold;">Home</a></li>
<li><a href="AddRule.cfm" class="AddRule" target="_self" style="font-weight:bold;">Add New Testing Rule</a></li>
<li><a href="#" class="Report" style="font-weight:bold;">Report</a>
<ul>
<li><a href="#">Report 1</a></li>
<li><a href="#">Report 2</a></li>
<li><a href="#">Report 3</a></li>
</ul>
</li>
<li><a href="#" class="Contact" style="font-weight:bold;">Contact Us</a></li>
</ul>
</menu>
<!-- end categories -->
</div>
<!-- END header -->
Thanks,
Lulu
ASKER
I can't get it to work
It tested fine in Firefox. Can you post the css again? It's possible you did not add the new definitions far enough down in the css to override what you have already.
ASKER
I'm using IE
I have not changed anything with HTML
this is what I added in the CSS
I have not changed anything with HTML
this is what I added in the CSS
* {
margin: 0; padding: 0;
}
body {
text-align: center;
font: 11px Verdana;
color: #333333;
background: #EEEEEE url(../images/backgroundtop.gif) repeat-x 0 0;
}
a {
color: #4A79A5;
}
a:hover {
text-decoration: none;
color: #a51d43;
/* color: #ff0000; */
}
img {
border: 0;
}
.break {
font-size: 0;
width: 0; height: 0;
clear: both;
}
.alignleft {
float: left;
margin: 4px 10px 5px 0;
}
.alignright {
float: right;
margin: 4px 0 5px 10px;
}
.aligncenter {
text-align: center;
}
.hidden {
display: none;
}
/** BEGIN wrapper **/
#wrapper {
width: 100%;
margin: auto auto;
text-align: left;
}
/** END wrapper **/
/** BEGIN header **/
#header {
overflow: hidden;
}
#header .pages {
list-style-type: none;
height: 20px;
padding-top: 7px;
background: url(../images/bgcolorHeaderup.jpg);
/* background-color: #6d90b0; */
}
#header .pages li {
float: left;
text-transform: uppercase;
font-size: 0.9em;
}
#header .pages li a {
display: block;
text-decoration: none;
color: #a51d43;
font-weight: bold;
display: block;
padding: 0px; 12px;
border-width: 0 1px;
border-style: solid;
border-color: #F0F0F0;
}
#header .pages li a:hover {
border-color: #ffffff;
}
#header .logo {
float: left;
clear: both;
height: 70px;
}
#header .logo h1 {
text-transform: uppercase;
font-size: 2.5em;
padding-top: 3px;
}
#header .logo h1 a {
text-decoration: none;
}
#header .logo p {
font-weight: bold;
text-transform: uppercase;
color: #888888;
}
#header .Welcome {
float: right;
margin-right:15px;
margin-top:10px;
}
#header .categories {
list-style-type: none;
height: 30px;
margin-left: -15px;
background: #EEEEEE url(../images/background.gif) repeat-x 0 0;
}
#header .categories li {
float: left;
}
#header .categories li a {
display: block;
padding: 9px 30px 6px;
text-decoration: none;
border-width: 0 1px;
border-style: solid;
border-color: #F0F0F0;
}
#header .categories li a:hover {
/*border-color: #ffffff; */
font-weight: bold;
color: #ffffff;
background-color: #a51d43;
}
.topHeader {
border:solid;
border:1px;
border-top:#cccbcb;
border-bottom:#cccbcb;
width:100%;
background: url(../images/bgcolorHeader.jpg);
}
.HeaderTitle
{
float:left;
width:300px;
margin-left:200px;
margin-top:15px;
}
/** END header **/
/** BEGIN sidebars **/
.box {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
padding: 6px;
margin-bottom: 10px;
}
.box h2 {
background-color: #b8b8b9;
/* 9c9d9f */
color: #ffffff;
font-size: 1em;
text-transform: uppercase;
padding: 4px;
}
.SubDivBox{
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
#lsidebar {
width: 200px;
float: left;
padding-bottom: 10px;
}
#lsidebar ul {
list-style-type: none;
}
#lsidebar ul li {
line-height: 1.4em;
padding: 4px 0 4px 17px;
background: url(../images/bullet.gif) no-repeat 2px 9px;
border-bottom: 1px dotted #B6B6B6;
}
#lsidebar ul li a {
color: #333333;
text-decoration: none;
}
#lsidebar ul li a:hover {
color: #4A79A5;
text-decoration: underline;
}
#rsidebar {
/* width: 315px; */
width:15%;
float: right;
padding-bottom: 10px;
}
#rsidebar .ads {
padding: 0 7px;
text-align: center;
}
#rsidebar .ads img {
margin: 7px;
}
#rsidebar form {
height: 33px;
background: url(../images/search.gif) no-repeat center 0;
}
#rsidebar form input {
border: 0;
/*width: 290px;*/
width:15%;
margin: 9px 0 0 5px;
}
#rsidebar form button {
display: none;
}
#rsidebar ul {
list-style-type: none;
padding: 5px 8px;
}
#rsidebar ul li {
line-height: 1.4em;
padding: 5px 0;
}
#rsidebar ul li a {
font-weight: bold;
}
#rsidebar ul li p {
padding-top: 5px;
}
#rsidebar .flickr {
text-align: center;
padding: 0 7px;
}
#rsidebar .flickr img {
margin: 6px;
}
#rsidebar .video {
padding: 2px;
}
#rsidebar .tags {
padding: 2px 6px;
}
#rsidebar .tags a {
}
#rsidebar .tags a:hover {
}
/** END sidebars **/
/** BEGIN content **/
#content {
margin-left:200px;
padding: 0 10px 10px 0px;
}
#featured {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
margin-bottom: 10px;
padding: 6px;
}
#content .featured {
position: relative;
padding: 0 6px 12px;
height: 240px;
}
#featured h2 {
background-color: #d6d7d7;
color: #ffffff;
font-size: 12px;
text-transform: uppercase;
padding: 10px;
margin-bottom: 5px;
font-weight:bold;
}
#content .featured .comments a {
position: absolute;
display: block;
width: 31px; height: 25px;
background: url(../images/comments.gif) no-repeat 0 0;
top: 5px; right: 10px;
text-align: center;
font-size: 0.8em;
color: #333333;
text-decoration: none;
padding-top: 5px;
}
#content .featured h3 {
font-size: 1.5em;
margin-bottom: 10px;
font-weight: normal;
padding: 0 50px 0 4px;
}
/* #content .featured img {
float: left;
margin: 5px 10px 10px 4px;
width: 134px; height: 134px;
} */
#content .featured p {
line-height: 1.4em;
margin-bottom: 10px;
padding: 0 4px;
}
#content .featured .details {
clear: both;
text-transform: uppercase;
font-size: 0.8em;
margin-bottom: 0;
}
#content .featured .details a {
color: #333333;
text-decoration: none;
}
#content .featured .details a:hover {
color: #4A79A5;
text-decoration: underline;
}
#content .recent {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
padding: 6px;
margin-bottom: 10px;
}
#content .post {
position: relative;
padding: 5px;
margin-bottom: 10px;
}
#content .recent h2 {
background-color: #4A79A5;
color: #ffffff;
font-size: 1em;
text-transform: uppercase;
padding: 4px;
margin-bottom: 5px;
}
#content .post .comments a {
position: absolute;
display: block;
width: 31px; height: 25px;
background: url(../images/comments.gif) no-repeat 0 0;
top: 10px; right: 10px;
text-align: center;
font-size: 0.8em;
color: #333333;
text-decoration: none;
padding-top: 5px;
}
#content .post h3 {
font-size: 1.5em;
margin-bottom: 10px;
font-weight: normal;
padding: 0 50px 0 4px;
}
#content .post img {
float: left;
margin: 5px 10px 10px 4px;
width: 134px; height: 134px;
}
#content .post p {
line-height: 1.4em;
margin-bottom: 10px;
padding: 0 4px;
}
#content .post .details {
clear: both;
text-transform: uppercase;
font-size: 0.8em;
margin-bottom: 0;
}
#content .post .details a {
color: #333333;
text-decoration: none;
}
#content .post .details a:hover {
color: #4A79A5;
text-decoration: underline;
}
#content .postnav {
clear: both;
padding: 10px 0;
}
#content .postnav ul {
list-style-type: none;
padding: 10px;
}
#content .postnav ul li {
float: left;
color: #B5B4BC;
padding: 4px;
}
#content .postnav ul li a {
color: #636363;
text-decoration: none;
display: block;
padding: 2px 6px;
border: 1px solid #E2E2E2;
}
#content .postnav ul li a:hover {
border-color: #ffffff;
}
#wp_page_numbers ul {
border-top: 0 !important;
}
#wp_page_numbers .page_info {
padding: 3px 6px !important;
margin-right: 2px;
border: 1px solid #e0e0e0 !important;
margin-top: 4px;
}
#wp_page_numbers .active_page a {
background-color: #ffffff !important;
border: 0 !important;
}
/** END content **/
/** BEGIN footer **/
#footer {
clear: both;
background-color: #4A79A5;
color: #2E4B54;
font-size: 0.9em;
height: 35px;
padding-top: 20px;
padding-bottom: 20px;
}
#footer a {
color: #ffffff;
}
#footer .wrapper {
width: 960px;
margin: auto auto;
text-align: left;
}
#footer .l {
float: left;
}
#footer .r {
float: right;
}
/** END footer **/
/** BEGIN miscellaneous **/
#content .single {
padding: 2px;
}
#content .single p {
line-height: 1.5em;
margin-bottom: 10px;
}
#content .single ul, #content .single ol {
list-style-position: inside;
margin-bottom: 10px;
}
#content .single li {
line-height: 1.5em;
padding: 2px 0;
}
#content .single blockquote {
padding: 10px 10px 5px;
margin-bottom: 10px;
background-color: #eeeeee;
border-width: 1px 0;
border-style: solid;
border-color: #e0e0e0;
}
#content .single h3, #content .single h4, #content .single h5, #content .single h6 {
font-size: 1.2em;
margin-bottom: 5px;
}
#comments {
padding: 2px;
}
#comments a {
text-decoration: none;
}
#comments h2 {
font-size: 1.6em;
margin: 10px 0;
}
#comments p {
margin-bottom: 10px;
line-height: 1.6em;
}
#comments form {
}
#comments form p {
margin-bottom: 5px;
}
#comments form input {
margin-right: 5px;
}
#comments form input, textarea {
border: 1px solid #cccccc;
font-size: 0.9em;
font-family: Verdana;
padding: 4px;
background-position: 4px 4px;
background-repeat: no-repeat;
}
#comments form input {
width: 240px;
border: 1px solid #cccccc;
}
#comments form textarea {
width: 350px;
padding: 4px 4px !important;
border: 1px solid #cccccc;
}
#comments form button {
border: 1px solid #a0a0a0;
font-size: 1em;
font-family: Verdana;
padding: 2px 6px;
}
.commentdetails {
margin-top: 25px;
}
.commentauthor {
margin-bottom: 5px !important;
font-weight: bold;
}
.commentdate {
font-size: 0.8em;
margin-bottom: 5px;
color: #909090;
}
.required {
color: #ff0000;
}
h2.title {
font-size: 1em !important;
text-transform: uppercase;
padding: 10px;
color: #565656;
}
.notfound {
padding: 40px;
}
.notfound h2 {
font-size: 18px;
font-weight: normal;
margin-bottom: 10px;
}
/** END miscellaneous **/
#comments ol {
list-style-type: none;
clear: both;
padding: 0;
margin: 0;
}
#comments .buffer {
padding: 10px;
}
#comments ol li {
margin-bottom: 10px;
}
#comments ol li ul li {
border: 1px solid #e0e0e0;
padding: 10px;
}
#comments ol li .avatar {
float: right;
}
#comments ol li .comment-author {
}
#comments ol li .comment-author .fn {
font-weight: bold;
font-size: 1.2em;
}
#comments ol li .comment-meta {
font-size: 0.9em;
color: #999999;
margin: 5px 0 10px;
}
#comments ol li .reply {
font-size: 0.9em;
font-weight: bold;
padding-bottom: 10px;
}
#comments .children {
list-style-type: none;
}
#comments .navigation {
padding: 0 0 40px;
font-size: 0.9em;
}
#comments .navigation a {
color: #999999;
padding: 3px 8px;
border: 1px solid #cccccc;
}
#comments .navigation a:hover {
color: #000000;
border-color: #000000;
text-decoration: none;
}
#comments .says {
display: none;
}
.footerfont {
font-family:Verdana, Geneva, sans-serif;
font-size:8pt;
text-align:center;
color:#eaeaea;
text-decoration:none;
font-weight:bold;
cursor:pointer;
}
.hdr {
font-size: 13px;
padding: 10px;
background-position: top left;
background-repeat: repeat-x;
background-color: #eaeaea;
border: solid 1px #dddddd;
color:#4a79a5;
font-weight:bold;
}
.leftcolbox {
background-color: #fcfcfc;
border: solid 1px #dddddd;
padding: 10px;
color: #555555;
line-height: 1.3em;
}
.msgcnttitle {
background-color: #f4f9f9;
max-height: 35px;
font-size: 13px;
margin: auto;
padding: 10px;
color:#7a7a7b;
font-weight:bold;
border: solid 1px #dddddd;
}
.ErrorStyle {
color: #FFF;
display: inline-block;
padding: 1px 2px;
font-weight:bold;
color:#F00;
}
/* beginning Navigation Style*/
#nav ul li a {
color:#FFF;
}
#nav ul li.active {
background-color:#a51d43;
}
/* end Navigation Style*/
.LeftMenuLine{
border-bottom-style:dotted;
border-bottom-width:1px;
border-bottom-color:#dddddd;
}
/* beginning Upload*/
input.fileStyle {
position: relative;
font-family: calibri;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #f1f2f2;
cursor:pointer;
width:500px;
color:#3d6183;
font-weight:bold;
}
/* end Upload
a {
color: #4A79A5;
}
a:hover {
text-decoration: none;
color: #a51d43;
}*/
.leftcolbox a:hover
{
text-decoration:underline;
color: #000;
}
.leftcolbox a
{
text-decoration: none;
color: #a51d43;
}
hr
{
color:#4a79a5;
}
.ListGridHeader
{
/*background-color:#b8b8b9;*/
height:20px;
color:#fff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.RotateRow
{
color:#4a79a5;
}
.paggingRcd
{
cursor:pointer;
color:#a51d43;
text-decoration: none;
}
.paggingRcd:hover
{
text-decoration: underline;
color:#000000;
}
.Redcolor
{
color:#b72035;
}
/* Begin Menu Navigation */
#header .categories li > ul {
display: none;
list-style: none
}
#header .categories li > ul li {
float: none
}
#header .categories li:hover > ul {
display: block
}
/* End Menu Navigation */
ASKER
I see the menu now but it push down the below div when I hover over the menu to see the submenu
* {
margin: 0; padding: 0;
}
body {
text-align: center;
font: 11px Verdana;
color: #333333;
background: #EEEEEE url(../images/backgroundtop.gif) repeat-x 0 0;
}
a {
color: #4A79A5;
}
a:hover {
text-decoration: none;
color: #a51d43;
/* color: #ff0000; */
}
img {
border: 0;
}
.break {
font-size: 0;
width: 0; height: 0;
clear: both;
}
.alignleft {
float: left;
margin: 4px 10px 5px 0;
}
.alignright {
float: right;
margin: 4px 0 5px 10px;
}
.aligncenter {
text-align: center;
}
.hidden {
display: none;
}
/** BEGIN wrapper **/
#wrapper {
width: 100%;
margin: auto auto;
text-align: left;
}
/** END wrapper **/
/** BEGIN header **/
#header {
overflow: hidden;
}
#header .pages {
list-style-type: none;
height: 20px;
padding-top: 7px;
background: url(../images/bgcolorHeaderup.jpg);
/* background-color: #6d90b0; */
}
#header .pages li {
float: left;
text-transform: uppercase;
font-size: 0.9em;
}
#header .pages li a {
display: block;
text-decoration: none;
color: #a51d43;
font-weight: bold;
display: block;
padding: 0px; 12px;
border-width: 0 1px;
border-style: solid;
border-color: #F0F0F0;
}
#header .pages li a:hover {
border-color: #ffffff;
}
#header .logo {
float: left;
clear: both;
height: 70px;
}
#header .logo h1 {
text-transform: uppercase;
font-size: 2.5em;
padding-top: 3px;
}
#header .logo h1 a {
text-decoration: none;
}
#header .logo p {
font-weight: bold;
text-transform: uppercase;
color: #888888;
}
#header .Welcome {
float: right;
margin-right:15px;
margin-top:10px;
}
/* #header #nav {
background-color: #6d90b0;
} */
#header .categories {
list-style-type: none;
margin-left: -15px;
/*background: #000000 url(../images/background.gif) repeat-x 0 0; */
}
#header .categories li {
float: left;
}
#header .categories li a {
display: block;
padding: 9px 30px 6px;
text-decoration: none;
border-width: 0 1px;
border-style: solid;
border-color: #F0F0F0;
}
#header .categories li a:hover {
/*border-color: #ffffff; */
font-weight: bold;
color: #ffffff;
background-color: #a51d43;
}
.topHeader {
border:solid;
border:1px;
border-top:#cccbcb;
border-bottom:#cccbcb;
width:100%;
background: url(../images/bgcolorHeader.jpg);
}
.HeaderTitle
{
float:left;
width:300px;
margin-left:200px;
margin-top:15px;
}
/** END header **/
/** BEGIN sidebars **/
.box {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
padding: 6px;
margin-bottom: 10px;
}
.box h2 {
background-color: #b8b8b9;
/* 9c9d9f */
color: #ffffff;
font-size: 1em;
text-transform: uppercase;
padding: 4px;
}
.SubDivBox{
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
#lsidebar {
width: 200px;
float: left;
padding-bottom: 10px;
}
#lsidebar ul {
list-style-type: none;
}
#lsidebar ul li {
line-height: 1.4em;
padding: 4px 0 4px 17px;
background: url(../images/bullet.gif) no-repeat 2px 9px;
border-bottom: 1px dotted #B6B6B6;
}
#lsidebar ul li a {
color: #333333;
text-decoration: none;
}
#lsidebar ul li a:hover {
color: #4A79A5;
text-decoration: underline;
}
#rsidebar {
/* width: 315px; */
width:15%;
float: right;
padding-bottom: 10px;
}
#rsidebar .ads {
padding: 0 7px;
text-align: center;
}
#rsidebar .ads img {
margin: 7px;
}
#rsidebar form {
height: 33px;
background: url(../images/search.gif) no-repeat center 0;
}
#rsidebar form input {
border: 0;
/*width: 290px;*/
width:15%;
margin: 9px 0 0 5px;
}
#rsidebar form button {
display: none;
}
#rsidebar ul {
list-style-type: none;
padding: 5px 8px;
}
#rsidebar ul li {
line-height: 1.4em;
padding: 5px 0;
}
#rsidebar ul li a {
font-weight: bold;
}
#rsidebar ul li p {
padding-top: 5px;
}
#rsidebar .flickr {
text-align: center;
padding: 0 7px;
}
#rsidebar .flickr img {
margin: 6px;
}
#rsidebar .video {
padding: 2px;
}
#rsidebar .tags {
padding: 2px 6px;
}
#rsidebar .tags a {
}
#rsidebar .tags a:hover {
}
/** END sidebars **/
/** BEGIN content **/
#content {
margin-left:200px;
padding: 0 10px 10px 0px;
}
#featured {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
margin-bottom: 10px;
padding: 6px;
}
#content .featured {
position: relative;
padding: 0 6px 12px;
height: 240px;
}
#featured h2 {
background-color: #d6d7d7;
color: #ffffff;
font-size: 12px;
text-transform: uppercase;
padding: 10px;
margin-bottom: 5px;
font-weight:bold;
}
#content .featured .comments a {
position: absolute;
display: block;
width: 31px; height: 25px;
background: url(../images/comments.gif) no-repeat 0 0;
top: 5px; right: 10px;
text-align: center;
font-size: 0.8em;
color: #333333;
text-decoration: none;
padding-top: 5px;
}
#content .featured h3 {
font-size: 1.5em;
margin-bottom: 10px;
font-weight: normal;
padding: 0 50px 0 4px;
}
/* #content .featured img {
float: left;
margin: 5px 10px 10px 4px;
width: 134px; height: 134px;
} */
#content .featured p {
line-height: 1.4em;
margin-bottom: 10px;
padding: 0 4px;
}
#content .featured .details {
clear: both;
text-transform: uppercase;
font-size: 0.8em;
margin-bottom: 0;
}
#content .featured .details a {
color: #333333;
text-decoration: none;
}
#content .featured .details a:hover {
color: #4A79A5;
text-decoration: underline;
}
#content .recent {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
padding: 6px;
margin-bottom: 10px;
}
#content .post {
position: relative;
padding: 5px;
margin-bottom: 10px;
}
#content .recent h2 {
background-color: #4A79A5;
color: #ffffff;
font-size: 1em;
text-transform: uppercase;
padding: 4px;
margin-bottom: 5px;
}
#content .post .comments a {
position: absolute;
display: block;
width: 31px; height: 25px;
background: url(../images/comments.gif) no-repeat 0 0;
top: 10px; right: 10px;
text-align: center;
font-size: 0.8em;
color: #333333;
text-decoration: none;
padding-top: 5px;
}
#content .post h3 {
font-size: 1.5em;
margin-bottom: 10px;
font-weight: normal;
padding: 0 50px 0 4px;
}
#content .post img {
float: left;
margin: 5px 10px 10px 4px;
width: 134px; height: 134px;
}
#content .post p {
line-height: 1.4em;
margin-bottom: 10px;
padding: 0 4px;
}
#content .post .details {
clear: both;
text-transform: uppercase;
font-size: 0.8em;
margin-bottom: 0;
}
#content .post .details a {
color: #333333;
text-decoration: none;
}
#content .post .details a:hover {
color: #4A79A5;
text-decoration: underline;
}
#content .postnav {
clear: both;
padding: 10px 0;
}
#content .postnav ul {
list-style-type: none;
padding: 10px;
}
#content .postnav ul li {
float: left;
color: #B5B4BC;
padding: 4px;
}
#content .postnav ul li a {
color: #636363;
text-decoration: none;
display: block;
padding: 2px 6px;
border: 1px solid #E2E2E2;
}
#content .postnav ul li a:hover {
border-color: #ffffff;
}
#wp_page_numbers ul {
border-top: 0 !important;
}
#wp_page_numbers .page_info {
padding: 3px 6px !important;
margin-right: 2px;
border: 1px solid #e0e0e0 !important;
margin-top: 4px;
}
#wp_page_numbers .active_page a {
background-color: #ffffff !important;
border: 0 !important;
}
/** END content **/
/** BEGIN footer **/
#footer {
clear: both;
background-color: #4A79A5;
color: #2E4B54;
font-size: 0.9em;
height: 35px;
padding-top: 20px;
padding-bottom: 20px;
}
#footer a {
color: #ffffff;
}
#footer .wrapper {
width: 960px;
margin: auto auto;
text-align: left;
}
#footer .l {
float: left;
}
#footer .r {
float: right;
}
/** END footer **/
/** BEGIN miscellaneous **/
#content .single {
padding: 2px;
}
#content .single p {
line-height: 1.5em;
margin-bottom: 10px;
}
#content .single ul, #content .single ol {
list-style-position: inside;
margin-bottom: 10px;
}
#content .single li {
line-height: 1.5em;
padding: 2px 0;
}
#content .single blockquote {
padding: 10px 10px 5px;
margin-bottom: 10px;
background-color: #eeeeee;
border-width: 1px 0;
border-style: solid;
border-color: #e0e0e0;
}
#content .single h3, #content .single h4, #content .single h5, #content .single h6 {
font-size: 1.2em;
margin-bottom: 5px;
}
#comments {
padding: 2px;
}
#comments a {
text-decoration: none;
}
#comments h2 {
font-size: 1.6em;
margin: 10px 0;
}
#comments p {
margin-bottom: 10px;
line-height: 1.6em;
}
#comments form {
}
#comments form p {
margin-bottom: 5px;
}
#comments form input {
margin-right: 5px;
}
#comments form input, textarea {
border: 1px solid #cccccc;
font-size: 0.9em;
font-family: Verdana;
padding: 4px;
background-position: 4px 4px;
background-repeat: no-repeat;
}
#comments form input {
width: 240px;
border: 1px solid #cccccc;
}
#comments form textarea {
width: 350px;
padding: 4px 4px !important;
border: 1px solid #cccccc;
}
#comments form button {
border: 1px solid #a0a0a0;
font-size: 1em;
font-family: Verdana;
padding: 2px 6px;
}
.commentdetails {
margin-top: 25px;
}
.commentauthor {
margin-bottom: 5px !important;
font-weight: bold;
}
.commentdate {
font-size: 0.8em;
margin-bottom: 5px;
color: #909090;
}
.required {
color: #ff0000;
}
h2.title {
font-size: 1em !important;
text-transform: uppercase;
padding: 10px;
color: #565656;
}
.notfound {
padding: 40px;
}
.notfound h2 {
font-size: 18px;
font-weight: normal;
margin-bottom: 10px;
}
/** END miscellaneous **/
#comments ol {
list-style-type: none;
clear: both;
padding: 0;
margin: 0;
}
#comments .buffer {
padding: 10px;
}
#comments ol li {
margin-bottom: 10px;
}
#comments ol li ul li {
border: 1px solid #e0e0e0;
padding: 10px;
}
#comments ol li .avatar {
float: right;
}
#comments ol li .comment-author {
}
#comments ol li .comment-author .fn {
font-weight: bold;
font-size: 1.2em;
}
#comments ol li .comment-meta {
font-size: 0.9em;
color: #999999;
margin: 5px 0 10px;
}
#comments ol li .reply {
font-size: 0.9em;
font-weight: bold;
padding-bottom: 10px;
}
#comments .children {
list-style-type: none;
}
#comments .navigation {
padding: 0 0 40px;
font-size: 0.9em;
}
#comments .navigation a {
color: #999999;
padding: 3px 8px;
border: 1px solid #cccccc;
}
#comments .navigation a:hover {
color: #000000;
border-color: #000000;
text-decoration: none;
}
#comments .says {
display: none;
}
.footerfont {
font-family:Verdana, Geneva, sans-serif;
font-size:8pt;
text-align:center;
color:#eaeaea;
text-decoration:none;
font-weight:bold;
cursor:pointer;
}
.hdr {
font-size: 13px;
padding: 10px;
background-position: top left;
background-repeat: repeat-x;
background-color: #eaeaea;
border: solid 1px #dddddd;
color:#4a79a5;
font-weight:bold;
}
.leftcolbox {
background-color: #fcfcfc;
border: solid 1px #dddddd;
padding: 10px;
color: #555555;
line-height: 1.3em;
}
.msgcnttitle {
background-color: #f4f9f9;
max-height: 35px;
font-size: 13px;
margin: auto;
padding: 10px;
color:#7a7a7b;
font-weight:bold;
border: solid 1px #dddddd;
}
.ErrorStyle {
color: #FFF;
display: inline-block;
padding: 1px 2px;
font-weight:bold;
color:#F00;
}
/* beginning Navigation Style*/
#nav ul li a {
color:#FFF;
}
#nav ul li.active {
background-color:#a51d43;
}
/* end Navigation Style*/
.LeftMenuLine{
border-bottom-style:dotted;
border-bottom-width:1px;
border-bottom-color:#dddddd;
}
/* beginning Upload*/
input.fileStyle {
position: relative;
font-family: calibri;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #f1f2f2;
cursor:pointer;
width:500px;
color:#3d6183;
font-weight:bold;
}
/* end Upload
a {
color: #4A79A5;
}
a:hover {
text-decoration: none;
color: #a51d43;
}*/
.leftcolbox a:hover
{
text-decoration:underline;
color: #000;
}
.leftcolbox a
{
text-decoration: none;
color: #a51d43;
}
hr
{
color:#4a79a5;
}
.ListGridHeader
{
/*background-color:#b8b8b9;*/
height:20px;
color:#fff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.RotateRow
{
color:#4a79a5;
}
.paggingRcd
{
cursor:pointer;
color:#a51d43;
text-decoration: none;
}
.paggingRcd:hover
{
text-decoration: underline;
color:#000000;
}
.Redcolor
{
color:#b72035;
}
/* Begin Menu Navigation */
#header .categories li > ul {
display: none;
list-style: none
}
#header .categories li > ul li {
float: none
}
#header .categories li:hover > ul {
display: block
}
/* End Menu Navigation */
ASKER
How can I have the submenu over lap what's below it ?
right now when I hover over it the div below it goes down.
right now when I hover over it the div below it goes down.
Sure. Just add position:relative to the sub menu <ul>. Here's a mock up.
<!doctype html>
<html>
<head>
<style>
* {
margin: 0; padding: 0;
}
#header .categories {
list-style-type: none;
height: 30px;
margin-left: -15px;
background-color: #EEEEEE;
}
#header .categories li {
float: left;
}
#header .categories li a {
display: block;
padding: 9px 30px 6px;
text-decoration: none;
border-width: 0 1px;
border-style: solid;
border-color: #F0F0F0;
}
#header .categories li a:hover {
/*border-color: #ffffff; */
font-weight: bold;
color: #ffffff;
background-color: #a51d43;
}
#header .categories li > ul {
display: none;
list-style: none;
position: relative;
z-index: 1
}
#header .categories li > ul li {
float: none
}
#header .categories li:hover > ul {
display: block
}
</style>
</head>
<body>
<!-- BEGIN header -->
<div id="header">
<!-- begin categories -->
<menu id="nav">
<ul class="categories" style="font-size:12px;">
<li><a href="index.cfm" class="index" style="padding-left:-5px; padding-right:15px;font-weight:bold;">Home</a></li>
<li><a href="AddRule.cfm" class="AddRule" target="_self" style="font-weight:bold;">Add New Testing Rule</a></li>
<li><a href="#" class="Report" style="font-weight:bold;">Report</a>
<ul>
<li><a href="#">Report 1</a></li>
<li><a href="#">Report 2</a></li>
<li><a href="#">Report 3</a></li>
</ul>
</li>
<li><a href="#" class="Contact" style="font-weight:bold;">Contact Us</a></li>
</ul>
</menu>
<!-- end categories -->
</div>
<!-- END header -->
<div style="width:100%;height:400px;background-color:#def"></div>
</body>
</html>
ASKER
Tom,
it's very close but not 100 percent correct yet.
I can see my sub menu but for some reason it's not displaying them correctly.
please take a look at my CSS I made some changes to it.
it's very close but not 100 percent correct yet.
I can see my sub menu but for some reason it's not displaying them correctly.
please take a look at my CSS I made some changes to it.
* {
margin: 0; padding: 0;
}
body {
text-align: center;
font: 11px Verdana;
color: #333333;
background: #EEEEEE url(../images/backgroundtop.gif) repeat-x 0 0;
}
a {
color: #4A79A5;
}
a:hover {
text-decoration: none;
color: #a51d43;
/* color: #ff0000; */
}
img {
border: 0;
}
.break {
font-size: 0;
width: 0; height: 0;
clear: both;
}
.alignleft {
float: left;
margin: 4px 10px 5px 0;
}
.alignright {
float: right;
margin: 4px 0 5px 10px;
}
.aligncenter {
text-align: center;
}
.hidden {
display: none;
}
/** BEGIN wrapper **/
#wrapper {
width: 100%;
margin: auto auto;
text-align: left;
}
/** END wrapper **/
/** BEGIN header **/
#header {
overflow: hidden;
/*background: #dddddd url(../images/background.gif) repeat-x 0 0; */
}
#header .pages {
list-style-type: none;
height: 20px;
padding-top: 7px;
background: url(../images/bgcolorHeaderup.jpg);
/* background-color: #6d90b0; */
}
#header .pages li {
float: left;
text-transform: uppercase;
font-size: 0.9em;
}
#header .pages li a {
display: block;
text-decoration: none;
color: #a51d43;
font-weight: bold;
display: block;
padding: 0px; 12px;
border-width: 0 1px;
border-style: solid;
border-color: #F0F0F0;
}
#header .pages li a:hover {
border-color: #ffffff;
}
#header .logo {
float: left;
clear: both;
height: 70px;
}
#header .logo h1 {
text-transform: uppercase;
font-size: 2.5em;
padding-top: 3px;
}
#header .logo h1 a {
text-decoration: none;
}
#header .logo p {
font-weight: bold;
text-transform: uppercase;
color: #888888;
}
#header .Welcome {
float: right;
margin-right:15px;
margin-top:10px;
}
#header .categories {
list-style-type: none;
height: 30px;
margin-left: -15px;
background-color: #4a79a5;
}
#header .categories li {
float: left;
}
#header .categories li a {
display: block;
padding: 9px 30px 6px;
text-decoration: none;
border-width: 0 1px;
border-style: solid;
border-color: #F0F0F0;
color:#FFFFFF;
}
#header .categories li a:hover {
font-weight: bold;
color: #ffffff;
background-color: #a51d43;
}
#header .categories li > ul {
display: none;
list-style: none;
position: relative;
z-index: 1
}
#header .categories li > ul li {
float: none
}
#header .categories li:hover > ul {
display: block
}
#nav ul li.active {
background-color:#a51d43;
}
/* end Navigation Style*/
.topHeader {
border:solid;
border:1px;
border-top:#cccbcb;
border-bottom:#cccbcb;
width:100%;
background: url(../images/bgcolorHeader.jpg);
}
.HeaderTitle
{
float:left;
width:300px;
margin-left:200px;
margin-top:15px;
}
/** END header **/
/** BEGIN sidebars **/
.box {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
padding: 6px;
margin-bottom: 10px;
}
.box h2 {
background-color: #b8b8b9;
/* 9c9d9f */
color: #ffffff;
font-size: 1em;
text-transform: uppercase;
padding: 4px;
}
.SubDivBox{
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
#lsidebar {
width: 200px;
float: left;
padding-bottom: 10px;
}
#lsidebar ul {
list-style-type: none;
}
#lsidebar ul li {
line-height: 1.4em;
padding: 4px 0 4px 17px;
background: url(../images/bullet.gif) no-repeat 2px 9px;
border-bottom: 1px dotted #B6B6B6;
}
#lsidebar ul li a {
color: #333333;
text-decoration: none;
}
#lsidebar ul li a:hover {
color: #4A79A5;
text-decoration: underline;
}
#rsidebar {
/* width: 315px; */
width:15%;
float: right;
padding-bottom: 10px;
}
#rsidebar .ads {
padding: 0 7px;
text-align: center;
}
#rsidebar .ads img {
margin: 7px;
}
#rsidebar form {
height: 33px;
background: url(../images/search.gif) no-repeat center 0;
}
#rsidebar form input {
border: 0;
/*width: 290px;*/
width:15%;
margin: 9px 0 0 5px;
}
#rsidebar form button {
display: none;
}
#rsidebar ul {
list-style-type: none;
padding: 5px 8px;
}
#rsidebar ul li {
line-height: 1.4em;
padding: 5px 0;
}
#rsidebar ul li a {
font-weight: bold;
}
#rsidebar ul li p {
padding-top: 5px;
}
#rsidebar .flickr {
text-align: center;
padding: 0 7px;
}
#rsidebar .flickr img {
margin: 6px;
}
#rsidebar .video {
padding: 2px;
}
#rsidebar .tags {
padding: 2px 6px;
}
#rsidebar .tags a {
}
#rsidebar .tags a:hover {
}
/** END sidebars **/
/** BEGIN content **/
#content {
margin-left:200px;
padding: 0 10px 10px 0px;
}
#featured {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
margin-bottom: 10px;
padding: 6px;
}
#content .featured {
position: relative;
padding: 0 6px 12px;
height: 240px;
}
#featured h2 {
background-color: #d6d7d7;
color: #ffffff;
font-size: 12px;
text-transform: uppercase;
padding: 10px;
margin-bottom: 5px;
font-weight:bold;
}
#content .featured .comments a {
position: absolute;
display: block;
width: 31px; height: 25px;
background: url(../images/comments.gif) no-repeat 0 0;
top: 5px; right: 10px;
text-align: center;
font-size: 0.8em;
color: #333333;
text-decoration: none;
padding-top: 5px;
}
#content .featured h3 {
font-size: 1.5em;
margin-bottom: 10px;
font-weight: normal;
padding: 0 50px 0 4px;
}
/* #content .featured img {
float: left;
margin: 5px 10px 10px 4px;
width: 134px; height: 134px;
} */
#content .featured p {
line-height: 1.4em;
margin-bottom: 10px;
padding: 0 4px;
}
#content .featured .details {
clear: both;
text-transform: uppercase;
font-size: 0.8em;
margin-bottom: 0;
}
#content .featured .details a {
color: #333333;
text-decoration: none;
}
#content .featured .details a:hover {
color: #4A79A5;
text-decoration: underline;
}
#content .recent {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
padding: 6px;
margin-bottom: 10px;
}
#content .post {
position: relative;
padding: 5px;
margin-bottom: 10px;
}
#content .recent h2 {
background-color: #4A79A5;
color: #ffffff;
font-size: 1em;
text-transform: uppercase;
padding: 4px;
margin-bottom: 5px;
}
#content .post .comments a {
position: absolute;
display: block;
width: 31px; height: 25px;
background: url(../images/comments.gif) no-repeat 0 0;
top: 10px; right: 10px;
text-align: center;
font-size: 0.8em;
color: #333333;
text-decoration: none;
padding-top: 5px;
}
#content .post h3 {
font-size: 1.5em;
margin-bottom: 10px;
font-weight: normal;
padding: 0 50px 0 4px;
}
#content .post img {
float: left;
margin: 5px 10px 10px 4px;
width: 134px; height: 134px;
}
#content .post p {
line-height: 1.4em;
margin-bottom: 10px;
padding: 0 4px;
}
#content .post .details {
clear: both;
text-transform: uppercase;
font-size: 0.8em;
margin-bottom: 0;
}
#content .post .details a {
color: #333333;
text-decoration: none;
}
#content .post .details a:hover {
color: #4A79A5;
text-decoration: underline;
}
#content .postnav {
clear: both;
padding: 10px 0;
}
#content .postnav ul {
list-style-type: none;
padding: 10px;
}
#content .postnav ul li {
float: left;
color: #B5B4BC;
padding: 4px;
}
#content .postnav ul li a {
color: #636363;
text-decoration: none;
display: block;
padding: 2px 6px;
border: 1px solid #E2E2E2;
}
#content .postnav ul li a:hover {
border-color: #ffffff;
}
#wp_page_numbers ul {
border-top: 0 !important;
}
#wp_page_numbers .page_info {
padding: 3px 6px !important;
margin-right: 2px;
border: 1px solid #e0e0e0 !important;
margin-top: 4px;
}
#wp_page_numbers .active_page a {
background-color: #ffffff !important;
border: 0 !important;
}
/** END content **/
/** BEGIN footer **/
#footer {
clear: both;
background-color: #4A79A5;
color: #2E4B54;
font-size: 0.9em;
height: 35px;
padding-top: 20px;
padding-bottom: 20px;
}
#footer a {
color: #ffffff;
}
#footer .wrapper {
width: 960px;
margin: auto auto;
text-align: left;
}
#footer .l {
float: left;
}
#footer .r {
float: right;
}
/** END footer **/
/** BEGIN miscellaneous **/
#content .single {
padding: 2px;
}
#content .single p {
line-height: 1.5em;
margin-bottom: 10px;
}
#content .single ul, #content .single ol {
list-style-position: inside;
margin-bottom: 10px;
}
#content .single li {
line-height: 1.5em;
padding: 2px 0;
}
#content .single blockquote {
padding: 10px 10px 5px;
margin-bottom: 10px;
background-color: #eeeeee;
border-width: 1px 0;
border-style: solid;
border-color: #e0e0e0;
}
#content .single h3, #content .single h4, #content .single h5, #content .single h6 {
font-size: 1.2em;
margin-bottom: 5px;
}
#comments {
padding: 2px;
}
#comments a {
text-decoration: none;
}
#comments h2 {
font-size: 1.6em;
margin: 10px 0;
}
#comments p {
margin-bottom: 10px;
line-height: 1.6em;
}
#comments form {
}
#comments form p {
margin-bottom: 5px;
}
#comments form input {
margin-right: 5px;
}
#comments form input, textarea {
border: 1px solid #cccccc;
font-size: 0.9em;
font-family: Verdana;
padding: 4px;
background-position: 4px 4px;
background-repeat: no-repeat;
}
#comments form input {
width: 240px;
border: 1px solid #cccccc;
}
#comments form textarea {
width: 350px;
padding: 4px 4px !important;
border: 1px solid #cccccc;
}
#comments form button {
border: 1px solid #a0a0a0;
font-size: 1em;
font-family: Verdana;
padding: 2px 6px;
}
.commentdetails {
margin-top: 25px;
}
.commentauthor {
margin-bottom: 5px !important;
font-weight: bold;
}
.commentdate {
font-size: 0.8em;
margin-bottom: 5px;
color: #909090;
}
.required {
color: #ff0000;
}
h2.title {
font-size: 1em !important;
text-transform: uppercase;
padding: 10px;
color: #565656;
}
.notfound {
padding: 40px;
}
.notfound h2 {
font-size: 18px;
font-weight: normal;
margin-bottom: 10px;
}
/** END miscellaneous **/
#comments ol {
list-style-type: none;
clear: both;
padding: 0;
margin: 0;
}
#comments .buffer {
padding: 10px;
}
#comments ol li {
margin-bottom: 10px;
}
#comments ol li ul li {
border: 1px solid #e0e0e0;
padding: 10px;
}
#comments ol li .avatar {
float: right;
}
#comments ol li .comment-author {
}
#comments ol li .comment-author .fn {
font-weight: bold;
font-size: 1.2em;
}
#comments ol li .comment-meta {
font-size: 0.9em;
color: #999999;
margin: 5px 0 10px;
}
#comments ol li .reply {
font-size: 0.9em;
font-weight: bold;
padding-bottom: 10px;
}
#comments .children {
list-style-type: none;
}
#comments .navigation {
padding: 0 0 40px;
font-size: 0.9em;
}
#comments .navigation a {
color: #999999;
padding: 3px 8px;
border: 1px solid #cccccc;
}
#comments .navigation a:hover {
color: #000000;
border-color: #000000;
text-decoration: none;
}
#comments .says {
display: none;
}
.footerfont {
font-family:Verdana, Geneva, sans-serif;
font-size:8pt;
text-align:center;
color:#eaeaea;
text-decoration:none;
font-weight:bold;
cursor:pointer;
}
.hdr {
font-size: 13px;
padding: 10px;
background-position: top left;
background-repeat: repeat-x;
background-color: #eaeaea;
border: solid 1px #dddddd;
color:#4a79a5;
font-weight:bold;
}
.leftcolbox {
background-color: #fcfcfc;
border: solid 1px #dddddd;
padding: 10px;
color: #555555;
line-height: 1.3em;
}
.msgcnttitle {
background-color: #f4f9f9;
max-height: 35px;
font-size: 13px;
margin: auto;
padding: 10px;
color:#7a7a7b;
font-weight:bold;
border: solid 1px #dddddd;
}
.ErrorStyle {
color: #FFF;
display: inline-block;
padding: 1px 2px;
font-weight:bold;
color:#F00;
}
.LeftMenuLine{
border-bottom-style:dotted;
border-bottom-width:1px;
border-bottom-color:#dddddd;
}
/* beginning Upload*/
input.fileStyle {
position: relative;
font-family: calibri;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #f1f2f2;
cursor:pointer;
width:500px;
color:#3d6183;
font-weight:bold;
}
/* end Upload
a {
color: #4A79A5;
}
a:hover {
text-decoration: none;
color: #a51d43;
}*/
.leftcolbox a:hover
{
text-decoration:underline;
color: #000;
}
.leftcolbox a
{
text-decoration: none;
color: #a51d43;
}
hr
{
color:#4a79a5;
}
.ListGridHeader
{
/*background-color:#b8b8b9;*/
height:20px;
color:#fff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.RotateRow
{
color:#4a79a5;
}
.paggingRcd
{
cursor:pointer;
color:#a51d43;
text-decoration: none;
}
.paggingRcd:hover
{
text-decoration: underline;
color:#000000;
}
.Redcolor
{
color:#b72035;
}
ASKER
I see the submenu over the content but I can't go from report 1 to report 2 for example
ASKER
something about this
#header .categories li a {
/display: block;
#header .categories li a {
/display: block;
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Tom,
it's working but one last thing
when I hover over the menu Report and go down to report 1 or report 2 the menu "Report" moves with it.
How can I have it static not to move when the user hover over it?
it's working but one last thing
when I hover over the menu Report and go down to report 1 or report 2 the menu "Report" moves with it.
How can I have it static not to move when the user hover over it?
ASKER
Tom
I GOT IT!!!
THANK YOU FOR ALL YOUR HELP ON THIS. !!!!!!1
LULU
I GOT IT!!!
THANK YOU FOR ALL YOUR HELP ON THIS. !!!!!!1
LULU
ASKER
Thank you
You're welcome. Thanks for the points.
Open in new window