我有一个带子菜单的菜单,但他们没有堆叠。他们都被推入一个小空间。 我做错了什么?
我正在使用scss顺便说一下,所以我希望在我的css输出后也有意义。
提前致谢!
我的css代码:
#nav ul {
position: absolute;
width: 220px;
left: -1000px;
}
#nav li:hover ul {
left: auto;
}
#menu {
font-size: 15px;
font-family: $myriad;
color: $white;
background-color: $lightpurple;
border: 1px solid $lightpurple;
ul {
margin-left: -40px;
display:block;
}
li {
display: inline;
padding: 15px;
&:hover {
background-color: $darkpurple;
padding: 15px;
}
}
a {
color: $white;
text-decoration:none;
&:hover{
color: $lightgray;
}
i {
font-size:9px;
&.icon{
font-size:17px;
}
}
}
}
我的HTML代码:
<nav id="menu">
<ul id="nav">
<li><a href =#><i class="fa fa-home icon"></i></a></li>
<li>
<a href =#>Leden <i class="fa fa-chevron-down"></i></a>
<ul><li><a href=#>Info lidmaatschap</a></li></ul>
<ul><li><a href=#>Ledenoverzicht</a></li></ul>
<ul><li><a href=#>Ledenkaart</a></li></ul>
</li>
<li><a href =#>Stromingen <i class="fa fa-chevron-down"></i></a></li>
<li><a href =#>Publicatie's <i class="fa fa-chevron-down"></i></a></li>
<li><a href =#>Activiteiten <i class="fa fa-chevron-down"></i></a></li>
<li><a href =#>Werkgroepen <i class="fa fa-chevron-down"></i></a></li>
<li><a href =#>Nieuws <i class="fa fa-chevron-down"></i></a></li>
<li><a href =#>Webshop <i class="fa fa-chevron-down"></i></a></li>
<li><a href =#><i class="fa fa-search icon"></i></a></li>
</ul>
</nav>
我的css输出:
* line 9, ../sass/_header.scss */
#menu {
font-size: 15px;
font-family: "myriad pro";
color: white;
background-color: #7a76b4;
border: 1px solid #7a76b4;
}
/* line 15, ../sass/_header.scss */
#menu ul {
margin-left: -40px;
}
/* line 18, ../sass/_header.scss */
#menu li {
display: inline;
padding: 15px;
}
/* line 21, ../sass/_header.scss */
#menu li:hover {
background-color: #5b5896;
padding: 15px;
}
/* line 26, ../sass/_header.scss */
#menu a {
color: white;
text-decoration: none;
}
/* line 29, ../sass/_header.scss */
#menu a:hover {
color: #9e9e9e;
}
/* line 32, ../sass/_header.scss */
#menu a i {
font-size: 9px;
}
/* line 34, ../sass/_header.scss */
#menu a i.icon {
font-size: 17px;
}
答案 0 :(得分:0)
删除“显示:内联;”来自“li”标签的标签,它将完成我认为的工作!
答案 1 :(得分:0)
以下代码可能正常,因为您需要
- jsFiddle演示
#menu { height:80px; font-size: 15px; font-family: "myriad pro"; color: white; background-color: #7a76b4; border: 1px solid #7a76b4; } /* line 15, ../sass/_header.scss */ #menu ul { margin-left: -40px; } /* line 18, ../sass/_header.scss */ #menu li { display: inline-block; padding: 15px; vertical-align:top; } /* line 21, ../sass/_header.scss */ #menu li:hover { background-color: #5b5896; padding: 15px; } /* line 26, ../sass/_header.scss */ #menu a { color: white; text-decoration: none; } /* line 29, ../sass/_header.scss */ #menu a:hover { color: #9e9e9e; } /* line 32, ../sass/_header.scss */ #menu a i { font-size: 9px; } /* line 34, ../sass/_header.scss */ #menu a i.icon { font-size: 17px; } #smenu ul { display: none; } #smenu:hover #li1 { display: block;} } </style> </head> <body> <nav id="menu"> <ul id="nav"> <li id"mmenu"><a href =#><i class="fa fa-home icon"></i></a></li> <li id="smenu"> <a id="showmenu" href =#>Leden <i class="fa fa-chevron-down"></i></a> <ul id="li1"><li><a href=#>Info lidmaatschap</a></li></ul> <ul id="li1"><li><a href=#>Ledenoverzicht</a></li></ul> <ul id="li1"><li><a href=#>Ledenkaart</a></li></ul> </li> <li><a href =#>Stromingen <i class="fa fa-chevron-down"></i></a></li> <li><a href =#>Publicatie's <i class="fa fa-chevron-down"></i></a></li> <li><a href =#>Activiteiten <i class="fa fa-chevron-down"></i></a></li> <li><a href =#>Werkgroepen <i class="fa fa-chevron-down"></i></a></li> <li><a href =#>Nieuws <i class="fa fa-chevron-down"></i></a></li> <li><a href =#>Webshop <i class="fa fa-chevron-down"></i></a></li> <li><a href =#><i class="fa fa-search icon"></i></a></li> </ul> </nav> </body> </html>