0

我正在开发我创建的设计，当您在活动页面上或将鼠标悬停在它们上时，会弹出菜单选项卡。

在我的设计中看起来像这样：

在此处输入图像描述

在开发方面，我尝试过使用边距和填充，但它们中的每一个都只是将站点的其余部分向下推。

如果您愿意使用它，这里是一个 Jfiddle。http://jsfiddle.net/CW3f7/

HTML

<div class="menu-main-navigation-container">
<ul class="nav-menu">
    <li class="nav-menu"><a href="http://www.dorkinggreatwall.co.uk/">Home</a>
    </li>

    <li class="nav-menu"><a href="http://www.dorkinggreatwall.co.uk/?page_id=7">Contact</a>
    </li>

    <li class="nav-menu"><a href="http://www.dorkinggreatwall.co.uk/?page_id=9">About</a>
    </li>
</ul>

CSS

.nav-menu li {
display: inline-block;
position: relative;
background: #d71921;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.nav-menu li a {
color: #fff;
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}

.nav-menu a:hover {
background-color: #d71921;
color: #fff;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

ul.nav-menu, div.nav-menu > ul {
margin: 0;
padding: 0 40px 0 0;
}

任何代码将不胜感激。我所有的谷歌搜索都带来了不相关的结果。

4

4 回答 4

1

您可以为非活动元素添加垂直边距，并为活动元素删除它。

或者，您可以使用绝对位置从文档流中排除菜单。菜单大小不会影响文档的其余部分。

于 2013-11-05T12:41:39.297 回答
1

你是不是在想这样的事情： 小提琴

.menu-item {
    height: 55px;
    margin-bottom: -5px;
}
.menu-item:hover, .current-menu-item {
    position: relative;
    top: -5px;
}
于 2013-11-05T12:53:15.063 回答
0

您可以将 z-index 设置为 1 或更大，z-index 会将其置于另一层之上 z-index 0 是默认值，您的大部分网站可能都在此之上。z-index 1 应该显示在顶部

把它想象成 x, y, z 坐标

于 2013-11-05T12:41:58.047 回答
0

您可以使用职位来做到这一点。这里http://jsfiddle.net/AdrianSis/TU97j/1/是你的情况的小提琴。

<body>
<ul class="nav-menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</body>

CSS

ul.nav-menu{
    margin: 0;
    max-height: 45px;
    overflow: hidden;
    padding: 0 40px 0 0;
    position: relative;
    border-bottom: 5px solid #D71921;
}
ul.nav-menu li{
    background: none repeat scroll 0 0 #D71921;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: inline-block;
    position:relative;
    top:10px;
}
.nav-menu li.active, .nav-menu li:hover{
    top: 0;
}
.nav-menu li a {
    color: #FFFFFF;
    display: block;
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
    padding: 15px 20px;
    text-decoration: none;
}
于 2013-11-05T13:17:21.823 回答