2014-09-05, 22:36
- Description:
Helllo.
I have the follow code which supposed to be a drop-down menu; however, I'm having issues getting the CSS correctly, I'm still a biginner in CSS so I can't seem to be able to figure out what's wrong on my own, I'd appreciate the help The problem is the the Tools Container (Supposed to be an Image) isn't showing, only the text "Click to view tools" is showing, while I want the Image to show as well, once someone click on the Image, I want the sub-menus to drop down.
- Code:
<script type="text/javascript">
$(document).ready(function(){
var tools = $('#tools'), toolsContainer = $('#toolsContainer');
toolsContainer.on('click',function(){
tools[0].style.display = (tools[0].style.display === "none") ? "block" : "none";
});
});
</script><style>
#toolsContainer ul{
Display: block;
position: relative;
top:5px;
overflow: visible;
background-image: url("http://i.imgur.com/uX7Kknx.png");
background-repeat: no-repeat;
}
#tools li{
padding-left:10px;
line-height:30px;
list-style-type: none;
text-decoration: none;
max-width: 150px;
background-color: #212121;
font-weight: bold;
border-style: dashed;
border-width: 1px;
border-color: #D6B140;
text-align: center;
}
a:link {
color: #B58A24;
text-decoration: none;
}
a:visited {
color: #D1BA26;
text-decoration: none;
}
a:hover{
color: #FFC926;
text-decoration: none;
}
</style>
<div id="toolsContainer">
Click to view tools<br />
<ul style="display:none;" id="tools">
<li>
<a href="/search?search_id=newposts">View new posts</a>
</li>
<li>
<a href="/search?search_id=egosearch">View your posts</a>
</li>
</ul>
</div>
Note, the JS, CSS and HTML are all in there, I'm not separating them.
- Information:
Forum: | http://www.duelacademy.net/ | Version: | PHPBB2 |
Type: | Errors in code | Tags: | Drop-down,problem |