Я пытаюсь реализовать раскрывающийся список.
Страница находится здесь:
http://breteastman.com/
Вкладка «Предотвращение загрязнения».
В основном происходит, когда вы переворачиваете «Предотвращение загрязнения», вы получаете ссылку «Предотвращение загрязнения», чтобы перетаскивать центр, на 10–20 пикселей вниз, со встроенными элементами навигации.
Мне нужно, чтобы «Предотвращение загрязнения» оставалось таким же, как и до того, как вы перевернетесь, и чтобы выпадающий вниз стал вертикальным.
Это пользовательский сайт WordPress. Пожалуйста, помогите!
Вот все мои CSS.
@import url('sidebar.css');
html, body {margin:0;padding:0;}
/* ***************** Body Styles ****************** */
html{
background:url("images/background.jpg");
font-family:arial;
}
body{
background:url("images/contentArea.jpg") repeat-y;
background-position:center;
height:100%;
font-family:arial;
}
#footer{
text-align:center;
}
#header{
background:url("images/header.jpg") no-repeat;
height:284px;
}
/* padding top right bottom left; */
#newsArea > .grid_3 > p {padding:0 20px 0 20px;}
#newsArea > h1,h2,h3,h4,h5,h6 {padding-left:50px;}
/* ***************** Navigation ****************** */
.main{padding-top:2 0px;text-align:center;}
#menu-main-menu{margin-left:-30px;width:1092px;}
#menu-main-menu a:hover {color:pink;}
#menu-top-menu, #menu-main-menu{
list-style:none;
display:inline;
}
.main {
margin-top:20px;
}
ul#menu-top-menu{
margin-left:37px;
}
ul#menu-top-menu li a{
font-size:1.1em;
}
#menu-top-menu li {
display:inline;
}
#menu-main-menu li{
float:left;
}
#menu-top-menu li, #menu-main-menu li{
padding-left:5px;
padding-right:5px;
border-right:1px #fff solid;
}
.main{
padding-top:-1000px;
}
#menu-top-menu li{
background:url("images/topNavBorderRight.jpg") no-repeat;
background-position:right top;
border:0;
/* padding top right bottom left; */
padding: 23px 27px 30px 0px;
max-width:40px;
margin-left:-5px;
}
#menu-top-menu li a {padding-right:10px;}
#menu-top-menu li a, #menu-main-menu li a{
color:#fff;
font-size:1.2em;
text-decoration:none;
}
#navigation li a:hover{
color:#399edb;
text-decoration:none;
}
/* dropdowns */
/* Hiding the other chlidren */
ul#menu-main-menu li#menu-item-64:hover ul.sub-menu {float:left;display:block;}
ul#menu-main-menu li#menu-item-64:hover ul.sub-menu li a {background-color:#000;padding:5px;color:#fff;}
/*ul#menu-main-menu li#menu-item-64:hover ul.sub-menu li {float:none;}
ul#menu-main-menu li#menu-item-64:hover > ul.sub-menu li.menu-item > ul.sub-menu > * {display:none;} */
/* ***************** Slider Area ****************** */
#contentArea{
background:url("images/sliderArea.png") no-repeat;
height:349px;
}
/* ***************** Body Area ****************** */
#newsArea{
background:url("images/newsArea.png") no-repeat;
height:446px;
padding-top:20px;
}
#newsArea h1
{
color:#00688f;
}
.overLayImages{
position:absolute;left:0px;top:0px;z-index:10;
}
.homeSlider{
position:absolute;left:10px;top:15px;z-index:1;
}
.footer{
margin-left:-35px;
text-align:center;
background:url("images/footerArea.jpg") no-repeat;
width:1132px;
height:290px;
}
/*
list-style: url("images/arrowIcon.png") inside;
*/
#contentArea *{color:#fff;}
#contentArea h1{text-align:left;padding-left:10px;text-transform:uppercase;}
#contentArea p{line-height:1.6em;padding-top:10px;padding-left:10px;}
#contentArea .details ul {line-height:2em;width:300px;list-style-type:none;}
/* padding top right bottom left; */
#contentArea .details ul li{background:url("images/arrowIcon.png") left center no-repeat;padding:10px 0px 10px 40px;}
#contentArea .details ul li:first-child {border-top:2px dotted #fff;}
#contentArea .details ul li {border-bottom:2px dotted #fff;font-size:1.2em;vertical-align:center;margin-bottom:10px;}
*{
font-family:OfficSanBoo;
}
/* Sub pages */
/* Default background */
#subpageImage {background:url("images/subpagePhoto/main.jpg") no-repeat;height:326px;}
#subpageImage * {color:#fff;}
#subpageImage ul li {display:inline;}
#subpageImage .subText {height:290px;}
/* tabs */
ul#tabbedNavigation {background:url("images/tabbedNav/menuBG.jpg");float:right;margin-right:20px;padding:10px 0px 3px 0px;}
/* padding top right bottom left; */
ul#tabbedNavigation li {padding-top:11px;}
ul#tabbedNavigation li {padding-bottom:33px;margin:0;background:url("images/tabbedNav/bgRight.jpg") no-repeat;background-position:right top;}
ul#tabbedNavigation li a {padding-right:30px;}
/* body styles */
#bodyContent {background:url("images/bodyBackground.jpg") repeat-x;min-height:884px;}
#bodyContent h1,h2,h3,h4,h5,h6 {padding:0;}
.bodyContentPadding {padding:20px;}
#bodyContent ol {width:520px;display:block;}
#bodyContent ol li {display:inline;width:140px;display:block;}
#sidebar {background:url("images/sidebarBG.jpg") repeat-x;height:884px;}
JQuery
$('#menu-main-menu li#menu-item-64').hover(
function () {
//show its submenu
$('ul.sub-menu', this).slideDown(100);
},
function () {
//hide its submenu
$('ul.sub-menu', this).slideUp(100);
}
);