- This topic has 5 replies, 2 voices, and was last updated 14 years, 11 months ago by
.
-
Posts
-
Hi everyone…
I use PixoPoint Multi-level Navigation Plugin…
This is my site : http://review4free.infoI have 2 questions…
The 1st one is I add more many categories/pages on the dropdown menu. When the 1st menu row is full, the rest will appear on another row (second row)…
The problem is the background image doesn’t appear on the second row…it’s only appear on the 1st row…as you can see on the 2nd row the half of the menu row contains blank background…
How can i make the background appear on every extra row in case i have more than 1 row??
My 2nd problem when I have 3 level dropdown menu, it will appear on the right side of the menu but there’re no enough space for the menu to appear without bothering my site border…
How can I put them on auto shift to appear on the left when there are no enough space on the right?
My css:
SORRY RYAN…I don’t know which link I should put here…so put the code together…
http://review4free.info/wp-content/plug … /style.php
[code:30gxp576]
#pixopoint_menu1 {
width:100%;
height:35px;
background:#003399 url("../multi-level-navigation-plugin/images/suckerfish_blue.png") repeat-x;
background-position:none;
margin:0;}
#pixopoint_menu1 ul {
width:100%;
height:35px;
background:#003399 url("../multi-level-navigation-plugin/images/suckerfish_blue.png") repeat-x;
border:none;
margin:0;
padding:0;
list-style:none;
}
#pixopoint_menu1 li {
border:none;
background:#003399 url("../multi-level-navigation-plugin/images/suckerfish_blue.png") repeat-x;
color:#FFFFFF;
line-height:35px;
letter-spacing:0px;
font-weight:bold;
font-size:12px;
padding:0;
margin:0 0px;
;float:left;
font-family:tahoma,sans-serif;
position:relative;
}
#pixopoint_menu1 li:hover,#pixopoint_menu1 li.sfhover {
background:#333;
background-position:0 60px;
}
#pixopoint_menu1 li a {
border:none;
background:none;
text-decoration:none;
display:block;
padding:0 12px;
color:#FFFFFF;
}
#pixopoint_menu1 li a:hover {
border:none;
background:none;
text-decoration:none;
color:#FFFFFF;
background-position:100% -120px;
}
#pixopoint_menu1 ul ul {
position:absolute;
left:-999em;
top:35px;
width:120px;
}
#pixopoint_menu1 li:hover ul,#pixopoint_menu1 li.sfhover ul {
left:auto;
}
#pixopoint_menu1 ul ul li a {
padding:4px 10px;
text-transform:normal;
font-variant:normal;
}
#pixopoint_menu1 ul ul li {
letter-spacing:0px;
color:#fff;
z-index:20;
width:120px;
font-family:helvetica,arial,sans-serif;
font-size:11px;
font-weight:bold;
font-style:normal;
background:#333;
border-bottom:1px solid #cccccc;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
margin:0;
opacity:0.95;
}
#pixopoint_menu1 ul ul li a {
line-height:22px;
color:#ffffff;
text-decoration:none;
}
#pixopoint_menu1 ul ul li:hover a,#pixopoint_menu1 ul ul li.sfhover a {
color:#FFFFFF;
text-decoration:none;
}
#pixopoint_menu1 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
color:#ffffff;
}
#pixopoint_menu1 ul ul li:hover li a:hover,#pixopoint_menu1 ul ul li.sfhover li a:hover {
color:#FFFFFF;
}
#pixopoint_menu1 ul ul li:hover,#pixopoint_menu1 ul ul li.sfhover {
color:#FFFFFF;
background:#4f4fdb;
}
#pixopoint_menu1 ul ul ul li {
font-size:1em;}#pixopoint_menu1 ul ul ul, #pixopoint_menu1 ul ul ul ul {
position:absolute;
margin-left:-999em;
top:0;
width:120px;
}
#pixopoint_menu1 li li:hover ul,#pixopoint_menu1 li li.sfhover ul,#pixopoint_menu1 li li li:hoverul,#pixopoint_menu1 li li li.sfhover ul {
margin-left:120px;
}
#pixopoint_menu1 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
text-decoration:none;
}
#pixopoint_menu1 ul ul li li:hover a,#pixopoint_menu1 ul ul li li.sfhover a {
color:#FFFFFF;
text-decoration:none;
}
#pixopoint_menu1 li.pixo_search:hover {
background:none;
}
#pixopoint_menu1 li.pixo_search form {
margin:0;
padding:0;
}
#pixopoint_menu1 li.pixo_search input {
font-family:tahoma,sans-serif;}
#pixopoint_menu1 li.pixo_search input.pixo_inputsearch {
width:100px;
}
#pixopoint_menu1 li.pixo_right {
float:right;
}[/code:30gxp576]
If you don’t understand my question, please tell me…I’ll try to make it clear…okies!
If you want it to work the way you want over multiple lines, then you will need to start customising the CSS to give the menu a different height (currently set to 35px).
Changing it to 70px for the following to CSS declarations may work for you (I haven’t tested it):
[code:xiep5oy0]
#pixopoint_menu1 {
width:100%;
height:70px;
background:#003399 url("../multi-level-navigation-plugin/images/suckerfish_blue.png") repeat-x;
background-position:none;
margin:0;}
#pixopoint_menu1 ul {
width:100%;
height:70px;
background:#003399 url("../multi-level-navigation-plugin/images/suckerfish_blue.png") repeat-x;
border:none;
margin:0;
padding:0;
list-style:none;
}
[/code:xiep5oy0]Thanks for your reply ryan…I appreciate it !
i tried to change the height value like your suggestion to 70px but only blue (003399 color) background appear. I want to make suckerfish_blue.png background image appear.
I don’t change back my adjustment so you can see how it looks. Do you have any other suggestion? Now it almost take about 1 week for me to think about this problem.
How about my second problem?
If you click the "pages" menu (second from right on the 1st row), the dropdown list appear shift to the right. The problem is there no enough space in the right side. This will make the dropdown list appear beyond the right browser border. Can you understand what i want to say?
The second line background now appear…
I added this css code into the [b:tyd83mzp]#pixopoint_menu1[/b:tyd83mzp]…-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;Then I removed [b:tyd83mzp]repeat-x[/b:tyd83mzp] from "background:" on [b:tyd83mzp]#pixopoint_menu1[/b:tyd83mzp] and [b:tyd83mzp]#pixopoint_menu1 ul[/b:tyd83mzp]
so the new css code look like this:
[code:tyd83mzp]#pixopoint_menu1 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:url(../multi-level-navigation-plugin/images/suckerfish_blue.png);
height:70px;
margin:0;
width:100%;
}
#pixopoint_menu1 ul {
width:100%;
height:70px;
background:url("../multi-level-navigation-plugin/images/suckerfish_blue.png");
border:none;
margin:0;
padding:0;
list-style:none;
}
[/code:tyd83mzp]but the problem on second menu line is the "menu title" and the background are not mix well…the menu title seems to be a little bit bottom than the background image…
for the 1st line is perfect…what should i go now??? anyone can’t help??
"joeflizo" wrote:i tried to change the height value like your suggestion to 70px but only blue (003399 color) background appear. I want to make suckerfish_blue.png background image appear.The image is there, it’s just to small. All you need to do is to make the image larger or repeat it vertically.
[code:2qskeqrm]-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
[/code:2qskeqrm]For a more detailed response you will need to sign up to Premium Support sorry … https://geek.hellyer.kiwi/services/premium-support/
- You must be logged in to reply to this topic.