改进我的下拉菜单（CSS）的外观

Question

我试图完成一些事情并且不知道从哪里开始。 1.我想这样做，菜单会在页面的整个宽度上延伸。 2.我想将subs的大小细化为等于main选项的宽度。 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更改才能使它像你想要的那样工作。我已经更新了你的小提琴，并提出了改变。很难解释每一件事。所以请亲自逐个查看代码。

 #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