【问题标题】:Complicated UL>LI multi level columned and inline styling复杂的 UL>LI 多级列和内联样式
【发布时间】:2014-05-12 16:06:19
【问题描述】:

我从来没有遇到过这么难的问题,我什至无法开始,所以我没有很好的小提琴给你看,只有源代码和我想要实现的目标。

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

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

我需要类似的东西,我想有点像大型下拉菜单?任何人都可以帮助或指出正确的方向吗?

JSFiddle:http://jsfiddle.net/RVQ6m/

一些代码:

            <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>

【问题讨论】:

  • 图片仅显示2级。但你可以在这里阅读stackoverflow.com/questions/9100344/…
  • 您是否进行过任何搜索或尝试过任何 css 或 javascrpit 方法?看起来您刚刚将一些嵌套列表分层,并希望有人来为您完成其余的工作。
  • 我已经搜索过了;但不确定要搜索什么,因为我以前实际上没有做过这样的事情。在不知道自己要搜索什么的情况下很难知道要搜索什么。

标签: html css


【解决方案1】:

嗯, 对于一个我认为你做这一切都是错的,你需要以不同的方式看待它。从您提供的图像示例来看,这似乎更像是一个显示和隐藏内容的 div,与一堆嵌套的无序列表相对。另外,我不确定您想使用什么脚本来实现您正在寻找的效果。为简单起见。我首先创建了一个可以使用 JavaScript 或您选择的库显示和隐藏的 Div。您现在需要做的就是找到一个可以切换的脚本(在鼠标悬停时显示和隐藏 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>

【讨论】:

    猜你喜欢
    • 2017-05-25
    • 1970-01-01
    • 2012-07-29
    • 1970-01-01
    • 2020-02-01
    • 2023-04-01
    • 1970-01-01
    • 2011-04-12
    • 2019-01-24
    相关资源
    最近更新 更多