Question

我有一个问题是让下拉子菜单在我正在制作的网站中工作。有没有办法使用ID标签，就像我必须专门针对这些组或我是否需要浏览ul ul ul等？无论哪种方式，我似乎都无法显示我的子菜单。

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="StyleSheet.css" type="text/css">
    <title>Confederacy of Vulcan</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Confederacy of Vulcan</h1>
    <div id="nav">
        <ul>
            <li><a class="active" href="#news" title="Announcements from the Confederacy of Vulcan">NEWS</a>
            <ul id="news-sub-nav">
                <li><a href="#current">CURRENT</a></li>
                <li><a href="#archives">ARCHIVES</a></li>
            </ul>
            </li>
            <li><a href="#about" title="The structure and principles of the Confederacy of Vulcan">ABOUT</a>
            <ul id="about-sub-nav">
                <li><a href="#charter_of_logic">CHARTER OF LOGIC</a></li>
                <li><a href="minsitry_of_state">MINISTRY OF STATE</a>
                <ul id="ministry-of-state-nav">
                    <li><a href="#first_minister">FIRST MINISTER</a></li>
                    <li><a href="#second_minister">SECOND MINISTER</a></li>
                    <li><a href="#ambassadorial_staff">AMBASSADORIAL STAFF</a></li>
                </ul>
                </li>
                <li><a href="#high_command">HIGH COMMAND</a>
                <ul id="high-command-nav">
                    <li><a href="#minister_of_defense">MINISTER OF DEFENSE</a></li>
                    <li><a href="#minister_of_security">MINISTER OF SECURITY</a></li>
                    <li><a href="#minister_of_thought">MINISTER OF THOUGHT</a></li>
                </ul>
                </li>
                <li><a href="#ministry_of_trade">MINISTRY OF TRADE</a></li>
                <li><a href="#ministry_of_science">MINISTRY OF SCIENCE</a></li>
                <li><a href="#ministry_of_records">MINISTRY OF RECORDS</a></li>
            </ul>
            </li>
            <li><a href="#history" title="Historical records">HISTORY</a></li>
            <li><a href="#trade" title="Ministry approved trade routes and trade agreements">TRADE</a></li>
            <li><a href="#reports" title="Reports from our Ministry of Science">REPORTS</a></li>
            <li><a href="#contact" title="Want to find out how to contact us?">CONTACT</a></li>
        </ul>
    </div>
</body>
</html>

CSS

body {
    background-image:url("http://images.akamai.steamusercontent.com/ugc/271725310712894092/9D39DEAA6DDB0B7E2824685BBDEB07DD66235A39/");
}
h1 {
    color:#f8d813;
    font-size:75px;
    font-family:'Agency FB';
    text-align:center;
}
ul {
    list-style:none;
    position:relative;
    display:inline-table;
    width:976.55px;
    margin:auto;
    padding:0;
    overflow:hidden;
    background-color:#696969;
}
ul:after{
    content:"";
    clear:both;
    display:block;
}
#nav { 
    text-align:center; 
    height:50px;
}
#nav ul {  
    font-size:25px;
    font-family:'Agency FB';

}
#nav ul li {
    display:inline-block;
}
li a {

    display:block;
    color:black;
    text-align:center;
    padding:15px 50px 15px 50px;
    text-decoration:none;
}
li a:hover {
    background-color:#c0c0c0;
}
#news-sub-nav{
    display:none;
}
#nav ul li:hover ul{
    display:block;
    float:none;
    position:absolute;
    width:176.55px;
    font-size:20px;
    top:100%;
    padding:0;
    background:radial-gradient(bottom, #353535 0%, #808080 90%);
    background:-moz-radial-gradient(bottom, #353535 0%, #808080 90%);
    background:-webkit-radial-gradient(bottom, #353535 0%, #808080 90%);
}
#about-sub-nav{
    display:none;
}
#ministry-of-state-nav{
    position:absolute;
    left:100%;
    top:0;
}

VS 2015中的HTML下拉子菜单ID

0 个答案: