Помогите с CSS кодом

Здравствуйте!

Помогите с ЦСС кодом меню.

Вот скрин меню, как оно сейчас:

Хочу сделать следующее:

1. Чтобы при наведении на "родительскую ссылку" фон выделялся во всю высоту (на прмиере показано синим). В реале выделяется не во всю высоту (белый фон, на ссылке "Кулинария")

2. Чтобы меню было во всю ширину. Если в коде меняю значение ширины, то ссылки (подменю) становятся на одной строке, а мне нужно, чтобы каждая ссылка была на отдельной строке.

3. Чтобы при наведении на ссылку в "подменю" менялся фон во всю ширину и ссылка становилась активной не только, когда наводишь именно на текст, но и на поле рядом

Вот та часть кода, которая отвечает за меню:

#header_container #nav li{position: relative;z-index: 99999999999;}

#header_container #nav .children{width: 100px;display: none; position: absolute;z-index: 99999999999;padding: 2px 0;background: #D7D2D0;-webkit-box-shadow:0 3px 4px -2px #D7D2D0;-moz-box-shadow:0 3px 4px -2px #D7D2D0;box-shadow:0 3px 4px -2px #D7D2D0;text-align: left;}

#header_container #nav li:hover .children{width: 100px;display: block; position: absolute;z-index: 99999999999;padding:5px 10px 5px 5px ;background:#faf7f7; -webkit-box-shadow:0px 3px 3px -2px #000;-moz-box-shadow:0px 3px 3px -2px #000;box-shadow: 0px 3px 3px -2px #000;text-align: left;margin-top:2px;}

#header_container #nav .children li {margin-bottom:2px;float: left;}

#header_container #nav .children li:hover {background:#faf7f7;text-decoration:none;}

#header_container #nav .children li a:hover {color: #d93f12;}

#nav .cat-item:hover {background:#fff;}

Подскажите, пожалуйста :confused: