css - 不同级别的导航 CSS

Question

我有一个左侧导航，我正在尝试使用 CSS 进行编码。

目前，当选择主要类别(从级别 0)时，子类别(级别 1)显示为“事件”颜色。当您单击子类别(级别 1)时，它会遵循与主类别(级别 0)相同的 css 规则，但在单击之前不会。

我想要的是在选择主类别(0 级)(打开子类别)时以白色背景显示的子类别(1 级)。然后，当在子类别(级别 1)中选择一个元素时，它遵循不同的规则(例如，字体采用不同的颜色)。

抱歉，尝试解释有点困惑!这是我的 CSS .. 任何帮助将不胜感激!我只是无法理解这个。该站点是使用 Magento 创建的，因此我无法轻易更改 html。

.vertnav-container {
margin-top:10px;
}

#vertnav li .vertnav-cat {
display:block;
width:210px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
font-size: 12px;
}

#vertnav li a {
}

#vertnav .inactive .vertnav-cat {
background-image: url(../images/inactive_bgd.jpg);
background-repeat: repeat-x;
}

#vertnav .next .vertnav-cat {
background-color:#b7de70;
}

#vertnav .prev .vertnav-cat {
background-color:#b7de70;
}

#vertnav li.parent .vertnav-cat {
background-color:#FFFFFF;
font-weight:bold;
}

#vertnav li.active .vertnav-cat {
background-color:#f59942;
background-image: url(../images/active_bgd.jpg);
font-weight:bold;
}

#vertnav li.inactive .vertnav-cat {
font-weight:normal;
}

#vertnav .level0 .vertnav-cat {
}

#vertnav .level1 .vertnav-cat {
padding-left:20px;
width:183px;
height: 5px;
border-bottom:1px dotted gray;
 }

#vertnav .level2 .vertnav-cat {
padding-left:20px;
width:172px;
}

#vertnav .level3 .vertnav-cat {
padding-left:30px;
width:162px;
}

更新: 我认为这是 html，但我不确定我是如何通过 Magento 编辑它的，如果您认为这是需要完成的，则需要查看此部分...

<div class="col-left sidebar"><div class="vertnav-container">
<div class="">
    <h4 class="no-display">Category Navigation:</h4>
    <ul id="vertnav">
<li class="first prev level0-inactive has-children level0 inactive fruit">
<span class="vertnav-cat"><a href="http://****/fruit.html"><span>Fruit</span>      </a></span>

  </li>
  <li class="level0-active level0 active vegetables">
  <span class="vertnav-cat"><a href="http://****/vegetables.html">    <span>Vegetables</span></a></span>

  </li>
  <li class="next level0-inactive level0 inactive meat">
   <span class="vertnav-cat"><a href="http://****/meat.html"><span>Meat</span>    </a></span>

   </li>
   <li class="level0-inactive level0 inactive dairy">
   <span class="vertnav-cat"><a href="http://****/dairy.html"><span>Dairy</span></a></span>

   </li>
   <li class="last level0-inactive level0 inactive for-the-pantry">
    <span class="vertnav-cat"><a href="http:****/pantry.html"><span>For the Pantry</span></a></span>

   </li>
    </ul>
    </div>
   </div>

Answer 1

嗯，你还没有回应。这是我可以想出的最简单的方法来轻松定位不同的元素。这是我在没有看到您的 HTML 的情况下所能做的最好的，但它应该为如何构建您的布局提供一些指导。

几件事。我会使用列表而不是大量的类，因为您的 CSS 会指示您正在做。

此外，使用 a:focus psuedo class 是一种简单的方法来定位主动点击的链接，而无需使用一堆额外的类等等。

JS fiddle :http://jsfiddle.net/SinisterSystems/v4n7G/3/

HTML:

<ul id="leftNav">
    <li><a href="#">Head One</a>
        <ul>
        <li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
        <li><a href="#">Sub 3</a></li>
        </ul>
    </li>
    <li><a href="#">Head Two</a>
        <ul>
        <li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
        <li><a href="#">Sub 3</a></li>
        </ul>
    </li>
</ul>

CSS:

a, a:visited, a:hover, a:active {
    color:#AAA;
}
ul#leftNav {
    width:200px;
}
ul#leftNav li {
    list-style:none;
    color:#666;
}
ul#leftNav a:focus {
    color:green;
}
ul#leftNav ul a{
    color:red;
}
ul#leftNav ul a:focus {
    color:blue;
}