Question

我从来没有遇到过如此困难的问题，我甚至无法开始，所以我没有一个非常好的小提示向你展示，只有源代码和我想要实现的目标。 / p>

我需要三级UL。顶级内联 - 用于顶级导航。子UL和LI将是内联块 - 或多或少。

这是我的意思的图像：http://www.smileycat.com/miaow/archives/images/megamenus/ea.gif

我需要类似这样的东西，有点像我认为的大型下降？任何人都可以帮助或指出我正确的方向吗？

一些代码：

            <ul class="level1">
                <li class="level1">top
                    <ul class="level2">
                        <li class="level2">middle
                            <ul class="level3">
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                            </ul>
                        </li class="level2">
                        <li class="level2">middle
                            <ul class="level3">
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                            </ul>
                        </li class="level2">
                        <li class="level2">middle
                            <ul class="level3">
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                            </ul>
                        </li class="level2">
                        <li class="level2">middle
                            <ul class="level3">
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>

Answer 1

那么，对于一个我认为你这样做是错的，你需要以不同的方式看待它。从您提供的图像示例看起来更像是一个div显示和隐藏内容，与一堆嵌套的无序列表相对应。另外，我不确定你想用什么脚本来达到你想要的效果。为简单起见。我开始创建一个Div，你可以使用JavaScript或你选择的库来显示和隐藏。您现在需要做的就是找到一个将切换的脚本（在鼠标悬停时显示和隐藏div）注意：当用户登陆页面时，不应显示Div＃games-display。

http://jsfiddle.net/jimmyt1001/Bz9QA/

首先是你的CSS

            <style type="text/css">


            .nav-container {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 0.8em;
            }

            div.column {
                border-left: 2px #dedede solid;
                width:156px;
                float:left;
                padding: 11px 25px 5px 11px;

            }
            div.column:nth-child(1)
            {
            border-left:none;
            }



            .column a {

                line-height:1.7em;

            }

            ul {
                color:#3173d4;
            }

            .column.highlight a {
                color:#3173d4;
                font-weight:bold;
                }


            .clear-fix {
                clear:both;
            }


            #games-display {
                width:580px;
                height:273px;
                border-top: 6px #639df4 solid;
                border-right: 1px #639df4 solid;
                border-left: 1px #639df4 solid;
                border-bottom: 1px #639df4 solid;
                background-color:#fff;
                -webkit-border-bottom-right-radius: 10px;
                -webkit-border-bottom-left-radius: 10px;
                -moz-border-radius-bottomright: 10px;
                -moz-border-radius-bottomleft: 10px;
                border-bottom-right-radius: 10px;
                border-bottom-left-radius: 10px;
                padding:10px;

            }

            .display-header {
                width:135px;
                height:5px;
                background-color:#f7f7f7;
                font-weight:bold;
                padding:8px 5px 15px 15px;
                border: 1px #c5c5c5 solid;
            }

            .featured {
                width:135px;
                height:125px;
                background-color:#f7f7f7;
                text-align:center;
                font-weight:bold;
                padding:12px;
                border: 1px #c5c5c5 solid;
                }


            </style>

然后是你的HTML

<div class="nav-container">

            <a href="#"">Nav Link</a>

               <div id="games-display">

                   <div class="column highlight">
                        <ul>
                            <li><a href="">Link 1</a></li>
                            <li><a href="">Link 2</a></li>
                            <li><a href="">Link 3</a></li>
                        </ul>

                       <div class="featured">
                        Featured Info
                       </div>

                   </div>

                   <div class="column">
                        <div class="display-header">Column 2</div>
                        <ul>
                            <li><a href="">Link 1</a></li>
                            <li><a href="">Link 2</a></li>
                            <li><a href="">Link 3</a></li>
                            <li><a href="">Link 4</a></li>
                            <li><a href="">Link 5</a></li>
                            <li><a href="">Link 6</a></li>
                            <li><a href="">Link 7</a></li>
                            <li><a href="">Link 8</a></li>

                        </ul>
                   </div>

                   <div class="column">
                        <div class="display-header">Column 3</div>
                                    <ul>
                            <li><a href="">Link 1</a></li>
                            <li><a href="">Link 2</a></li>
                            <li><a href="">Link 3</a></li>
                            <li><a href="">Link 4</a></li>
                            <li><a href="">Link 5</a></li>
                            <li><a href="">Link 6</a></li>
                            <li><a href="">Link 7</a></li>
                            <li><a href="">Link 8</a></li>

                        </ul>
                   </div>

                   <div class="clear-fix"></div> <!-- Very dirty way of removing float property -->

               </div>

            </div>

复杂的UL＆gt; LI多级柱和内联样式

1 个答案: