我目前正在我的网站上工作,并且我有一个现有的导航栏。问题是我有太多信息无法在一页上分享。这就是我想在现有导航栏中实现下拉菜单的原因。我已经尝试了很多很多东西,但这一切似乎都搞砸了我的 css 布局,或者它完全删除了导航栏。
我有一个现有的下拉菜单代码,但我根本无法将它与现有的 css 代码混合。我从互联网上得到这个代码,它不是我的财产。
我的 HTML:
<div id="menu">
<ul>
<li class="current_page_item"><a href="index.php" accesskey="1" title="">Home</a></li>
<li><a href="service.html" accesskey="2" title="">Onze service</a></li>
<li><a href="team.html" accesskey="3" title="">Ons team</a></li>
<li><a href="prijzen.html" accesskey="4" title="">Prijzen</a></li>
<li><a href="contact.php" accesskey="5" title="">Contact</a></li>
</ul>
</div>
我的CSS:
#menu
{
position: absolute;
right: 0;
top: 1em;
}
#menu ul
{
display: inline-block;
}
#menu li
{
display: block;
float: left;
text-align: center;
line-height: 60px;
}
#menu li a, #menu li span
{
display: inline-block;
margin-left: 1px;
padding: 0em 1.5em;
letter-spacing: 0.10em;
text-decoration: none;
font-size: 1.0em;
text-transform: uppercase;
outline: 0;
color: #212121;
background: #ECECEC;
}
#menu li:hover a, #menu li.active a, #menu li.active span
{
}
#menu .current_page_item a
{
background: #E24E2A;
color: #FFF;
}
#menu .icon
{
}
下拉式菜单:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
提前致谢!
您的导航包装器是menu而在来自在线的 CSS 中它是primary_nav_wrap,因此将这些实例交换到菜单。
在 html 本身嵌套的无序列表元素用于下拉列表,因此将这些元素添加到需要下拉列表的列表元素下。
网址:
<div id="menu">
<ul>
<li class="current_page_item"><a href="index.php" accesskey="1" title="">Home</a><ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
<li><a href="service.html" accesskey="2" title="">Onze service</a></li>
<li><a href="team.html" accesskey="3" title="">Ons team</a></li>
<li><a href="prijzen.html" accesskey="4" title="">Prijzen</a></li>
<li><a href="contact.php" accesskey="5" title="">Contact</a></li>
</ul>
</div>
CSS:
#menu ul {
display:inline-block;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#menu li {
display:block;
float:left;
text-align:center;
line-height:60px
}
#menu li a,#menu li span {
display:inline-block;
margin-left:1px;
padding:0 1.5em;
letter-spacing:.1em;
text-decoration:none;
font-size:1em;
text-transform:uppercase;
outline:0;
color:#212121;
background:#ECECEC
}
#menu .current_page_item a {
background:#E24E2A;
color:#FFF
}
#menu {
margin-top:15px
}
#menu ul a {
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#menu ul li {
position:relative;
float:left;
margin:0;
padding:0
}
#menu ul li.current-menu-item {
background:#ddd
}
#menu ul li:hover {
background:#f6f6f6
}
#menu ul ul {
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#menu ul ul li {
float:none;
width:200px
}
#menu ul ul a {
line-height:120%;
padding:10px 15px
}
#menu ul ul ul {
top:0;
left:100%
}
#menu ul li:hover > ul {
display:block
}
这是合并代码的jsfiddle:
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句