与CSS的多行菜单

-3

我试图创建一个userfriendly多个OnePage网站。与CSS的多行菜单

通常，在OnePage网站中，您有一个包含定位点的菜单。我现在想要做的是有一个主菜单，其中包含链接到3个独立的OnePages和一个包含有关当前OnePage的锚点的子菜单。

换句话说：我想要做的是创建3页，这3个页面应该在主菜单中各自拥有自己的超链接按钮。当你访问这些页面之一时，你应该在主菜单下面有一个子菜单，其菜单中的所有定位点都与该页面有关。

我的问题是，你能在这样的设置与CSS实现这一目标？

<ul class="primary"> 
<li class="page_item"> 
    <a href="#" class="external active">Home</a> 
    <ul class="children"> 
    <li class="page_item"> 
    <a href="#" class="">Start</a> 
    </li> 
    <li class="page_item"> 
    <a href="#" class="">About us</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Partners</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Courses</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Contact us</a> 
    </li> 
    </ul> 
</li> 
<li class="page_item page-item-1522"> 
    <a href="#" class="external">Education</a> 
    <ul class="children"> 
    <li class="page_item"> 
    <a href="#" class="">Start</a> 
    </li> 
    <li class="page_item"> 
    <a href="#" class="">Products</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Advantages</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Our Clients</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Contact us</a> 
    </li> 
    </ul> 
</li> 
<li class="page_item page-item-1522"> 
    <a href="#" class="external">Corporate</a> 
    <ul class="children"> 
    <li class="page_item"> 
    <a href="#" class="">Start</a> 
    </li> 
    <li class="page_item"> 
    <a href="#" class="">Products</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Advantages</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Our Clients</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Contact us</a> 
    </li> 
    </ul> 
</li> 
</ul>

来源

2014-12-03 pmr

你有什么尝试？你想让我们为你的谷歌“CSS下拉菜单”？在CSS下拉菜单的网页上有很多例子。 – CaldwellYSR 2014-12-03 22:00:34

我确实是谷歌这个，thnx的报价。不，没有找到任何多行的例子。 – pmr 2014-12-03 22:04:40

目前还不清楚CSS与这个问题有什么关系。弄清楚你想如何设置你的html标记，然后你可以开始在CSS上工作。另外，“多个OnePage”听起来像是一个矛盾。 – wentz 2014-12-03 22:04:42

我曾经有过同样的问题。

最后我分开子菜单出主菜单，即

<h2 class="hidden">Main Menu</h2> 
<ul> 
    <li class="selected">Home</li> 
    <li>Education</li> 
</ul> 
<h3 class="hidden">Sub Menu</h3> 
<ul> 
    <li>Start</li> 
    <li>About Us</li> 
    ...etc... 
</ul>

我宁愿不要做这种方式，而是做你所建议。然而，由于我的主导航结构，如果每个子菜单都包含在主菜单的<li>标签中，我将需要依靠一些讨厌的定位技巧，以便将所有内容转移到页面的左侧边缘。

有可能是一个更好的办法，但一个快速和肮脏的方法，我想出了刚才如下：

[CSS]

nav { 
    position: relative; 
    padding-bottom: 30px; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

li { 
    display: inline-block; 
    vertical-align: top; 
    margin-right: 30px; 
} 

ul li ul { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}

[HTML]

<ul> 
    <li>Home</li> 
    <li>Education 
     <ul> 
      <li>Start</li> 
      <li>About</li> 
     </ul> 
    </li> 
    <li>Other</li> 
</ul>

来源

2014-12-04 00:21:38 MrCarrot

与CSS的多行菜单

回答

相关问题