Окэй,вот вобщем что я сделал
<script>
$(function () {
$('.show-one').mouseover(function () {
$('#menu1').attr('style', 'display: block').addClass('.show-one');
});
$('#menu1').mouseout(function () {
$('#menu1').attr('style', 'display: none').addClass('.show-one');
});
$('.show-two').mouseover(function () {
$('#menu2').attr('style', 'display: block').addClass('.show-two');
});
$('#menu2').mouseout(function () {
$('#menu2').attr('style', 'display: none').addClass('.show-two');
});
$('.show-three').mouseover(function () {
$('#menu3').attr('style', 'display: block').addClass('.show-three');
});
$('#menu3').mouseout(function () {
$('#menu3').attr('style', 'display: none').addClass('.show-three');
});
$('.show-four').mouseover(function () {
$('#menu4').attr('style', 'display: block').addClass('.show-four');
});
$('#menu4').mouseout(function () {
$('#menu4').attr('style', 'display: none'.addClass('.show-four'));
});
});
</script>
CSS
.menu
{
float: left;
width: 900px;
}
ul
{
padding: 0;
margin: 0;
}
.menu li
{
float: left;
list-sltye: none;
width: 80px;
padding: 0;
list-style: none;
height: 30px;
background: #20548E;
color: White;
text-align: center;
border-right: 1px solid white;
}
#menu1, #menu2, #menu3, #menu4
{
position: absolute;
top: 125px;
background: #20548E;
display: none;
width: 900px;
height: 100px;
color: White;
}
#menu2 .a
{
text-decoration: none;
color: White;
}
body
{
margin: 0;
padding: 0;
font-family: "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
}
#show-one
{
color: White;
text-align: center;
}
#show-one a:hover
{
background: #1A4473;
}
.menu li a:hover
{
background: #1A4473;
}
.menu a
{
color: White;
text-decoration: none;
}
.menu a:hover
{
color: White;
text-decoration: none;
}
и сам код
<div>
<div class="menu">
<ul>
<li class="show-one"><a href="<%= Url.Action("Index", "Home")%>">Home</a></li>
<li class="show-two"><a href="#"><span>Services</span></a></li>
<li class="show-three"><a href="#"><span>Publications</span></a></li>
<li class="show-four"><a href="#"><span>References</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Contacts</span></a></li>
</ul>
</div>
<div id="menu1">
qwerty</div>
<div id="menu2">
<div>
<ul style="float:left; margin-right:15px;">
<li>General consulting</li>
<li>Market analysis</li>
<li>Business-Plan</li>
<li>Fact finding</li>
</ul>
<ul style="float:left;">
<li>Russina accounting </li>
<li>Payroll</li>
</ul>
<ul>
<li><a href="#"><span>Busines Set-Up</span></a> </li>
<li><a href="#"><span>Accounting/Reporting</span></a> </li>
<li><a href="#"><span>Due Diligence/Internal Audit</span></a> </li>
<li><a href="#"><span>Legal Address/Office Space</span></a> </li>
<li><a href="#"><span>Taxation</span></a> </li>
<li><a href="#"><span>Human Resources</span></a> </li>
<li><a href="#"><span>Interim Managment</span></a> </li>
</ul>
</div>
</div>
<div id="menu3">
sdflkgjsdflkgsdf kdfjg lkfjgd flkgjsdf lgkjs</div>
<div id="menu4">
32485734985 34958743 987</div>
</div>
Работает,но работает весьма криво :) помогите доработать напильником
первая проблема это то что открываемый див работает отлично везде кроме IE как я понимаю это из за Position absolute; как обойти? Вторая проблема это то что когда я навел мышку на меню у меня появляется всплывающее окошко, и убраться оно должно когда либо я перехожу на новое меню либо убираю мышку с всплывшего окна..как понимаю надо поправить скрипт, вобщем помогите :)