在现有导航栏中创建下拉菜单

考肖特尔

我目前正在我的网站上工作,并且我有一个现有的导航栏。问题是我有太多信息无法在一页上分享。这就是我想在现有导航栏中实现下拉菜单的原因。我已经尝试了很多很多东西,但这一切似乎都搞砸了我的 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:

https://jsfiddle.net/o51pp5s6/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

导航栏中的下拉菜单

来自分类Dev

导航栏中的用户菜单下拉菜单

来自分类Dev

根据现有菜单创建html下拉菜单

来自分类Dev

带有下拉菜单的yii2导航栏

来自分类Dev

带有固定导航栏的下拉菜单

来自分类Dev

导航栏中的Bootstrap下拉菜单不起作用

来自分类Dev

如何使用puppeteer访问导航栏中的下拉菜单?

来自分类Dev

导航栏中下拉菜单中的堆叠标签

来自分类Dev

Rails中Foundation 5导航栏下拉菜单的问题

来自分类Dev

如何从导航栏中的图标制作下拉菜单?

来自分类Dev

从导航栏HTML CSS的下拉菜单中没有任何内容

来自分类Dev

如何在带有下拉菜单的导航栏中居中列表?

来自分类Dev

使用现有的绘图创建闪亮的下拉菜单

来自分类Dev

离子导航栏下拉菜单

来自分类Dev

引导导航栏下拉菜单

来自分类Dev

侧面导航栏下拉菜单

来自分类Dev

CSS下拉菜单导航栏

来自分类Dev

使导航栏的下拉菜单停留

来自分类Dev

Html 导航栏下拉菜单

来自分类Dev

jQuery在现有的Bootstrap下拉菜单中创建New LI标签

来自分类Dev

在具有渐入效果的水平导航栏上创建CSS3下拉菜单

来自分类Dev

如何创建悬停下拉菜单导航栏 asp.net

来自分类Dev

有没有办法让导航栏下拉菜单在折叠的导航栏下方展开?

来自分类Dev

带有下拉菜单的Bootstrap不可折叠导航栏

来自分类Dev

Aurelia路由器-带有下拉菜单的导航栏

来自分类Dev

带有左侧品牌,中心搜索表单和左侧下拉菜单的自适应导航栏

来自分类Dev

Bootstrap默认导航栏下拉菜单在折叠模式下具有透明背景吗?

来自分类Dev

Aurelia路由器-带有下拉菜单的导航栏

来自分类Dev

下拉菜单没有延伸到导航栏下方,只是替换了原始链接

Related 相关文章

热门标签

归档