Есть html код:
html, body {
height: 100%; margin: 0px; padding: 0px;
}
body {
background:url(http://www.vizitka-primerius.com/i.gif);
overflow-y: scroll;
color: #003596;
font-family: Arial, Helvetica, sans-serif;
}
p {
margin-top: 5px; /* Отступ сверху */
margin-bottom: 5px; /* Отступ снизу */
}
div.footer{padding-left: 40px; padding-top: 20px; padding-bottom: 20px;}
div.first{padding-left: 40px; padding-top: 20px; padding-bottom: 20px; text-align: justify;}
div.second{padding-left: 20px; padding-top: 20px; padding-bottom: 20px; text-align: justify;}
div.third{padding-left: 20px; padding-right: 40px; padding-top: 20px; padding-bottom: 20px; text-align: justify;}
div.divmenu{padding-left: 40px;}
table tr.authors{background-color: #e7effa; width: 100%;}
table tr.menu{background-color: #e7effa; width: 100%; margin: 0px; padding: 0px; display: block;}
.table-c{
width: 100%; border: 0px; height: 100%; min-width: 780px; overflow: hidden; border-spacing: 0px;
}
.table-c td{
padding: 0px;
}
nav {
margin: 0px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #e7effa;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #426ed2;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 20px 30px;
color: #003596; text-decoration: none;
}
nav ul ul {
background: #426ed2; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 20px 30px;
color: #fff;
}
nav ul ul li a:hover {
background: #003596;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
<table class=table-c>
<tr class=menu><td>
<div class=divmenu>
<nav style="margin: 0px; padding: 0px;">
<ul style="margin: 0px; padding: 0px;">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Продукция</a>
<ul>
<li><a href="#">Группа 1</a></li>
<li><a href="#">Группа 2</a></li>
<li><a href="#">Группа 1</a></li>
<li><a href="#">Группа 2</a></li>
<li><a href="#">Группа 1</a></li>
<li><a href="#">Группа 2</a></li>
<li><a href="#">Группа 3</a>
<ul>
<li><a href="#">Подгруппа 1</a></li>
<li><a href="#">Подгруппа 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Оптовые Продажи</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</div>
</td>
</tr>
</table>
В итоге получаем:
Как убрать по всему меню голубое горизонтальное пространство в несколько пикселей?
В nav ul убрать display: inline-table
html, body {
height: 100%; margin: 0px; padding: 0px;
}
body {
background:url(http://www.vizitka-primerius.com/i.gif);
overflow-y: scroll;
color: #003596;
font-family: Arial, Helvetica, sans-serif;
}
p {
margin-top: 5px; /* Отступ сверху */
margin-bottom: 5px; /* Отступ снизу */
}
div.footer{padding-left: 40px; padding-top: 20px; padding-bottom: 20px;}
div.first{padding-left: 40px; padding-top: 20px; padding-bottom: 20px; text-align: justify;}
div.second{padding-left: 20px; padding-top: 20px; padding-bottom: 20px; text-align: justify;}
div.third{padding-left: 20px; padding-right: 40px; padding-top: 20px; padding-bottom: 20px; text-align: justify;}
div.divmenu{padding-left: 40px;}
table tr.authors{background-color: #e7effa; width: 100%;}
table tr.menu{background-color: #e7effa; width: 100%; margin: 0px; padding: 0px; display: block;}
.table-c{
width: 100%; border: 0px; height: 100%; min-width: 780px; overflow: hidden; border-spacing: 0px;
}
.table-c td{
padding: 0px;
}
nav {
margin: 0px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #e7effa;
list-style: none;
position: relative;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #426ed2;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 20px 30px;
color: #003596; text-decoration: none;
}
nav ul ul {
background: #426ed2; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 20px 30px;
color: #fff;
}
nav ul ul li a:hover {
background: #003596;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
<table class=table-c>
<tr class=menu><td>
<div class=divmenu>
<nav style="margin: 0px; padding: 0px;">
<ul style="margin: 0px; padding: 0px;">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Продукция</a>
<ul>
<li><a href="#">Группа 1</a></li>
<li><a href="#">Группа 2</a></li>
<li><a href="#">Группа 1</a></li>
<li><a href="#">Группа 2</a></li>
<li><a href="#">Группа 1</a></li>
<li><a href="#">Группа 2</a></li>
<li><a href="#">Группа 3</a>
<ul>
<li><a href="#">Подгруппа 1</a></li>
<li><a href="#">Подгруппа 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Оптовые Продажи</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</div>
</td>
</tr>
</table>
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
Доброе время суток, товарищи! Подскажите пожалуйста как убрать свечение svg фильтраПосмотреть можно на демо сайте p
Надо отправлять Aяксом инфу из поля <input> на сервер (при этом, при нажатии на Enter, должна отправляться эта инфа) без использования <form>