| Author |
 Topic  |
|
sharonchinn
New Member
USA
68 Posts |
 Posted - 10/19/2012 : 21:15
|
I've been using the vertical CSS flyout menus on my site, but I just can't keep them in a specific position so the flyouts sit next to the previous category it relates to. The position keeps changing depending on how wide my browser window is.
Site: http://www.decorativepaintingstore.com
Can you offer any suggestions on what I need to change?
Here's is my css code:
/* DYNAMIC CSS MENUS */
/*vertical home categories*/
ul.ectmenu1 {
list-style:none;
font-size:10px;
padding:0px;
}
/*categories without sub categories*/
li.ectmenu1 {
border:0px dotted #ffffff;
padding:0px;
}
/*category links which spawn sub-categories*/
li.ectmenuhassub1 a{
display:block;
padding:0px;
}
/*mouse over properties of the category links which spawn sub-categories
*/
li.ectmenuhassub1 a:hover{
display:block;
padding-top:3px;
background-color:#FFFFFF;
color:#f27b01;
}
/*link properties*/
li.ectmenu1 a{
display:block;
padding:0px;
}
/*mouse over properties*/
li.ectmenu1 a:hover{
background-color: #FFFFFF;
color: #f27b01;
border-color: #999999;
border-style:solid;
border-width:1px;
}
/*properties of flyout menus*/
li.ectsubmenu1{
display: block;
width:200px;
padding:0px;
position: relative;
left: -325px;
top: -220px;
z-index: 5000;
background-image: url(images/JPG_GIFS_tole_decorative_painting/Body_BG.jpg);
border-color: #999999;
border-style: solid;
border-width: 1px;
}
/*mouse over properties of flyout menus*/
li.ectsubmenu1 a:hover{
background-color: #FFFFFF;
color: #f27b01;
}
/* END DYNAMIC CSS MENUS */ |
|
Vince
Administrator
31259 Posts |
|
Andy
Administrator
69140 Posts |
|
sharonchinn
New Member
USA
68 Posts |
Posted - 10/20/2012 : 08:08
|
Thank Vince and Andy for taking time to respond.
Andy your suggestion gets them positioned in the right place and they don't move when the browser window changes sizes, but now the flyout boxes are falling behind the main content of my page.
Any suggestions for that. I remember having that problem when I first started working with the css menus and that is why I had the z-index code added. Maybe I have that in the wrong place. |
 |
|
sharonchinn
New Member
USA
68 Posts |
Posted - 10/20/2012 : 08:53
|
Never mind... through trial and error I found if I added the z-index value here, it fixed that new problem:
ul.ectmenu1 {
list-style:none;
font-size:10px;
padding:0px;
z-index:5; |
|
|
| |
Topic |
|
CSS Menus - Help with Positioning
