【发布时间】：2015-07-13 10:30:44
【问题描述】：
我有以下可以正常工作的菜单。我所需要的是，一旦选择或悬停一个项目，它的整个部分就会在所有尺寸的屏幕中突出显示。目前，每个项目的仅部分部分被突出显示。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
<style>
.container-menu {
width: 100%;
background: none repeat scroll 0 0 rgb(0,0,0);
min-height: 63px;
}
.menu-items {
max-width: 1130px;
width: 100%;
height: 100%;
margin: 0 auto; //
text-align: center;
text-align: left;
position: relative;
padding-top: 36px;
text-align: center;
}
.menu-items li {
background-color: rgb(0,0,0);
}
.menu-items #home {
background-color: green;
}
.menu-items {
position: relative;
}
.menu-items a {
color: #fff;
}
.menu-items ul {
padding: 0;
list-style: none;
margin: 0;
}
.menu-items li {
display: inline;
border-left: 1px solid #fff;
}
.menu-items li:last-child {
border-right: 1px solid #fff;
}
.burger {
width: 25px;
height: 25px;
position: absolute;
top: 7px;
right: 7px;
display: none;
}
.menu-items li:hover {
background-color: green;
}
@media only screen and (max-width: 720px) {
.burger {
display: block;
}
.menu-items ul {
display: none;
}
.menu-items li {
display: block;
border: 0;
}
.container-menu>img {
display: none;
}
}
@media ( min-width :1500px) {
.menu-items li {
padding: 8px 38px;
}
}
@media ( min-width : 979px) and (max-width:1500px) {
.menu-items li {
border-left: 1px solid #fff;
display: inline;
padding: 8px 15px;
}
}
@media ( min-width : 768px) and (max-width: 979px) {
.menu-items li {
border-left: 1px solid #fff;
display: inline;
padding: 8px 15px;
}
.item {
height: 186px !important;
}
}
@media ( max-width : 767px) {
.container-menu {
min-height: 63px;
}
.menu-items li {
border-left: 1px solid #fff;
padding: 8px 12px;
}
}
@media ( max-width : 480px) {
.container-menu {
min-height: 48px;
}
.menu-top-center {
width: 100%;
}
.menu-top-right {
padding-bottom: 4px;
}
}
</style>
</head>
<body>
<header>
<div class="container-menu">
<div class="menu-items">
<ul id="">
<li id="home"><a href="#"><i class="fa fa-home f24"></i>
Home</a></li>
<li id="item1"><a href="#">Item 1</a></li>
<li id="item2"><a href="#">Item 2</a></li>
<li id="mitem3"><a href="#">Item 3</a></li>
<li id="item4"><a href="#">Item 4</a></li>
<li id="item5"><a href="#">Item 5</a></li>
<li id="item6"><a href="#">Item 6</a></li>
<li id="item7"><a href="#">Item 7</a></li>
</ul>
<div class="burger hidden-md">
<i class="fa fa-align-justify fa-2x"></i>
</div>
</div>
</div>
</header>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('.burger').click(function() {
$('.menu-items ul').toggleClass("visible");
});
});
</script>
</body>
</html>
【问题讨论】：
-
没有任何解释的反对票是可怕的你知道吗？ :D
-
您的输出没有显示
<a>标签的内容，即（项目1.项目2等） -
@Dimple 那是我使用 jsfiddle 的问题，结果窗口的左上角有一个“结果”图标，与我的按钮重叠。
-
@MatthewRath 我正在试验。这不是实际设计。
-
我想知道这些反对票是为了什么？
标签： html twitter-bootstrap css twitter-bootstrap-3