Что случилось с моим html и css?

Question

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

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

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

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

image of what it looks like

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's 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>Can’t 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> 

Answer 1

"В списке не отображаются вертикально, как это было бы, если была применена в настоящее время CSS"

Чтобы отобразить его вертикально, вы должны очистить поплавок, который вы применили к li ранее. в ваших #content li стилей, изменить его с float:left на:

float:none; 

«Кроме того, их должно быть визуальная линия разрывает между ул и h2.»

Есть разрывы строк уже по моей скрипке, если вы сделаете предыдущее изменение:

http://jsfiddle.net/8Rke2/