Question

我的一位朋友有一个网站，并要求我对其进行一些修改。问题是有一个CSS菜单（2级），我想把它作为3级菜单。

这是菜单的CSS

#nav{position:absolute;right:0px;bottom:0}
#nav a{height:23px;margin:0 0 0 1px;padding:7px 11px 0 12px;font-weight: lighter; font:14px helvetica,arial;color:#FFF;text-align:center;display:block;float:left}
#nav div{float:left}
#nav .hot{color:#fff;background:url(../images/nav-up-hot.png)}
#nav a:hover,#nav .aboutHover .button{background:url(../images/nav-up.png); color:#333; 
       /* Theoretically for IE 8 & 9 (more valid) */
        /* ...but not required as filter works too */
        /* should come BEFORE filter */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

        /* This works in IE 8 & 9 too */
        /* ... but also 5, 6, 7 */
        filter: alpha(opacity=70);

        /* Older than Firefox 0.9 */
        -moz-opacity:0.7;

        /* Safari 1.x (pre WebKit!) */
        -khtml-opacity: 0.7;

        /* Modern!
        /* Firefox 0.9+, Safari 2?, Chrome any?
        /* Opera 9+, IE 9+ */
        opacity: 0.7;

}
#nav ul li a:hover {color:#00b9ff}
#nav .about ul{display:none}
#nav .aboutHover ul{position:absolute}
#nav li{margin:0;padding:0;background:none !important}
#nav ul{width:180px;margin:30px 0 0 1px;*margin:30px 0 0 -120px;padding:4px 10px 4px 0;list-style:none;background: url(../images/sub-back.png);}
#nav ul a{width:100%;height:20px;padding:4px 0 0 10px !important;text-align:left;font-size:12px;font-weight:bold;color:#FFF;background:none;display:block}
#nav ul a:hover{background:none}

HTML代码是：

<div onmouseout="className='about'" onmouseover="className='aboutHover'" class="about">
<a href="<?php echo get_category_link( 1 ); ?> " title="Accommodation" class="button"><strong>Accommodation</strong></a>
<ul>
    <li><a href="<?php echo $permalink = get_permalink( 200 ); ?>" title="Room 1">Room 1</a></li>
    <li><a href="<?php echo $permalink = get_permalink( 203 ); ?>" title="Room 2">Room 2</a></li>
    <li><a href="<?php echo $permalink = get_permalink( 256 ); ?>" title="Room 3">Room 3</a></li>
    <li><a href="<?php echo $permalink = get_permalink( 89 ); ?>" title="Room 4">Room 4</a></li>
    <li><a href="<?php echo $permalink = get_permalink( 45 ); ?>" title="Room 5">Room 5</a></li>
</ul>
</div>

我尝试了很多，搜索了互联网，但我找不到如何添加新关卡的解决方案。

现在菜单是：

住宿
L室1 L室2 L室3 L室4 L室5

我想做的是：

住宿
L 海景房
  L室1   L室2   L室3楼   陆地景观房
L.   4室L室5

非常感谢你对先进的帮助......

Answer 1

...像这样：

#nav ul li ul { margin-left: 25px; }

然后再下一级：

 #nav ul li ul li ul { margin-left: 25px; }

Answer 2

...抱歉延误。所以我解雇了Firebug（......不确定双关语是否有意？！？）并检查了住宿下的菜单项之一，然后点击了“编辑”按钮并搞砸了。想出了这个：

<li>
<a title="Cave Villa Alexandros" href="http://katsekala.com/marizanv2/cave-villa-alexandros/">
    Cave Villa Alexandros
</a>

<a href="#" style="color:red; margin-left:2em;">
    Some other link
</a>

刚刚在另一个链接下添加了一个链接而没有将其包装成任何东西......红色仅用于可见性，左边距是缩进的。如果我理解正确，那就是你所需要的，对吗？不是水平弹出窗口。由于 a 标记显示为“阻止”，因此您可以根据需要在其上放置左边距。霍勒，如果这不是你的意思。

在现有的CSS菜单中再添加一个级别

2 个答案: