Артём Лучников

попробуйте такие стили

h1 {
  display: inline-block;
  position: relative;
  font-size: 52px;
  margin-bottom: 40px;
  margin-top: 10px;
  padding: 5px;
}

h1:after {
  content: '';
  display: block;
  background: rgba(251,218,3,0.8);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -9px;
  height: 18px;
  width: 100%;
  z-index: -1;
}

А зачем с таблицей усложнять? в option указываете цену в атрибуте value:

<select>
    <option value="7827 руб">80x190/200см</option>
    <option value="8768 руб">90x190/200см</option>
    <option value="11271 руб">120x190/200см</option>
</select>
<p>Цена матраса: <span id="price"></span></p>

Ну и дальше все просто:

$('select').on('change', function(e) {
    	$('#price').text($(this).val());
});

Пример на jsfiddle

Можно посмотреть, к примеру, как сейчас youtube отдает код для вставки видео:

<div style="position:relative;height:0;padding-bottom:56.25%">
    <iframe src="https://www.youtube.com/embed/hzYjjVcIWOA?ecver=2" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe>
</div>

Т.е. при уменьшении/растяжении блока с видео, оно будет пропорционально уменьшаться/увеличиваться.

На стороне сервера у активного ul выставлять класс, например
<ul class='active'>
А потом немного модфицировать jQuery код

$(document).ready(function() {
 $("#menu ul").not('.active').hide();
 $("#menu li span").click(function() { $(this).next().slideToggle("normal"); });
});

используйте делегирование $( elements ).delegate( "#добавленного элемента", "click", function(){});
подробнее тут api.jquery.com/delegate