Hey there, my forum is using a navbar that has a dropdown menu function. To access the dropdown menu, there used to be arrows that you could press that would drop down the menu.
However, it seems that those images aren't hosted anymore, so there is nothing there. I have tried to update the images with some of my own arrows, but it won't display on the forum.
Here is the CSS code:
Yes, I realize that some of those are using the "empty.gif", I did that myself after images I had tried weren't working.
The link to my forum, if needed is THIS
Basically I want to know why my own images won't display when I put them into that CSS, and how I can fix that so they do display.
However, it seems that those images aren't hosted anymore, so there is nothing there. I have tried to update the images with some of my own arrows, but it won't display on the forum.
Here is the CSS code:
- Code:
ul.topnav {
position:relative;
list-style:none;
padding:0 20px;
margin:0;
float:relative;
width:920px;
background:#222;
text-align:right;
font-size:1.2em;
background:url(http://2img.net/i/fa/empty.gif) repeat-x
}
ul.topnav li {
float:left;
margin:0;
padding:0 15px 0 0;
position:relative;
}
ul.topnav li a {
padding:10px 5px;
color:#CEC7A9;
display:block;
text-decoration:strong;
float:left
}
ul.topnav li a:hover {
background:url(http://2img.net/i/fa/empty.gif) no-repeat center top
}
ul.topnav li span {
width:17px;
height:35px;
float:left;
background:url(http://i43.servimg.com/u/f43/14/73/12/96/subnav10.gif) no-repeat center top
}
ul.topnav li span.subhover {
background-position:center bottom;
cursor:pointer
}
ul.topnav li ul.subnav {
list-style:none;
position:absolute;
left:0;
top:35px;
background:#333;
margin:0;
padding:0;
display:none;
float:left;
text-shadow:0 0 15px #93F;
width:170px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border:1px solid #111
}
ul.topnav li ul.subnav li {
margin:0;
padding:0;
border-top:1px solid #252525;
border-bottom:1px solid #444;
clear:both;
width:170px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px
}
html ul.topnav li ul.subnav li a {
float:left;
width:145px;
background:#333 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
padding-left:20px
}
html ul.topnav li ul.subnav li a:hover {
background:#222 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
text-shadow:0 0 15px #93F
}
Yes, I realize that some of those are using the "empty.gif", I did that myself after images I had tried weren't working.
The link to my forum, if needed is THIS
Basically I want to know why my own images won't display when I put them into that CSS, and how I can fix that so they do display.
Last edited by RazielBach on May 25th 2015, 1:08 am; edited 1 time in total