我在网站上添加了一个下拉菜单,但无法将其输入导航栏。
这是我的代码:http://jsfiddle.net/dLyWs/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Arial, Verdana, sans-serif;
background: #99CCFF;
}
/* website layout */
.container {
width: 960px;
margin: 0 auto;
}
.navigation {
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
}
.main-wrap {
display: table;
width: 1000px; /* Container width + 2 x 20px */
border-spacing: 20px 0;
margin-left: -20px; /* to adjust centering because of increased width (needed for border spacing) */
margin-bottom: 20px;
}
.main1 {
display: table-cell;
width: 652px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
}
.main2 {
display: table-cell;
width: 288px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
}
footer {
padding: 10px;
background-color: #efefef;
border: 2px solid;
text-align: center;
}
/* dropdown menu css */
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav li ul{
margin: 0;
padding-left: 0;
}
#nav a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
#nav ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#222;
}
/* links make-up */
a:link {
color: black;
text-decoration: none;
}
a:visited {
color:black;
}
a:hover {
color: #229944;
text-decoration: underline;
}
a:active {
color:red;
}
#externallink {
text-decoration: underline;
}
/* other */
img {
padding: 10px;
}
我认为它会产生冲突,因为我的子菜单会越过导航栏的边缘?我怎样才能解决这个问题?
干杯!
ps:不是我真的需要"这个导航栏,我可以不用,但我只是好奇!
答案 0 :(得分:0)
您正在浮动菜单并将导航菜单推到栏外。我建议删除float:left
并使用li
替换display:inline-block;
上的花车:
#nav li {
display: inline-block;
margin-right: 10px;
position: relative;
}
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
}
答案 1 :(得分:0)
修改CSS类,如下所示:
.navigation {
margin:20px 0;
background-color: #efefef;
border: 2px solid;
height:70px;
}
#nav {
list-style:none;
font-weight:bold;
float:left;
width:100%;
}
这会将您的菜单放在名为navigation的div中。
在此处查看 - > http://jsfiddle.net/L38cx/1/
希望这有帮助!!!