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

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>

但子菜单怎么样：

而不是：

- 小提琴 - here is fiddle

Answer 1

我改变了一下你的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>

Answer 2

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

@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的其他新功能。 {{1}}。

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

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