Understanding how menus work in html5 and css3 -

Good day! I am trying to learn how to create good looking menus in html 5 and css3. Because of my little experience with these languages, I soon learned that I can remember the logic behind the menu. The idea of ​​this thread is to ensure that I understand the logic of the menu (or understand it after this thread) and how to style it.

It will be divided into two parts, the second part will focus on coding, the first principle will focus on the theory.

Okay, what I've read / understood, is the idea of ​​every menu basically a list with custom style so far so good, but I fail to understand, in fact it is & Lt; Le & gt; Elements, how many (and what) elements are done with styling & lt; Le & gt; What is inside these elements, I see that many people like to use & lt; One & gt; Element on the Button Is this a standard or style preference? Is & lt; One & gt; Element?

I think it's actually included for the actual code, now. I have created a small menu from scratch which I can understand that some part of it is not working, for example li: last-child and li: first-child parts of css

1) I am interested in finding out where the errors are I 2) I am interested in knowing how I can improve this code.

Here is the full source code with some comments:

   & Lt; Style & gt; / * All padding, margin and outline should be removed / / {margin: 0; Padding: 0; Profile: None; } / * This will automatically style the list * / ul {list-style: none; Margin: 3% 40%; } Li: First-child (border-top-left-radius: 10px; border-bottom-left-radius: 10px;} Li: last child (border-top-right-radius: 10px; border-bottom right-radius: 10px;} Li {Float: left;} / * This will style buttons / / buttonStyle {width: 60px; height: 20px; boundary-radius: 1px;} / * when it hovered * / .buttonStyle: hover {Background: # 383; / * This row: * / filter: progressed: DXimage correspondenceform.microsoft.gridant (startcartrate = '#f7f7 F 7 ', Endocrostrat =' # Aded ', Gradient Type = 0);} & lt; / style & gt; & lt; / head & gt; & lt; body & gt; & lt;! - Store the Button Custom list created for - & gt; & lt; ul & gt; & lt;! - Just a few buttons look like this menu - & gt; & lt; li & gt; & lt; input type = "button 
 
 Type class = "button style" />  Input type = "button" class = "button style" />  & lt; / li & gt; Lt; li & gt; Input type = "button" class = "button style" /> 
 
 Input type = "button" class = " Button Style "/> & lt; / Li & gt; & Lt; Li & gt; & Lt; Input type = "button" class = "button style" /> & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Body & gt; & Lt; / Html & gt; The difference between A and INPUT / button is that they do not make paragraphs. If it not only includes phrasing material, I think it is generally preferred.  
  
 Related: First-child and: Last-Child Pseudosalas, you can not use it properly.  
 Trying to do this:  
  li: First-hair input {boundary-top-left-radius: 10px; Border-bottom-left-radius: 10px; } Li: Last-Child Input {boundary-top right-radius: 10px; Border-bottom right-radius: 10px; }