Fri, 2009-07-31 19:54
Hi guys
Heres my code so far (1st post so hope i do this correctly).
I am totally new to css and have been working on it for about 6 weeks
now. I have been working fine until now.
.menu {font-family: verdana, arial, sans-serif; width:190px; font-size:80%; z-index:1000; background-image:url(../images/menubox-bg.gif); background-position:left top; background-repeat:no-repeat; margin:10px 0px 0px 0px; padding:0px 0px 0px 0px; height:220px; position: relative; } .menu ul li a {display:block; text-decoration:none; color:#FFFFFF; height:19px; text-indent: 10px; background-image: url(../images/menu-bg.gif); background-color:#7A1E2B; background-repeat: no-repeat; background-position:right top; line-height:19px; overflow:hidden; width:192px; margin:0px 0px 2px 0px; font-weight:bold;} .menu ul {padding:0; margin:0; list-style-type: none; } .menu ul li { float: left; margin: 0px; position: relative; } .menu ul li ul { display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#FFFFFF; background-image: url(../images/menu-bg-over.gif); background-repeat: no-repeat; background-color:#BD9159; } .menu ul li:hover ul {display:block; position:absolute; top:0px; left:192px; width:192px;} .menu ul li:hover ul li a.hide {color:#FFFFFF; border-bottom:solid #DABC93 2px; background-color:#BD9159;} .menu ul li:hover ul li a:hover.hide {background-color:#BD9159; color:#FFFFFF; border-bottom:solid #DABC93 2px;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background-image: url(../images/menu-bg.jpg); background-color:#7A1E2B; color:#FFFFFF; border-bottom:solid #DABC93 2px; margin:0px; width:148px;} .menu ul li:hover ul li a:hover { background-image: url(../images/submenu-bg-over.jpg); background-color:#BD9159; background-repeat: repeat-x; color:#FFFFFF; border-bottom:solid #DABC93 2px;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:148px; top:0; width:192px;} .menu ul li:hover ul li:hover ul.left {left:-148px;} [code] And it works totally fine. I have been able to have them menu move down to 3 levels all open and close when you use them. The only problem i have is the company who set up this website had arrows appear on the menus that had sub menus and I am unsure how to apply this to the 3rd level i have set up. I can see they have used to 2 images menu-bg.jpg and submenu-bg- over.jpg and it changes when you hover over but i just cant get it to work for the level i created I have took over the website now and just starting out in css so go easy on me, any advice i would be greatful of as i have been looking at this for about 4 hours now and my head hurts! Thanks in advance
| Attachment | Size |
|---|---|
| menu.txt | 1.81 KB |
Fri, 2009-07-31 20:34
#1
Problem with menu having arrows to show what you are selecting
Can you post the html too?
Fri, 2009-07-31 21:06
#2
hi the website uses .asp
hi the website uses .asp files i cant see any .html files on the server (sorry, i searched every folder none were linked to the menu??)
The website uses a content manager if that makes any sence?? to edit the information with the site?
Fri, 2009-07-31 21:53
#3
with the page in the
with the page in the browser, select view source and that's your html
Fri, 2009-07-31 21:55
#4
http://pastebin.com/m2f29b97a
sorry never thought of that
Fri, 2009-07-31 23:08
#5
That's a little bit easier. Can't find all your css
Can't find all your external css because of the relative links.
Something like below might work. But because you've defined
.menu ul li ul { display: none;}
It probably won't override. If .menu ul li {} was changed to reference a class rather than the exact li element then you would have the ability specify arrow or not. For a test you could put the css code inline then move it out later like this
-or-
.arrow
{
list-style-image:url("arrow.gif");
list-style-type:square;
}
-or-
.arrow {
background:url(arrow.gif) center right no-repeat;
}
Sat, 2009-08-01 19:29
#6
thanks for all your help i
thanks for all your help i was able to get it working :thumbsup: just need to do some tweaking and should be good.
thanks again