我认为更好地查看网址,以便您确切地知道我的意思。 http://ymm.valse.com.my/
当您点击任何一个菜单时,活动标签旁边的菜单会重叠。为什么会这样?我怀疑它的宽度。我把宽度:auto;同样的问题。我甚至尝试修宽度宽度:150px;无济于事。如何解决这个问题。
我使用的是Superfish。
CSS
/* Main */
.sf-menu {
width: 100%;
margin: 0;
list-style: none;
background-color: #2D2D2D;
/*border-bottom:6px solid #393939;*/
z-index: 90;
/*background-image: linear-gradient(#444, #111);*/
/*border-radius: 50px;*/
/* box-shadow: 0 2px 1px #9c9c9c;*/
}
.sf-menu li {
float: left;
/*padding: 10px 0;*/
margin: 0 0 0 2px;
position: relative;
box-shadow: 1px 0 #222222,
2px 0 #383838;
border-bottom:6px solid #393939;
z-index: 100;
}
.sf-menu li a{
display:block; padding: 10px 25px; height: 40px;color:#DDDDDD;
}
.sf-menu a.active{margin-top:-5px; height: 51px; padding-top: 15px; position: absolute; z-index: 100;background-color:#072438; }
.sf-menu li a
.sf-menu a {
float: left;
height: 20px;
padding: 0 25px;
color: #DDDDDD;
/* text-transform: uppercase;*/
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
.sf-menu li:hover > a {
color: #fafafa;
}
*html .sf-menu li a:hover { /* IE6 */
color: #fafafa;
}
.sf-menu li:hover > ul {
display: block;
}
.sf-menu li:last-child{
box-shadow: none;
}
/* Sub-menu */
.sf-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background-color: #2D2D2D;
border-bottom:none;
/* background-image: linear-gradient(#444, #111); */
/*-moz-border-radius: 5px;*/
/*border-radius: 5px;*/
}
.sf-menu ul li {
float: none;
margin: 0;
padding: 0;
display: block;
box-shadow: 0 1px 0 #222222,
0 2px 0 #383838;
border-bottom:none;
}
.sf-menu ul a {
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
.sf-menu ul a:hover{
margin-left:10px;
}
*html .sf-menu ul a { /* IE6 */
height: 10px;
/*width: 150px;*/
width:auto;
}
*:first-child+html .sf-menu ul a { /* IE7 */
height: 10px;
/*width:150px*/
width: auto;
}
/* active menu*/
/*end */
.sf-menu ul a:hover {
/*background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);*/
}
.sf-menu ul li:first-child a {
/*border-radius: 5px 5px 0 0;*/
}
.sf-menu ul li:first-child a:after {
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #072438;
}
.sf-menu ul li:first-child a:hover:after {
border-bottom-color: #072438;
}
.sf-menu li:last-child a {
/*border-radius: 0 0 5px 5px;*/
}
/* Clear floated elements */
.sf-menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .sf-menu { zoom: 1; } /* IE6 */
*:first-child+html .sf-menu { zoom: 1; } /* IE7 */
HTML
<!-- Main Navigation Menu -->
<ul class="sf-menu">
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/">
<img src='<?php echo $data['config']['THEME_DIR']."/img/home_1.png"; ?>' onmouseover='this.src="<?php echo $data['config']['THEME_DIR']."/img/home_2.png"; ?>"' onmouseout="this.src='<?php echo $data['config']['THEME_DIR']."/img/home_1.png"; ?>'"></a>
</li>
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/main/page/about-us">About Us ▼</a>
<ul>
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/main/page/the-centre-point-of-any-web-projects">Centre-Point of Web Projects</a>
</li>
</ul>
</li>
<li>
<!--<?php #echo $data['config']['SITE_DIR']; ?>/member/branch/index">-->
<a href="#">Branches ▼</a>
<?php Core::getHook('block-branches'); ?>
</li>
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/main/news">News</a>
</li>
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/main/event">Events</a>
</li>
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/contact">Contact Us</a>
</li>
</ul>
<div class="clear"></div>
脚本(如果需要)。
<script type="text/javascript">
var path = window.location.pathname.split('/');
path = path[path.length-1];
if (path !== undefined) {
$("ul.sf-menu")
.find("a[href$='" + path + "']") // gets all links that match the href
.parents('li') // gets all list items that are ancestors of the link
.children('a') // walks down one level from all selected li's
.addClass('active');
}
</script>
答案 0 :(得分:0)
position: absolute
.active
在a
内添加li
,因此.sf-menu a.active {
margin-top: -5px;
height: 51px;
padding-top: 15px;
position: absolute;
z-index: 100;
background-color: #072438;
}
上的li
:
border-bottom: 0
绝对定位会将元素从文档流中分离出来,因此您的菜单会像处理它一样对待它。你应该删除它。
<强>更新强>
为此,我要将另一个类添加到父.active
并设置li
。或者您可以将a
类添加到a
而不是.active
,并更改其父级为.sf-menu li.active{
border-bottom: 0
}
.sf-menu li.active a {
margin-top: -5px;
height: 51px;
padding-top: 15px;
z-index: 100;
background-color: #072438;
}
的{{1}}。例如:
{{1}}