The problem with the styles in the drop-down menu

Question

Good evening. Such a problem: a large space in the drop-down menu between the links Before I inserted the links, everything was fine

.dropOut ul { float: left; padding: 10px 0; } .dropOut ul li { text-align: left; float: left; width: auto; padding: 12px 0 10px 15px; margin: 0px 10px; color: #777; -webkit-border-radius: 4px; -mox-border-radius: 4px; border-radius: 4px; -webkit-transition: background .1s ease-out; -moz-transition: background .1s ease-out; -ms-transition: background .1s ease-out; -o-transition: background .1s ease-out; transition: background .1s ease-out; }

 <div class="dropdownContain"> <div class="dropOut"> <ul> <a href="pvh.html#sib"><li>Окна Rehau Sib-Design</li></a> <a href="pvh.html#geneo"><li>Окна Rehau Geneo</li></a> <a href="pvh.html#euro"><li>Окна Rehau Euro-Design</li></a> <a href="pvh.html#interlio"><li>Окна Rehau Intelio</li></a> <a href="pvh.html#brilliant"><li>Окна Rehau Brillant-design</li></a> </ul> </div> </div>

here it is "long distance"

The code should not be in the form of pictures, but in the form of text.
Sorry, but what do you have I will bring under: a long distance?
@ superana for some reason it seems to me that some style is inherited from the parent.
It would be much easier to solve the problem with a link to the site or the entire page code.
For standard margin and padding , indented list is very large.

Yuri yuri 13.3k 5 gold signs 39 silver marks 83 bronze marks · Answer 1 · 2017-01-04T21:20:59

Add a margin: 0 style for ul . By standard, ul an indent:

 .dropOut ul { float: left; padding: 10px 0; margin: 0; }

Answer 2 · 2017-01-04T21:18:09

Remove ul from the markup and replace it with the nav tag. The problem is that ul has default padding . And from the point of view of validity, it would be more correct, because your ul goes without li . Or reset the styles for lists:

 // Remove default margins ul, ol, menu { margin: 0; padding: 0; -moz-padding: 0; -webkit-padding: 0; list-style: none; }

If you remove ul , then not quite the right menu structure will be released

The problem with the styles in the drop-down menu

2 answers 2

More articles: