css Fly out menu dissapearing

[gursky]

I have a problem with a three column website that I’m in the process of developing, in the left hand sidebar of the website is a vertical menu that has some buttons that fly out to the right… but the buttons seem to fly out behind the main content? Has anyone experienced this before, and is there a solution?

Should also mention that this is a wordpress template I’m working on, it might be the PHP but I’m going for the CSS first.

Sidebar Menu:

Code:

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}

.sidebarmenu li{list-style: none outside none;}

.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(img/right.gif) no-repeat 97% 50%;
}

/* Holly Hack for IE */
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }

The Rest:

Code:

body {

margin:0;

padding:0;

font-family:Verdana,Tahoma, Arial, Serif;

font-size: 0.8em;

text-align:center;

color:#333;

background: #000 url(img/bg.jpg) no-repeat center 0;

}

a:link, a:visited {

color:#07243b;

text-decoration:none;

border-bottom:#8b5132 1px dotted;

}

a:hover, a:active {

color:#8b5132;

border-bottom:1px solid;

}

acronym, abbr {

border-bottom: 1px dotted #ccc;

}

acronym, abbr, span.caps {

cursor: help;

letter-spacing: .07em;

}

code {

font-size: 1em;

font-style: italic;

}

blockquote

{

margin:1em;

padding:1em 0 0 3em;

background:url(img/quote.gif) no-repeat left top;

color:#666;

font-style:italic;

}

fieldset

{

border:none;

}

cite {

font-size: 0.85em;

font-style: normal;

}

p {

margin: 0 0 1em;

padding: 0;

line-height: 1.5em;

}

h1, h2, h3, h4,h5,h6 {

font-family: Cambria, Arial, Verdana, Serif;

font-weight: normal;

line-height:1.4em;

margin:0 0 0.5em 0;

padding:0;

}

h1 {font-size:1.8em;}

h2 {font-size:1.6em;}

h3 {font-size:1.4em;}

h4 {font-size:1.3em;}

h5 {font-size:1.2em;}

h6 {font-size:1.1em;}

img

{

border:#ccc 1px solid;

}

img.noborder, img.wp-smiley

{

border:0;

}

img.left

{

margin:0 1em 1em 0;

float:left;

}

img.right

{

margin:0 0 1em 1em;

float:right;

}

a img {

border: 0;

padding-bottom:3px;

border-bottom:#753206 1px solid;

}

pre, code

{

display:block;

margin:1em;

padding:1em;

font-family:”Courier New”, Arial, Verdana, Serif;

font-size:1em;

}

abbr, acronym

{

cursor:help;

}

hr

{

clear:both;

margin-top:5px;

color:#eee;

}

table

{

width:100%;

border:#eee 1px solid;

padding:5px;

}

th

{

text-align:left;

background:#ccccbb;

padding:5px;

}

tr.even

{

background:#cfddea;

}

td, th

{

padding:5px;

}

#outer

{

background:#fff;

width:962px;

margin:20px auto 0;

padding:0;

text-align:left;

border:10px solid #ffffff;

}

#header

{

clear:both;

background: #0a0905 url(img/header.jpg) no-repeat bottom;

height: 180px;

margin: 0 auto;

width:962px;

padding:0;

text-align:right;

border-bottom:#0a0905 1px solid;

}

#header h1

{

margin:0;

padding: 12px 12px 0 0;

font-size: 1.8em;

}

#header a

{

text-decoration: none;

border-bottom: none;

}

#header a:hover {

text-decoration: underline;

}

#header p

{

font-family:”Trebuchet MS”, Arial, Verdana, Serif;

margin:0;

padding:0 12px;

font-style:italic;

}

#header *

{

color:#0b0803;

}

/************************************************

* Page Menu *

************************************************/

#pagenav

{

height:30px;

line-height:30px;

text-transform:uppercase;

}

#pagenav ul {

list-style:none;

margin:0 auto;

padding:0;

width:982px;

text-align:left;

}

#pagenav ul li

{

list-style:none;

background:none;

display:inline;

}

#pagenav ul li a

{

margin:0;

padding:0.5em 1em;

text-decoration:none;

border-bottom:0px;

color:#07243b;

}

#pagenav ul li a:hover,

#pagenav ul li a:active,

#pagenav ul li.current_page_item a

{

color:#8b5132;

}

/* Search Form*/
#pagenav #searchform{

float:right;

padding: 5px 10px;

margin: 0;

background: #05006f;

}

#pagenav #searchform .textbox {

margin: 0 auto;

width: 230px;

background: none;

border: none;

background:#fff url(img/search.png) no-repeat 4px center;

padding:3px 3px 3px 20px;

border:1px solid #ccc;

}

#pagenav #btnsearch{

display: none;

}

/************************************************

* Category Menu *

************************************************/

ul#menu

{

font-family:Cambria, Verdana, Arial, Serif;

list-style:none;

margin:0 auto;

padding:0;

height:35px;

line-height:35px;

font-size:1em;

width:962px;

background:#0a0905;

text-transform:uppercase;

}

ul#menu li

{

float:left;

margin:0;

padding:0;

list-style:none;

white-space:nowrap;

background:none;

}

ul#menu li a

{

display:block;

padding:0 15px;

border:none;

color: #eff;

}

ul#menu li a:hover,

ul#menu li a:active,

ul#menu li.current-cat a

{

color: #fff;

background-color:#05006f;

}

ul#menu #rss

{

float:right;

background:url(img/rss.gif) no-repeat left center;

}

ul#menu #rss a:hover

{

background:transparent;

text-decoration:underline;

}

#main

{

width:750px;

float:right;

margin:0;

padding:0;

}

#content {

width:510px;

float:left;

padding:20px 15px;

margin:0;

}

.sidebar

{

width:208px;

margin:10px 0;

padding:0;

font-size:0.85em;

}

/* Content Details*/

#content ul {

margin: 0 0 0 2em;

padding:0;

list-style-image: url(img/icon2.gif);

}

#content li, .sidebar li {

margin: 0.8em 0;

padding:0;

}

h2.post-title

{

font-variant:small-caps;

border-bottom:#ccc 1px dotted;

}

#content .post

{

padding-bottom:3em;

}

#content .postdate

{

margin:0;

padding:0;

font-size:0.9em;

color:#999;

font-family:”Lucida Sans Unicode”, “Trebuchet MS”, Verdana, Arial, Serif;

font-variant:small-caps;

}

#content .meta

{

color:#999;

clear:both;

border-top:#eef 1px solid;

}

#content .meta .links

{

float:right;

}

hr {display: none;}

div.navigation {text-align:center;}

.clear {clear:both;}

.avatar { float:right;}

/*Sidebar details*/

.sidebar h2, .sidebar h3

{

margin: 0;

font-size:1.4em;

padding:5px 10px;

background:#05006f;

color:#fff;

font-variant:small-caps;

}

.sidebar ul {

list-style-type: none;

padding: 0;

margin:0;

}

.sidebar form,

.sidebar .textwidget,

.sidebar ul ul

{

margin:0;

padding:1em 2em;

line-height:1.5em;

background:#cfddea;

}

.sidebar ul ul ul

{

background:none;

margin:0;

border:none;

padding:0 1em;

}

/* Footer */

#footer

{

clear:both;

margin:0 auto;

width:962px;

padding:10px;

border-top:#ccc 1px dotted;

background:#05006f;

color:#eee;

text-align:left;

}

#footer a

{

color:#fff;

font-size:0.85em;

}

/************************************************

* Comments *

************************************************/

#commentform

{

margin:0em;

padding:1em;

}

#commentform label,

#commentform input[type=”submit”]

{

font-weight:bold;

}

#comments, #respond

{

clear:both;

}

#content .commentlist

{

margin:0;

padding:0;

border-top: #eed 1px solid;

}

#content .commentlist li

{

clear:both;

list-style:none;

margin: 0;

padding:2em 0.5em;

border-bottom: #eed 1px solid;

}

#content .commentlist li.alt

{

background:#f9fcf0;

}

.commentlist li cite

{

font-style:normal;

font-weight:bold;

font-size:1.1em;

}

.commentlist .avatar

{

float:right;

margin:0 0.35em 0 0;

}

.commentlist li.bypostauthor

{

border:#ddd 1px solid;

}

.commentlist .commentmetadata

{

font-size:0.9em;

margin-bottom:10px;

}

#content .nocomments

{

text-align:center;

color:#999;

font-size:0.85em;

}

input.textbox,

input[type=”text”]

{

border:#dcc 1px solid;

background:#f9f9fc;

font:1em Verdana, Arial, Serif;

padding:2px;

width:150px;

}

textarea{

width: 90%;

padding:5px;

height: 20em;

border: 1px solid #dcc;

background:#f9f9fc;

font:1em Verdana, Arial, Serif;

}

input.textbox:focus, input:focus, textarea:focus

{

background:#fff;

border:#ccd 1px solid;

}

#header, #content, .sidebar, #footer, .widget

{

overflow:hidden;

}

/*Code from http://wprocks.com/wordpress-tips/floating-images-within-the-post-in-wordpress-26/ */

img.left, img.alignleft, div.alignleft

{

float:left;

margin:0 1em 0.5em 0;

}

img.right, img.alignright, div.alignright

{

float:right;

margin:0 0 1em 0.5em;

}

img.aligncenter, div.aligncenter

{

text-align:center;

margin:0 auto;

}

.wp-caption {

border: 1px solid #ddd;

text-align: center;

background-color: #f3f3f3;

padding-top: 4px;

margin: 10px;

/* optional rounded corners for browsers that support it */

-moz-border-radius: 3px;

-khtml-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

}

.wp-caption img {

margin: 0;

padding: 0;

border: 0 none;

}

.wp-caption p.wp-caption-text {

font-size: 11px;

line-height: 17px;

padding: 0 4px 5px;

margin: 0;

}

Thanks in advance

[gursky]

Hmm? Tried it and it doesn’t seem to do anything.

I came back to the main css style sheet and I found:

Code:

#header, #content, .sidebar, #footer, .widget
{
overflow:hidden;
}

When I took out .sidebar the menu was kind of visible though still hiding behind a Jquery Carousel. Also removing .sidebar made a real mess of the layout. Do you think I need to mess around more with the z-index or is there a way to get around overflow:hidden?

Thanks for your help.

[Anonymous]

I am happy I meet this topic, this is exactly the same problem I am passing through. Firstly, I am using bp-columns as my theme. I have a left sidebar of 130px width. I want a menu on this sidebar but two of these menus will slide out to the right but it does not work for me. Please help me out with the css code that will do this.

[Anonymous]

I may not be sounding clear but what I am trying to say is that I what a navigation menu that slides to the right on a left sidebar with a width of 130px. Help me out please, I desperately need this.

[Author]

Posts