Question

html的下拉菜单怎么写

<div class="A">
<div class="B" >
<ul>
<li><a href="webpage/about.htm">模块1</a></li>
<li><a href="webpage/about.htm">模块2</a></li>
<li><a href="webpage/about.htm">模块3</a></li>
</ul>
</div>

<div id="C" class="D">
<a href="webpage/about.htm">模块1.1</a>
<a href="webpage/about.htm">模块1.2</a>
<a href="webpage/about.htm">模块1.3</a>
<a href="webpage/about.htm">模块1.4</a>
</div>
</div>
怎么使模块1拉下来是模块1.1 模块1.2 模块1.3,怎么都连不起来，是在css里改么

Answer 1

用css是可以实现这种效果，不够要改一下HTML框架：

<div class="A">

    <div class="B" >

        <ul>

        <li id='li1'><a href="webpage/about.htm">模块1</a>

            <div id="C" class="D">

            <a href="webpage/about.htm">模块1.1</a>

            <a href="webpage/about.htm">模块1.2</a>

            <a href="webpage/about.htm">模块1.3</a>

            <a href="webpage/about.htm">模块1.4</a>

            </div>

        </li>

        <li><a href="webpage/about.htm">模块2</a></li>

        <li><a href="webpage/about.htm">模块3</a></li>

        </ul>

    </div>

</div>

CSS样式：

    *{padding: 0;margin:0;}

    li{width: 100px;height: 30px;background: black;text-align: center;}

    a{text-decoration: none;color:#fff;margin-bottom: 10px;}

    .B li{float: left;}

    #C{clear: both;}

    #C a{color: black;padding: 8px;display: none;}

    #li1:hover a{display: block;}

效果：

但以你给的HTML来看，应该是用JavaScript实现的。

追问

那如果用javascript怎么实现呢

追答

JS：

window.onload=function(){
var odiv=document.getElementById('C');
var oli=document.getElementById('li1');
oli.onmouseover=function(){
odiv.style.display="block";
}
oli.onmouseout=function(){
odiv.style.display="";
}
}

CSS：
*{padding: 0;margin:0;}
li{width: 100px;height: 30px;background: black;text-align: center;}
a{text-decoration: none;color:#fff;margin-bottom: 10px;}
.B{height: 30px;}
.B li{float: left;}
#C{width: 100px;text-align: center;display: none;}
#C a{color: black;display: block;}