我一直在尝试使用css和一系列无序列表创建导航菜单。我已经按照一个非常好的教程,但在尝试编辑它以满足我的需求时遇到了一些问题。我仍然遇到两个主要问题。
1)在每个子导航级别(第一级和第二级)中,在创建区域的右侧有一个额外的空间。这不仅看起来很愚蠢,而且影响功能,因为悬停在该区域会导致导航关闭。
2)如何使整个导航居中?我尝试在每个<div>
和<nav>
元素中使用text-align而没有任何运气。
您可以查看我到目前为止编写的代码:http://bootply.com/105634(JSFiddle:http://jsfiddle.net/YAxvy/)
抱歉所有愚蠢的颜色,我只是想看看一切都在哪里。
非常感谢任何帮助。谢谢!
答案 0 :(得分:2)
问题1:
查看http://jsfiddle.net/YAxvy/7/(更新以解决子子菜单上的left
和padding
问题)
问题在于.sub-menu ul
上有填充(不仅仅是在顶部)。我删除了这个。
问题2:
您可以使用float:left
并排显示它们,而不是使用display: inline-block
,并允许您按照自己喜欢的方式对齐它们。
nav > ul > li {
// add this line
display: inline-block;
}
// remove float:left from nav ul
nav > ul {
// and add this one
text-align: center;
padding-left: 0;
}
现在一起来吧! http://jsfiddle.net/YAxvy/7/
答案 1 :(得分:0)
试试这个它会解决它。
nav ul li {
display: inline-block;
vertical-align: center;
position: relative;
line-height: 20px;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul {
list-style: none outside none;
padding-left: 0;
text-align: center;
}
答案 2 :(得分:-1)
DEMO 已更新
#container {
padding: 10px;
background:olive;
}
#content {
margin:25px;
padding:10px;
background:orange;
}
#container > nav > ul {
margin: 0 330px;
}
nav {
background:yellow;
}
/* MAIN MENU */
nav {
margin: 25px auto;
}
/*gap at top*/
nav ul {
list-style: none;
}
/*get rid of bullets*/
/*adds a proper clear to put content back in the correct place*/
nav ul:after {
content:'.';
clear: both;
visibility: hidden;
display: block;
height: 0px;
}
nav ul li {
float: left;
position: relative;
line-height: 20px;
margin-left: 40px;
margin-right: -40px;
}
nav ul li a {
display: block;
color: #102601;
text-decoration: none;
padding: 14px 15px 15px;
font-size: 18px;
-webkit-transition: 0.25s ease-out;
/*ADD OTHER BROWSER TRANSITIONS*/
}
/*the icon before the top level links*/
nav > ul > li > a:before {
display: inline-block;
background: #102601;
/*circle color*/
color: #e4e4e4;
/*icon color*/
width: 1.65em;
/*circle size*/
height: 1.65em;
border-radius: 1.65em;
/*makes it a circle*/
line-height: 1.65em;
/*centers icon vertically in circle*/
text-align: center;
/*centers icon horizontally in circle*/
box-shadow: 0.125em 0.175em 0 0 rgba(0, 0, 0, 0.125);
/*adds shaddow to circle*/
margin-right: 0.75em;
/*adds some space between icon and text*/
-moz-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
-o-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
-ms-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
}
/*the hover and active state for the icon*/
nav > ul > li:hover > a:before, nav > ul li > a.active:before {
background:#6DA617;
color:white;
}
/* SUB MENU */
/*triangle before*/
nav ul li > ul:before {
content:"";
border-style: solid;
border-width: 0 9px 9px 9px;
border-color: transparent transparent #2C3E50 transparent;
width: 0;
height: 0;
position: absolute;
left: 5px;
top: -10px;
}
nav ul li > ul {
position: absolute;
left: 14px;
top: 80%;
padding-top: 13px;
background: white;
z-index: -9999;
opacity: 0;
-webkit-transition: 0.3s ease-out;
white-space:nowrap;
padding-left:0;
}
nav ul li:hover > ul {
display: block;
z-index: 100;
opacity: 1;
top: 100%;
}
nav ul li > ul li:first-child {
border-radius: 4px 4px 0 0;
padding-top: 3px;
}
nav ul li > ul li:last-child {
border-radius: 0 0 4px 4px;
}
nav ul li > ul {
border:1px solid black;
border-radius: 4px;
}
nav ul li > ul li {
padding: 0;
width:100%;
left:-40px;
/*background:green;*/
}
nav ul li > ul li a {
display: block;
padding: 6px 9px;
font-size: 14px;
}
nav ul li > ul li:hover > a {
color: #FFF;
background: pink;
}
nav ul li > ul li.active > a {
color: #FFF;
background: red;
}
/* SUB SUB MENU */
/*the triangle*/
nav ul li > ul li > ul:before {
content:"";
border-style: solid;
border-width: 0 9px 9px 9px;
border-color: transparent transparent #2C3E50 transparent;
width: 0;
height: 0;
position: absolute;
left: -14px;
top: 15px;
-webkit-transform: rotate(270deg);
}
nav ul li > ul li > ul {
top: 0;
left: 90%;
padding: 0;
-webkit-transition: 0.3s ease-out;
}
nav ul li > ul li:hover > ul {
display: block;
opacity: 1;
z-index: 100;
top: 0;
left: 100%;
}