Убрать пространство в меню при переходе на HTML5

212
19 сентября 2018, 22:00

Есть 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>

В итоге получаем:

Как убрать по всему меню голубое горизонтальное пространство в несколько пикселей?

Answer 1

В 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>

READ ALSO
Как убрать свечение svg фильтра?

Как убрать свечение svg фильтра?

Доброе время суток, товарищи! Подскажите пожалуйста как убрать свечение svg фильтраПосмотреть можно на демо сайте p

171
Kак активировать Aякс при нажатие Enter в поле input

Kак активировать Aякс при нажатие Enter в поле input

Надо отправлять Aяксом инфу из поля <input> на сервер (при этом, при нажатии на Enter, должна отправляться эта инфа) без использования <form>

166
Не работает emmet в index.php

Не работает emmet в index.php

Помогите настроить emmetОн работает в index

186
Safari без мака

Safari без мака

Как протестировать верстку на сафари, если нету MAC?

193