Как обернуть эти вкладки меню?

Я изменял верхнюю панель меню на веб-сайте, и когда я добавил в меню некоторые новые элементы - <ul> с блоками цвета позади в css, все они сгруппировались в конце. Теперь, будучи совершенно новым для кодирования, я подумал, что могу просто бросить кусочек br в середине, чтобы шунтировать вкладки после того, как на нижеприведенную строку и аккуратные вещи, но это оставило огромный разрыв между двумя строками пунктов меню ... .Как обернуть эти вкладки меню?

Как я могу стилизовать это - ОЧЕНЬ просто, так что любые новые вкладки меню, которые я добавляю, просто аккуратно опускаются на следующую строку, красиво разнесенные ....? Благодарю.

#SUBMENU { float:left; text-align:left;} 


#SUBMENU ul { list-style-type:none; margin:0; padding:0;  text-align:center;} 

#SUBMENU ul li { display: block; } 

#SUBMENU ul li a.SUBSMAL { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #fff; background-color:#d21818; width:100%; display:block; } 

#SUBMENU ul li a.SUBS1 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #fff; background-color:#d21818; width:100%; display:block; } 
#SUBMENU ul li a.SUBS2 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #fff; background-color:#185cb0; width:100%; display:block; } 
#SUBMENU ul li a.SUBS3 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #fff; background-color:#4b0082; width:100%; display:block; } 
#SUBMENU ul li a.SUBS4 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #000; background-color:#e9dc11; width:100%; display:block; } 
#SUBMENU ul li a.SUBS5 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #fff; background-color:#06a01f; width:100%; display:block; } 

#SUBMENU ul li a.SUBS6 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #fff; background-color:#ff7e16; width:100%; display:block; } 
#SUBMENU ul li a.SUBS7 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #000; background-color:#14f076; width:100%; display:block; } 
#SUBMENU ul li a.SUBS8 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #fff; background-color:#f342e4; width:100%; display:block; }

<div id="SUBMENU" class="row" style="background-color: #000; margin-bottom: 0;"> 
<div class="column span-16"> 
<ul> 
<li style="display: block;"><a class="SUBSMAL" href="http://http://www.liverpoolconfidential.co.uk/offers/liverpool-malmaison" target="_parent">Offers</a></li> 
<li><a class="SUBS1" href="http://www.liverpoolconfidential.co.uk/offers/liverpool-malmaison/about-us" target="_parent">About Us</a></li> 
<li><a class="SUBS1" href="http://www.liverpoolconfidential.co.uk/offers/liverpool-malmaison/menus" target="_parent">Menus</a></li> 
<li><a class="SUBS1" href="http://www.liverpoolconfidential.co.uk/offers/liverpool-malmaison/location" target="_parent">Location</a></li> 
<li><a class="SUBS4" href="http://www.liverpoolconfidential.co.uk/offers/liverpool-malmaison/what-you-say" target="_parent">What You Say</a></li> 
<li><a class="SUBS5" https://wakelet.com/wake/4d597dc9-b689-4b88-b4ef-4652f22b746d" target="_parent">What they say</a></li> 
<li><a class="SUBS5" https://wakelet.com/wake/58c96671-8669-4c1f-8965-c516af0f8c9d" target="_parent">What we say</a></li> 
<li><a class="SUBS5" https://wakelet.com/wake/58c96671-8669-4c1f-8965-c516af0f8c9d" target="_parent">Christmas</a></li> 
</ul> 
</div> 
</div>

источник

2016-10-06 MikeB

Проверить эту ссылку: -https: // CSS -tricks.com/css3-tabs/ –

от SUBS5 вы забыли HREF имущества

Используйте этот

<li><a class="SUBS5" href="https://wakelet.com/wake/58c96671-8669-4c1f-8965-c516af0f8c9d" target="_parent">What we say</a></li>

Вместо

<li><a class="SUBS5" https://wakelet.com/wake/58c96671-8669-4c1f-8965-c516af0f8c9d" target="_parent">What we say</a></li>

источник

2016-10-06 15:45:17

это проблема, но не ответ – demo

А, ок, круто - спасибо. Это немного помогло, но теперь новые вкладки меню, которые работают на приведенной ниже строке, немного перекрывают верхнюю строку вкладок ... как я их размещаю, чтобы они сидели красиво ниже? Спасибо миллион – MikeB

Кто-нибудь? Нужно вернуться к этому утром (Великобритания). – MikeB

Как обернуть эти вкладки меню?

ответ

Смежные вопросы