html - 优化下拉菜单的外观 (CSS)

Question

我正在努力完成一些事情，但不知道从哪里开始。 1. 我想让菜单横跨页面的整个宽度。 2. 我想细化子选项的大小以等于主选项的宽度。 3. 如果我把它做成导航并改变路由，它能像 DDM 一样运行吗？

相关代码的 jsfiddle:http://jsfiddle.net/Ph2Wb/

我想将其合并到的页面的 jsfiddle:http://jsfiddle.net/dQ3ey/

---

HTML

<ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Final</a></li>
            <li><a href="#">Midterm</a></li>
            <li><a href="#">Homework Assignments</a>
                <ul>
                    <li><a href="#">CS/IS 101</a>
                        <ul>
                            <li><a href="#">Puzzles</a>
                                <ul>
                                    <li><a href="#">Chapters 1-3</a></li>
                                    <li><a href="#">Chapters 4-6</a></li>
                                    <li><a href="#">Chapters 7-9</a></li>
                                    <li><a href="#">Chapters 10-12</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Word</a>
                                <ul>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Excel</a>
                                <ul>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Access</a>
                                <ul>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">PowerPoint</a>
                                <ul>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">CS/IS 260</a>
                        <ul>
                            <li><a href="#">Ch. 1</a></li>
                            <li><a href="#">Ch. 2</a></li>
                            <li><a href="#">Ch. 3</a></li>
                            <li><a href="#">Ch. 4</a></li>
                            <li><a href="#">Ch. 5</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Class Assignments</a>
                <ul>
                    <li><a href="#">CS/IS 101</a>
                        <ul>
                            <li><a href="#">Puzzles</a></li>
                            <li><a href="#">Word</a></li>
                            <li><a href="#">Excel</a></li>
                        </ul>
                    </li>
                    <li><a href="#">CS/IS 260</a>
                        <ul>
                            <li><a href="#">Puzzles</a></li>
                            <li><a href="#">Word</a></li>
                            <li><a href="#">Excel</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Favorite Sites</a></li>
            <li><a href="#">About Me</a></li>

CSS

#menu, #menu ul{
 margin:0;
 padding:0;
 list-style-type:none;
 list-style-position:outside;
 position:relative;
 line-height:2.5em;
}

#menu a:link, #menu a:active, #menu a:visited{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
}

#menu a:hover{
background-color:#fff;
color:#333;
}

#menu li{
float:left;
position:relative;
}

#menu ul {
position:absolute;
width:12em;
top:2.5em;
display:none;
}

#menu li ul a{
width:12em;
float:left;
}

#menu ul ul{
top:auto;
}

#menu li ul ul {
left:12em;
margin:0px 0 0 10px;
}

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}

#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
}

Answer 1

您必须对 CSS 进行大量更改才能使其按您想要的方式工作。我已经更新了您的 fiddle 并提出了更改。很难解释每一件事。所以请您自己一个一个地检查代码。

 #menu{
 margin:0;
 padding:0;
 list-style-type:none;
 list-style-position:outside;
 position:relative;
 line-height:2.5em;
width:100%;
background-color:#333;
display:inline-block;
}
#menu a:link, #menu a:active, #menu a:visited{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
width:100%;
}

#menu a:hover{
background-color:#fff;
color:#333;
}
#menu ul a:link, #menu ul a:active, #menu ul a:visited{
width:calc(100% - 12px);
} 

#menu li{
float:left;
position:relative;
}

#menu ul {
position:absolute;
top:2.5em;
left:-2.5em;
 list-style-type:none;
 list-style-position:outside;
line-height:2.5em;
display:none;
width:100%;
}
#menu ul li{display:inline-block; width:100%}
#menu li ul a{
 float:left;
}

#menu ul ul{
top:auto;
}

#menu li ul ul {
position:absolute;
left:100%;
margin:0px 0 0 -2em;
}

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}

#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li   li:hover ul{
display:block;
}

FIDDLE DEMO