How CSS + HTML to write a similar Taobao simple navigation bar?

Today we do a similar Taobao navigation station, I am Lynx supermarket, gather cost-effective, Lynx today as an example of
development tools: VsCode

HTML part of the code

First, let's haircut programming ideas, suppose we have to do three navigation bar, we're going on inside the font size, font color, background color, etc. attributes consistent settings, so we have to set up a parent container ul, and inside the three sub-elements li, and each sub-element, there are a set of a link element. Html particular part of the code as shown below:

css part of the code

First, initialization expensive.

*{    margin: 0;   
      padding:0;  
 }

To run about, to see what effect:

wow, is not feeling ugly, do not worry, the next step will be better.

Taobao above the navigation bar are sideways, because ul and li are massive elements , so we put up these cross, where we add a float float: left, within the system will automatically put all the elements are transformed into inline- block (row-level block element) , a case can be arranged laterally. (Wherein float: right and position: absolute internal systems may occur conversion)

Horizontal arrangement completed, the link will have a tag underline, we do not want is underlined, text-decoration: none can be removed underlined.

Setting the width and height of the container, and is provided from outside the box therebetween so that the distance margin between the three containers.

Then set the font color, Amoy Rubine: # 40 . Font bold font-weight: bold;

Finally, we must set the mouse to move the event to link a :: hover (in fact, write a: hover also possible, on the back that will automatically fill the colon) We hope that when the mouse on the link on the container background change "Taobao color" font become white.

css code is as follows:

   *{    
     margin: 0;    
     padding:0;  
 }
   .nav{   
 list-style: none;
 }
   a{    
     text-decoration: none;
}
   .nav .list-item{    
    float:left;
    margin:0 10px;    
    height:30px;    
    line-height: 30px;    
    /*border:2px solid violet;*/
    }
    .nav .list-item a{    
    padding:0 5px;    
    color:#f40;    
    font-weight: bold;   
    height:30px;    
    display:inline-block;   
     border-radius:15px;}
     .nav .list-item a:hover{    
     background-color: #f40;    
     color:#fff;
     }

Run renderings:

Do not care above that line, it is the browser frame.