Question

我想知道我是否可以帮助你一些帮助。我正在为新网站创建导航，并尝试在悬停时实现以下效果：

如果li有一个ul，那么这个ul应该在父li的悬停时优雅地向下扩展。但是，它也应该将ul显示为两列。

我已经成功地解决了这个问题，如下所示：HTML first

<header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a>
                <ul>
                    <li><a href="#">Sub Link 1</a></li>
                    <li><a href="#">Sub Link 2</a></li>
                    <li><a href="#">Sub Link 3</a></li>
                    <li><a href="#">Sub Link 4</a></li>
                    <li><a href="#">Sub Link 5</a></li>
                    <li><a href="#">Sub Link 6</a></li>
                    <li><a href="#">Sub Link 7</a></li>
                </ul>
            </li>
            <li><a href="#">Top Link</a>
                <ul>
                    <li><a href="#">Sub Link 1</a></li>
                    <li><a href="#">Sub Link 2</a></li>
                    <li><a href="#">Sub Link 3</a></li>
                    <li><a href="#">Sub Link 4</a></li>
                    <li><a href="#">Sub Link 5</a></li>
                    <li><a href="#">Sub Link 6</a></li>
                    <li><a href="#">Sub Link 7</a></li>
                </ul>
            </li>
            <li><a href="#">News</a>
                <ul>
                    <li><a href="#">News Item 1</a></li>
                    <li><a href="#">News Item 2</a></li>
                    <li><a href="#">News Item 3</a></li>
                    <li><a href="#">News Item 4</a></li>
                    <li><a href="#">News Item 5</a></li>
                    <li><a href="#">News Item 6</a></li>
                    <li><a href="#">News Item 7</a></li>
                    <li><a href="#">News Item 8</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

CSS第二次

header{border-bottom:1px solid #c6c8c9;
height:35px;
width:100%}
header nav{margin:0;
position:absolute;
right:0;
top:0}
header nav ul{list-style:none;
margin:0;
text-transform:lowercase;
width:auto;
position:relative}
header nav li{float:left;
margin:0}
header nav li a{font:18px/1 'Arial';
height:23px;
display:block;
padding:7px 10px 14px}
header nav li:first-child a{padding:7px 10px 14px 0}
header nav li:last-child a{padding:7px 0 14px 10px}
header nav li:nth-child(2):hover,header nav li:nth-child(3):hover,header nav li:nth-child(4):hover{margin:-1px -1px 0 -1px;
border:1px solid #c6c8c9;
border-bottom:1px solid white;
border-radius:5px 5px 0 0}
header nav a:link,header nav a:visited,header nav li:hover,header nav li:active{text-decoration:none}
header nav li ul{background:#fff;
position:absolute;
top:44px;
width:504px;
-webkit-transition:max-height 0s;
-moz-transition:max-height 0s;
-ms-transition:max-height 0s;
-o-transition:max-height 0s;
transition: max-height 0s;
overflow:hidden;
max-height:0}
header nav li ul li{float:none}
header nav li:hover ul{max-height:155px;
border:1px solid #c6c8c9;
border-width:0 1px 1px;
padding:4px 0 10px;
-webkit-transition: max-height 0.6s;
-moz-transition: max-height 0.6s;
-ms-transition: max-height 0.6s;
-o-transition: max-height 0.6s;
transition: max-height 0.6s;
height:140px;
column-count:2;
-moz-column-count:2;
-ms-column-count:2;
-o-column-count:2;
-webkit-column-count:2;
column-gap:0;
-moz-column-gap:0;
-ms-column-gap:0;
-o-column-gap:0;
-webkit-column-gap:0}
header nav li ul{right:0}
header nav li ul li:hover{border:none !important;
margin:0 !important}
header nav li ul li a{font:16px/35px 'Arial';
opacity:0;
height:35px;
padding:0 0 0 5px !important;
left:0;
position:static;
border-left:6px solid white}
header nav li:hover ul li a{opacity:1;
transition:opacity 0.6s}
header nav li ul li:nth-child(1) a:hover,header nav li ul li:nth-child(8) a:hover{border-left:6px solid #c4004b}
header nav li ul li:nth-child(2) a:hover{border-left:6px solid #a7b600}
header nav li ul li:nth-child(3) a:hover{border-left:6px solid #ef9b00}
header nav li ul li:nth-child(4) a:hover{border-left:6px solid #5d406c}
header nav li ul li:nth-child(5) a:hover{border-left:6px solid #64884c}
header nav li ul li:nth-child(6) a:hover{border-left:6px solid #da6700}
header nav li ul li:nth-child(7) a:hover{border-left:6px solid #a03264}

并在http://jsfiddle.net/Rwthwyn/mhu1Lgy2/演示了：发生的事情是列表项填满了空间并且似乎一次加载一个。我希望他们做的只是在一开始就是一个固定的高度，并且只是在ul完成成长时出现，完全成形。

要解决这个问题，理想情况下我不需要在html中添加任何内容，因为菜单将成为CMS网站的一部分，我不确定最终会有多少lsit项目。但是，如果有必要，我愿意接受一些涉及js或jquery的解决方案。

如果我没有很好地解释自己，请随时要求澄清。

Answer 1

我能想到的最佳解决方案是删除使用css-columns：

column-count:2;
-moz-column-count:2;
-ms-column-count:2;
-o-column-count:2;
-webkit-column-count:2;
column-gap:0;
-moz-column-gap:0;
-ms-column-gap:0;
-o-column-gap:0;
-webkit-column-gap:0

并更改选择器

header nav li ul li {
   float: none;
}

是：

header nav li ul li {
   float: left;
   width: 50%;
}

请参阅小提琴：http://jsfiddle.net/mhu1Lgy2/4/

这会影响您的链接顺序，但这可能会通过您的CMS进行锻炼。另外，您应该更好地为代码添加适当的空格和缩进。

在悬停时用两列扩展ul

1 个答案: