我正在尝试实现下拉菜单。
页面在这里:
标签是污染预防。
基本上发生的事情是,当您滚动到“污染预防”时,您会看到“污染预防”链接到放置中心,向下 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);
}
);
最佳答案
这个 CSS 似乎做得很好。 http://www.csspivot.com/iqNMK
.sub-menu { position: absolute; display: none; }
当然,它确实改变了一些事情,但我相信你能处理好。
关于jquery - CSS 试图获得下拉菜单,但菜单不断破坏布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6786261/