html - 在现有导航菜单中进行子菜单垂直布局

Question

我在 css3 和 html 中有一个菜单导航功能

<nav>
<ul>
<li><a href="#" >Sec1</a></li>
    <li><a href="#" >Sec2</a></li>
    <li><a href="#" class="current">Sec3</a>
    <ul class="menu">
        <li><a href="#" class="documents">Documents</a></li>
        <li><a href="#" class="messages">Messages</a></li>
        <li><a href="#" class="signout">Sign Out</a></li>
    </ul></li>
<li><a href="#" >Sec4</a></li>

</ul>
</nav>

但是子菜单怎么可能是这样的：

在此处输入图像描述

代替：

在此处输入图像描述

--小提琴- 这里是小提琴

score 1 · Accepted Answer

我改变了一点你的 CSS 和 Html 文件

CSS：

nav
{
position: absolute;
list-style: none;
text-align: center;
width: 620px;
top: 43px;
right: -12px;
background: transparent;
}
nav ul li
{
float: left;
line-height: normal;
}
nav ul li a
{
font-size: 28px;
font-family: 'Yanone Kaffeesatz', arial, sans-serif;
color: black;
text-transform: capitalize;
font-weight: normal;
display: block;  /* IE6, IE7 line height fix */
padding: 15px;
background-color: transparent;
margin-top: 0px;
margin-right: 6px;
text-decoration: none;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
}
nav ul li:hover > ul
{
display: inline;
}
nav ul li a:hover
{
background-color: #43AEF2;
padding: 15px;
color: white;
-moz-border-radius: 8px;
border-radius: 8px;
}
nav ul li a.current
{
background-color: #43aef2;
color: white;
-moz-border-radius: 8px;
border-radius: 8px;
}
nav ul:not(.first) li
{
text-align: center;
display: inline-block;
cursor: pointer;
margin-right: 10px;
color: #666;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
}
nav ul:not(.first) li:last-child
{
margin-right: 0;
}
nav ul:not(.first) li:hover
{
color: #000;
}
nav ul:not(.first) li:hover:after
{
color: #bbb;
}
nav ul:not(.first) li:after
{
margin-left: 10px;
content: '';
color: #bbb;
}
nav ul:not(.first) li:last-child:after
{
content: '';
}
.content_menu
{
float: left;
width: 274px;
margin-top: -10px;
margin-bottom: 15px;
}
.content_menu ul
{
margin: 0px;
padding: 0px;
float: none;
}
.content_menu ul li
{
float: none;
padding-bottom: 16px;
}
.content_menu ul li a
{
font-size: 14px;
line-height: normal;
color: #33CC99;
text-align: left;
text-decoration: none;
padding-left: 20px;
}
.content_menu ul li a:hover
{
color: #33CC99;
}
/*  submenu  */
.menu
{
display: none;
position: absolute;
background: black;
width: 140px;
}
.menu li a
{
display: block;
padding: 0 14px 0 30px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a
{
border-left: none;
}
.menu li:last-child a
{
border-right: none;
}
.menu li:hover > a
{
color: #33CC99;
}
.menu ul
{
position: absolute;
top: 60px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul
{
    opacity: 1;
}
.menu ul li
{
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > a
{
height: auto;
}
.menu li a
{
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a
{
border: none;
}
/* Icons */
.menu a.documents
{
background: url(http://designmodo.com/demo/css3dropdownmenu/img/docs.png) no-repeat 6px center;
}
.menu a.messages
{
background: url(http://designmodo.com/demo/css3dropdownmenu/img/bubble.png) no-repeat 6px center;
}
.menu a.signout
{
background: url(http://designmodo.com/demo/css3dropdownmenu/img/arrow.png) no-repeat 6px center;
}
.menu li
{
float: none;
display: initial;
}

HTML

<nav>
<ul>
<li><a href="#" >Sec1</a></li>
    <li><a href="#" >Sec2</a></li>
    <li><a href="#" class="current">Sec3</a>
    <ul class="menu">
        <li><a href="#" class="documents">Documents</a></li>
        <li><a href="#" class="messages">Messages</a></li>
        <li><a href="#" class="signout">Sign Out</a></li>
    </ul></li>
<li><a href="contacto.html" >Sec4</a></li>

</ul>
</nav>

score 1 · Accepted Answer

我了解您在寻找什么，并使我的 jsfiddle 尽可能接近您的。我没有使用您提供的图像，而是使用了图标字体，如果您打算使用许多图像，这很有用。我从 icomoon.io 的Keyamoon获得了我的图标字体。这是一个非常好的工具，您绝对应该将它用于您需要的任何其他图标。我从 Egemen Kapusuz 的 Icon Minia 中挑选了我的。您可以看到我使用的图标，如果只有这些图标，您只需从jsfiddle中的 @font-face url或从此处下载文件：

@font-face {
    font-family: 'IHK';
    src:url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.eot');
    src:url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.eot?#iefix') format('embedded-opentype'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.svg#IHK') format('svg'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.woff') format('woff'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

您可以从此处复制链接，如果您只需要这 3 个图标，它将为您提供要下载的字体文件。图标字体很棒，因为您可以将图标字体全部打包成 1 个 HTTP 请求，而不是为每个背景或图标加载 1 个图像或其他任何内容，从而使它们在传输中更加高效，并且也更加可定制。图标字体只是一种字体，因此您也可以更轻松地操作它们；你可以改变字体的颜色，抗锯齿，就像一个真正的文本字体。

我用一些 jQuery 重写了你的代码，因为你的代码看起来很混乱而且有点难以理解，所以如果你想使用我的确切 jsfiddle，你需要从 CDN 添加一个 jquery 源链接或在你的主机上托管你自己的副本服务器。jquery.com将有大量关于此的信息。

所以对于我的 HTML：

HTML：

<nav>
    <ul>
        <li><a href="#" >Sec1</a></li>
        <li><a href="#" >Sec2</a></li>
        <li><a href="#" class="current">Sec3</a></li>
        <li><a href="contacto.html" >Sec4</a></li>
        <ul class="menu">
            <li><a href="#" class="documents" data-icon="&#xe000">Documents</a></li>
            <br>
            <li><a href="#" class="messages" data-icon="&#xe001">Messages</a></li>
            <br>
            <li><a href="#" class="signout" data-icon="&#xe002">Sign Out</a></li>
        </ul>
    </ul>
</nav>

html 有一些新属性，我将其命名为 data-icon。我使用这些来合并图标字体中的图标，而无需在 DOM 中添加官方元素。浏览器对此的支持有点新，所以你应该研究一个冗余的图标方案，以防用户使用不支持图标字体的旧浏览器和你也有的其他新功能，比如border-radius和transitions.

对 CSS 进行了大量修改以使用伪选择器，这非常有用。另外，我现在有 jQuery 的导航栏，所以它应该得到很好的支持，因为 jQuery 是一个跨浏览器的 JavaScript 库。

我唯一无法解决的是这个小问题，第二导航级别中的悬停文本会跳跃，我不知道为什么会发生这种情况，我会调查它，但现在，这就是我能够做到的为你生产。

html - 在现有导航菜单中进行子菜单垂直布局

2 回答 2

Related

Reference