Ul li sets the horizontal bar and removes the dot before li, ulli

Ul li sets the horizontal bar and removes the dot before li, ulli

Effect preview: http://hovertree.com/texiao/css/

How to Use CSS to make horizontal menus for ul li horizontal arrangement and dot Processing

We first create an unordered list to create a menu structure. The code is:

<Ul> <li> <a href = "http://hovertree.com/"> Home </a> </li> <a href = "http://hovertree.com/map/"> website Map </> </li> <a href = "http://hovertree.com/menu/hovertreecms/"> HoverTreeCMS </a> </li> <a href = "http://hovertree.com/menu/texiao/"> special effects </> </li> <a href = "http://cms.hovertree.com/"> CMS Online Preview </a> </li> <a href = "http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm"> jQuery image list show text with the Mouse mask </a> </li> <a href = "http://hovertree.com/hvtart/bjae/rtmloulp.htm"> original </a> </li> </ul>

Effect:

• Homepage
• Website Map
• HoverTreeCMS
• Special effects
• CMS Online Preview
• JQuery image list show text with a mouse mask
• Original

Step 2: Hide the default li style and remove the dot
Because it does not look very nice, the menu usually does not need the default dot li, we define a style for UL to eliminate these dots.

Of course, to better control the entire menu, we put the menu in a div. The page code is changed:

<Style>. hvtulli22 ul {list-style: none ;} </style> <div class = "hvtulli22"> <ul> <li> <a href = "http://hovertree.com/"> Home </a> </li> <a href = "http://hovertree.com/map/"> website Map </a> </li> <a href = "http://hovertree.com/menu/hovertreecms/"> HoverTreeCMS </a> </li> <li> <a href = "http://hovertree.com/menu/texiao/"> special effects </a> </li> <a href = "http://cms.hovertree.com/"> CMS Online Preview </a> </li> <li> <a href = "http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm"> jQuery image list move the mouse over the masked text </a> </li> <a href = "http://hovertree.com/hvtart/bjae/rtmloulp.htm"> original </a> </li> </ul> </div>

CSS is defined:

. Hvtulli22 ul {list-style: none ;}
Note: ". hvtulli22 ul" indicates that the style I want to define will apply to ul labels in the hvtulli layer.

Now the effect is no dot:

Homepage

Website Map

HoverTreeCMS

Special effects

CMS Online Preview

JQuery image list show text with a mouse mask

Original

 

Step 3: Key fluctuations
Here is the key to changing the menu to landscape. we add a "float: left;" attribute to the li element to let each li float on the left of the previous li, margin-left: 10px: The interval between li is 10 pixels.

CSS is defined:

. Hvtulli li {float: left; margin-left: 10px}
Effect: http://hovertree.com/texiao/css/

Check that the menu is changed horizontally. That's easy! The following is the optimization details.

HTML file code:

<! DOCTYPE html> 
Javascript, jquery, css, html5 special effects http://www.cnblogs.com/roucheng/p/texiao.html