我正在处理site的下拉导航,并且在下拉部分与父类别对齐方面遇到了一些问题 - 它一直向左移动。
这是html:
<ul class="dropdown">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="about">About Us</a>
<ul class="sub-menu">
<li><a href="#">Our History</a></li>
<li><a href="#">Our Process</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Financing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Subcontractors</a></li>
</ul>
</li>
<li><a href="#" id="personal">Personal Banking</a></li>
<li><a href="#" id="commercial">Commercial Banking</a></li>
<li><a href="#" id="service">Customer Service</a>
<ul class="sub-menu">
<li><a href="#">Our History</a></li>
<li><a href="#">Our Process</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Financing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Subcontractors</a></li>
</ul>
</li>
<li><a href="#" id="investors">Investor Relations</a></li>
<li><a href="#" id="contact">Contact Us</a></li>
</ul>
这是CSS:
ul.dropdown { position: relative; background: #4e8997; height: 40px; padding-left: 5px; }
ul.dropdown li { float: left; zoom: 1; }
ul.dropdown li a {
display: block;
margin-top: 5px;
padding: .5em .6em;
color: #fff;
font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-transform: uppercase;
border: none;
}
ul.dropdown a:hover { background-color: #c29c5d; color: #fff; }
ul.dropdown a:active { background-color: #c29c5d; color: #fff; }
/*
LEVEL TWO
*/
ul.dropdown ul { width: 200px; visibility: hidden; position: absolute; top:100%; left: 0; }
ul.dropdown ul li { font: 13px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-bottom: 1px solid #ccc; float: none; color: #fff; background-color: #c29c5d; height: 20px; }
ul.dropdown ul li a { display: inline-block; }
ul.dropdown ul li a:hover { background-color: #a2834d; color: #fff; height: 20px; }
我尝试将ul.dropdown ul更改为相对位置,但这会破坏导航。我很感激帮助纠正这个问题。
感谢。
答案 0 :(得分:1)
1)使用display:block而不是visibility:hidden - 更改您的jquery以使用.show()/。hide()而不是编辑可见性属性
2)让你的ul.dropdown ul css看起来像:
ul.dropdown ul {
display: none;
padding-left: 0;
margin-left: 0;
width: 200px;
position: absolute;
}
答案 1 :(得分:1)
如果您使用jQuery,您应该查看Superfish,因为这样可以满足您的需求。我将修改后的版本用于其他一些事情,但如果我提取一些摘录并将其应用于HTML,我就会得到这些内容。
<script type="text/javascript">
$(function() {
$("ul.dropdown li").hover(function() {
$(this).addClass("hover");
$('ul:first', this).show();
$(this).parents('li a').addClass('hover');
}, function() {
$(this).removeClass("hover");
$('ul:first', this).hide();
$(this).parents('li a').removeClass('hover');
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});
</script>
<style type="text/css">
/* CSS RESET ****************** v1.0 | 20080212 *****************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
.dropdown, .dropdown * { margin: 0; padding: 0; list-style: none; }
.dropdown { line-height: 1.0; }
.dropdown ul { position: absolute; width: 10em; /* left offset of submenus need to match (see below) */ }
.dropdown ul li { width: 100%; }
.dropdown li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
.dropdown li { float: left; position: relative; left: -1px; top: -1px; margin-left: 2px; margin-right: 2px; }
.dropdown a { display: block; position: relative; }
.dropdown span.dropdown-nolink { display: block; position: relative; }
.dropdown li:hover ul, .dropdown li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 9999; }
ul.dropdown li:hover li ul, ul.dropdown li.sfHover li ul { top: -999em; }
ul.dropdown li li:hover ul, ul.dropdown li li.sfHover ul { left: 0em; /* match ul width */ top: 0; }
ul.dropdown li li:hover li ul, ul.dropdown li li.sfHover li ul { top: -999em; }
ul.dropdown li li li:hover ul, ul.dropdown li li li.sfHover ul { left: 0em; /* match ul width */ top: 0; }
.dropdown { float: left; margin-bottom: 0em; }
.dropdown a { padding: .70em 1em; text-decoration: none; }
.dropdown a, .dropdown a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #FFF; }
.dropdown span.dropdown-nolink { padding: .70em 1em; text-decoration: none; }
.dropdown span.dropdown-nolink, .dropdown span.dropdown-nolink:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #FFF; }
.dropdown li { background: #4e8997; text-align: left; }
.dropdown li li { background: #4e8997; ;margin:0;top:-1px;left:-1px;}
.dropdown li li li { background: rgb(188,0,47); margin: 0; top: -1px; left: 0; }
.dropdown li:hover, .dropdown li.sfHover, .dropdown a:focus, .dropdown a:hover, .dropdown a:active { background: #c29c5d; outline: 0; z-index: 9999; }
.sub-menu { display: none; }
</style>
我发布了JS,因为我也将其更改为使用jQuery的show()/ hide()。