Что не так с моими HTML и CSS?

Я пытался создать основную страницу, которая просто отображает рекомендации литературного журнала.

Я использовал ul и li чтобы он выглядел организованным, но что-то не так. У меня также есть сброс css в моем css, но я не думал, что это необходимо, чтобы поместить его в предварительный просмотр.

Я думаю, что проблема может быть в некоторых из ul для выпадающего меню, но я не уверен, где искать. Также я попытался дать классы ul и li поэтому он будет загружать только эту часть, но это не сработало. Я удалил выпадающее меню, и ul действительно работала.

Изменение: список не отображается вертикально, как если бы он был применен. То, что оно делает, отображает это, как если бы это был тег абзаца, но в начале каждого предложения была пуля. Также должны быть визуальные разрывы линий между ul и h2.

образ того, как он выглядит

Css:

#content-container{
width: 960px;
height:1000px;
background-color: red;
margin:auto;
}

#navbar {
width: 100%;
height: 30px;
/*background-color: pink;*/
text-align:center;
display:inline-table;
}

#navbar ul ul {
display: none;
 }

#navbar ul li:hover > ul {
    display: block;
}

#navbar ul {
background: #efefef; 
/*background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); */
/*box-shadow: 0px 0px 9px rgba(0,0,0,0.15);*/
/*padding: 0 20px;*/
/*border-radius: 10px;*/  
list-style: none;
position: relative;
display: inline-table;
}
#navbar ul:after {
    content: ""; clear: both; display: block;
}

li {
float: left;
}
#navbar ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
    #navbar ul li:hover a {
        color: #fff;
    }

#navbar ul li a {
    display: block; padding: 10px 50px;
    color: #757575; text-decoration: none;
}

#navbar ul ul {
background: #5f6975; border-radius: 0; padding: 0;
position: absolute; top: 100%;
}
#navbar ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
    #navbar ul ul li a {
        padding: 5px 20px;
        color: #fff;
    }   
        #navbar ul ul li a:hover {
            background: #4b545f;
        }

        #navbar ul ul ul {
position: absolute; left: 100%; top:0;
}

*#content{
width:960px;
height:500px;
margin:auto;
background-color:purple;
}

 #content h1{
font-family: 'Droid Serif', 'serif';
font-weight: 700;
}

#content h2{
font-family: 'Droid Serif', 'serif', 'italic';
font-weight: 700;
}

#content ul{
list-style-type:circle;
font-family: 'Droid Serif', 'serif';
padding: 0;
margin: 0;
 }

#content li{
font-family: 'Droid Serif', 'serif';
padding-left:10px;
float:left;
}

Html:

    <div id= "navbar">
                    <ul>
                        <li><a href="#">Today Content</a></li>
                        <li><a href="#">Genre</a>
                            <ul>
                            <li><a href="#">Fiction</a></li>
                            <li><a href="#">Non-Fiction</a></li>
                            <li><a href="#">Poetry</a></li>
                            <li><a href="#">Drama</a></li>
                            <li><a href="#">Romance</a></li>
                            </ul>   
                        </li>
                        <li><a href="#">Rubric</a></li>
                        <li><a href="#">Content</a>
                            <ul>
                            <li><a href="#">Jan</a></li>
                            <li><a href="#">Feb</a></li>
                            <li><a href="#">Mar</a></li>
                            <li><a href="#">Apr</a></li>
                            <li><a href="#">May</a></li>
                            <li><a href="#">June</a></li>
                            <li><a href="#">July</a></li>
                            <li><a href="#">Sept</a></li>
                            <li><a href="#">Oct</a></li>
                            <li><a href="#">Nov</a></li>
                            <li><a href="#">Dec</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Submit</a></li>
                    </ul>
                </div>

        <div id="content-container">
            <div id="content">
                <h1>
                    Submission deadline: Friday, May 9th
                </h1>
                <h2>
                    Poetry Submissions
                </h2>
                <ul>
                    <li>Needs a title</li>
                    <li>Cannot be about specific other students</li>
                    <li>Must have a way to contact if any questions </li>
                    <li>Cant be disrespectful or rude</li>

                </ul>
                <h2>
                    Fiction Submissions
                </h2>
                <ul>
                    <li>5 submissions, 10page cap total</li>
                    <li>Spelling and grammar checked</li>
                    <li>Must be typed</li>
                    <li>Showing vs. telling - wanted</li>
                    <li>Staple work &#38; corresponding artwork or label art w/ title of work</li>
                    <li>Must be fiction &#40;has to fit genre&#41;</li>
                </ul>
            </div>
        </div>