Два блока

[Simel]

Возник очередной вопрос, как правильнее сделать и проще такую задачу.

Первое что пришло в голову.

HTML

  <div id="header">
    <div id="menu">
      <ul>
        <li>Control Panel</li>
      </ul>
    </div>
    <div id="sub_menu">
      <ul>
        <li>Settings</li>
      </ul>
    </div>
  </div>

CSS

#header {
	width: 100%;
	background-color: #000;
}
#header #menu {
	height: 30px;
}
#header #sub_menu {
	height: 30px;
	background-color: #dadada;
}
#header #menu ul { 
	color: #fff;	
}
#header #menu ul li {	
	float: left;
	padding: 8px 0px 0px 30px;
	margin: 0px 0px 0px 0px;
	list-style: none;
	}
#header #sub_menu ul { 
	color: #d20f0f;	
}
#header #sub_menu ul li {	
	float: left;
	padding: 8px 0px 0px 30px;
	margin: 0px 0px 0px 0px;
	list-style: none;
}

Возникает такой вопрос, верно ли такое решение с точки зрения правильной верстки, и есть ли другие варианты.?

Edited October 15, 2011 by Simel

[amelice]

Возникает такой вопрос, верно ли такое решение с точки зрения правильной верстки, и есть ли другие варианты.?

Можно обойтись одним списком из двух элементов (конкретно в вашем случае).

http://jsfiddle.net/TW2Bc/2/

[Vlad]

Зачем здесь вообще список, это выглядит как блок, тогда вообще можно двумя обойтись элементами.

<div class="block">
<h2>Control Panel</h2>
<div class="content">Settings</div>
или
<p>Settings</p>
</div>

[psywalker]

Simel,

Дружище, а это что вообще такое? Какое-то меню или чё? Вверху - это заголовок?

[Simel]

Simel,

Дружище, а это что вообще такое? Какое-то меню или чё? Вверху - это заголовок?

Вообще планировалось что это будет меню.

Сверху основное , снизу выпадающее.

[psywalker]

Simel,

Дружище, а это что вообще такое? Какое-то меню или чё? Вверху - это заголовок?

Вообще планировалось что это будет меню.

Сверху основное , снизу выпадающее.

Тогда делай, как тут http://psywalker.ru/Forum/Menu/L-Menu/main-page.html