I am looking
to hover over my list item and have an effect similar
to something like facebook chat is my best example..I am able
to get the first div
to appear but I believe this may be a selector issue because I cant get the rest working properly
html
<ul id="menu_seo" class="menu">
<li id="menu-seo"><span class="arrowout1"></span>SEO</li>
<li id="menu-siteaudits"><span class="arrowout2"></span>Site Audits </li>
<li id="menu-linkbuilding"><span class="arrowout3"></span>Link-Building</li>
<li id="menu-localseo"><span class="arrowout4"></span>Local SEO</li>
</ul>
<div id="main_content">
<div id="menu-seo-desc">
<p>SEO management begins with a full website diagnosis of current web strategy Adjustments are made
to improve your site’s ability
to rank higher on search engines and draw more traffic
</p>
</div>
<div id="menu-seo-desc2">
<p>Usability & site architecture review, Search Engine accessibility and indexing, Keyword research & targeting and Conversion rate optimization
</p>
</div>
</div>
css
#menu-seo-desc {
height:125px;
width:210px;
background-color:red;
border-color:#CCC #E8E8E8 #E8E8E8 #CCC;
border-style:solid;
border-width:1.5px;
border-radius:5px;
box-shadow: 1px 0 2px 0px #888;
-moz-box-shadow: 1px 0 2px 0px #888;
-webkit-box-shadow: 1px 0 2px 1px #888;
position:absolute;
top:220px;
left:350px;
display:none;
}
js
<script>
$(document).ready(function(){
<script>
$(document).ready(function(){
$('#menu_seo').on('#menu-seo', {
'mouseenter': function() {
$('#menu-seo-desc').fadeIn(600);
$('#menu-seo-desc2').fadeIn(600);
},
'mouseleave': function() {
$('#menu-seo-desc').fadeOut(300);
$('#menu-seo-desc2').fadeOut(300);
}
});
});
</script>
});
