css - 如何使用相对定位的第二级修复此基于 CSS 的垂直菜单？

Question

我有这个简单的 CSS ul li 菜单，它有第二层，它应该在其父级下方弹出并向下推其余部分。

像这样:

Option 1 <---- no positioning on UL
  Sub 1  <----- relative positioned UL
  Sub 2
Option 2
Option 3

出于某种原因，相对定位的 UL 不会像它应该的那样影响选项 2。

我尝试将其放入 jsFiddle。 http://jsfiddle.net/hxQRt/

我的 HTML

<!-- SUBMENU  -->
<div id="" class="sidemeny_undersida"><ul class="menu"><li class="first current"><a href="miljorivning.aspx" title="Miljörivning" class="stylized">Miljörivning</a><ul>
<li><a href="rivning_av_vaggar_och_mattor.aspx">Rivning av väggar och mattor</a></li>
<li><a href="rivning_och_borttagning_av_golvbelaggning.aspx">Rivning och borttagning av golvbeläggning</a></li>
<li><a href="brokkar_med_bilningshammare.aspx">Brokkar med bilningshammare</a></li>
<li><a href="rivning_av_stora_byggnader.aspx">Rivning av stora byggnader</a></li>
</ul>
</li><li class=""><a href="miljosanering.aspx" title="Miljösanering" class="stylized">Miljösanering</a></li><li class=""><a href="haltagning121108.aspx" title="Håltagning" class="stylized">Håltagning</a></li><li class=""><a href="stambyten.aspx" title="Stambyten" class="stylized">Stambyten</a></li><li class=""><a href="golvslipning.aspx" title="Golvslipning" class="stylized">Golvslipning</a></li><li class="last "><a href="ventilationsrengoring121108.aspx" title="Ventilationsrengöring" class="stylized">Ventilationsrengöring</a></li></ul></div>
<!-- / SUBMENU  -->

我的 CSS

/* Level 1 */ 

.sidemeny_undersida,
.sidemeny_undersida li,
.sidemeny_undersida li a { margin: 0; padding: 0; float: none;  }

.sidemeny_undersida { display: block; width:200px; min-height:33px; margin: 20px 0 0 20px; float:left; }

.sidemeny_undersida li { display: block; width: 200px; padding: 4px 0 6px 0; margin: 0 0 5px 0; background: url(../images/sub_nav_bg.png) no-repeat bottom left; }

.sidemeny_undersida li a { color: #000; padding: 0 0 0 10px; }

.sidemeny_undersida li a:hover, 
.sidemeny_undersida li.current a  { color: #25a8de; }

.sidemeny_undersida li:last-child { background: none; }

/* Level 2 */

.sidemeny_undersida li.current ul { display: block; position: relative !important; width: 250px; min-height: 150px; margin: 0 0 0 0; padding: 0;   }

.sidemeny_undersida li li { width: inherit; height: 15px; margin-left: 10px; background: none; padding: 2px 0 0 0;  }

.sidemeny_undersida li li a,
.sidemeny_undersida li.current li a { font-size: 12px; color: #000; text-transform: none; padding: 0; }

Answer 1

您没有添加二级 ul 标签。您的 html 应如下所示:

<ul>
<li>One
    <!-- This is the html tag you're missing -->
    <ul>
        <li>OneDotOne</li>
        <li>OneDotTwo</li>
    </ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>

除此之外，您的 CSS 可以满足基本功能。您的基本示例在这里:http://jsfiddle.net/DANqg/1/以及您的初始菜单示例:http://jsfiddle.net/hxQRt/2/