Помогите с Меню =)

[HappyUser]

Всем здрасте! Помогите пожалуйста начинающему web-деятелю =) сделать менюшку, пытался сам но что то ничего не получается

сдизайнил вот такую нехитрую менюшку

должно выглядеть именно так а вот что получается

при наведении мыщи тоже фигня какая то.

Вот сам код SCC:

<style>

/* Главное Меню Начало */

ul.menu li{

display:inline;

paddin: 10px;

margin: 10px 10px 10px 10px;

color:#FFF; /*Цвет текста*/

background:#060;

font-family:Arial, Helvetica, sans-serif;

}

ul.menu li a {

padding: 10px;

margin: 10px 10px 10px 10px;

text-decoration:none;

color:#FFF;

}

ul.menu li a:hover {

background:#090;

}

</style>

А вот HTML:

<!-- Меню начало -->

<div style="background:#0C0; float:left; height:35px; width:94px;"> menu left side </div>

<!-- Кнопки меню блок начало -->

<div style="background:#C6C600; text-align:center; float:left;"> <!-- -->

<ul class="menu">

<li><a href="Catalog.html">Наш Каталог</a></li>

<li><a href="Exclusive.html">Эксклюзив</a></li>

<li><a href="Price.html">Прайс Лист</a></li>

<li><a href="Contacts.html">Контакты</a></li>

</ul>

</div>

<!-- Конец (Кнопки меню) -->

Помогите плизз =)) Сам не могу побороть. =)

[USF]

что-то я не могу понять связи между макетом и второй картинкой

[wwt]

офф топ : "Главное Меню. Начало.".

Edited October 31, 2012 by wwt

[HappyUser]

=) это я только начал делать просто div ами все сделано типа каркас такой. =)

[svnmsk]

http://jsfiddle.net/VAWPu/1/

[HappyUser]

Так видимо я плохо объяснил что именно пытаюсь добиться, вот нашел в инете пример меню и немного изменил вот код:

Вот есть вопросы что значит * {margin:0px; padding:0px;} этот стиль влияет как то на все списки в основном теле страницы... куда его можно перенести чтобы не влиял?

<style type="text/css">

/* Главное Меню Начало */

* {margin:0px; padding:0px;} <<<<<<<<<<<<<< Что это?????

/* ul, li{list-style:none;} */ <<<<< Это я перенес в ul.menu вроде помогло вернуть спискам в основной части точки

img {border:0;}

.div-menu {

margin-top:0px;

width:100%; height:38px;

background:url(pics/bg.png) repeat-x;

}

ul.menu {

margin:0 auto;

width:700px; height:38px;

display:block;

list-style:none;

}

li.menu-item {

text-align:center;

line-height:38px;

font-family:"Myriad Pro", Arial;

font-size:11pt;

width:140px;

height:38px;

float:left;

color:#fff;

}

li.menu-item a{

display:block;

width:140px;

height:38px;

color:#fff;

text-decoration:none;

}

li.menu-item a:hover{

display:block;

width:140px;

height:38px;

color:#485663;

text-decoration:underline;

background:url(pics/hover.png) 0 3px no-repeat;

}

ul.menu li {background:url(pics/clear.png) left no-repeat;}

ul.menu li:first-child {background:none;}

/* Конец Главное Меню */

</style>

Само меню в BODY:

<div class="div-menu">

<ul class="menu">

<li class="menu-item"><a href="#">Главная</a></li>

<li class="menu-item"><a href="#">Услуги</a></li>

<li class="menu-item"><a href="#">Эксклюзив</a></li>

<li class="menu-item"><a href="#">Прайс-Лист</a></li>

<li class="menu-item"><a href="#">Контакты</a></li>

</ul>

</div>

Edited November 6, 2012 by HappyUser

[HappyUser]

UP

[Pasha]

/* Главное Меню Начало */

* {margin:0px; padding:0px;} <<<<<<<<<<<<<< Что это?????

* значит, что для всех элементов страницы будут применены стили в фигурных скобках.

Справки по свойствам: margin, padding.

Edited November 7, 2012 by Pasha