css - 如何使用 css 从顶部固定下拉菜单？

Question

我想制作一个像http://www.homeshop18.com/ 中那样的下拉菜单仅使用 css 而没有 jquery，特别是所有类别菜单。我已经尝试使用 css 下拉菜单，但问题是我无法修复顶部的二级菜单。任何建议将不胜感激。

Answer 1

从您发布问题的方式无法理解您的问题，但是 here是我放在一起的一个快捷菜单，它仅使用 CSS，其功能类似于您发布的网站上的菜单。

HTML:

<ul class="main">
    <li>all
        <ul class="sub">
            <li>books
                <ul class="sub2">
                    <li>fiction</li>
                    <li>biography</li>                    
                </ul>
            </li>
            <li>mobile
                <ul class="sub2">
                    <li>android</li>
                    <li>cmda</li>                    
                    <li>battery</li>
                </ul>
            </li>            
        </ul>    
    </li>
</ul>​

CSS:

li {
 border:1px solid;
 padding:1px;
}

.main {
 list-style:none;
 position:relative;    
}

.sub, .sub2 {
 list-style:none;
 position:absolute;  
 display:none;
 width:75px;    
}

.sub2 { 
 float:left;
 left:75px; 
 top:0px;    
}

.main li:hover .sub,
.sub li:hover .sub2{
 display:block;    
}