How to create horizontal menu using CSS

[Efigenio]

Hi all,

I am a web developer and build a adds company website. My site have different menu and making the menu has been mentioned in CSS method, but many time it is not clear how to achieve, and the realization of principle, I need some help from you for detailed tutorial. Please help. Thanks in advance.

[Praetor]

The first step is the establishment of an unordered list.We first establish an unordered list to build the menu structure. The Code is:

<ul>
<li> <a href="1"> Home </ a> </ li>
<li> <a href="2"> Products </ a> </ li>
<li> <a href="3"> Services </ a> </ li>
<li> <a href="4"> technical support </ a> </ li>
<li> <a href="5"> purchase </ a> </ li>
<li> <a href="6"> Contact us </ a> </ li>
</ ul>

Check the code and reply.


　　

[Katty]

You can put hidden li default style, Because it does not look very good looking, the menu usually do not need the default dot li, we have to define a style UL to eliminate these dots. Of course, in order to better control the entire menu, we placed a div inside the menu. Page code becomes:<div

class="test"> <ul>
<li> <a href="1"> Home </ a> </ li>
<li> <a href="2"> Products </ a> </ li>
<li> <a href="3"> Services </ a> </ li>
<li> <a href="4"> technical support </ a> </ li>
<li> <a href="5"> purchase </ a> </ li>
<li> <a href="6"> Contact us </ a> </ li>
</ ul> </ div>

CSS is defined as:. test ul (list-style: none. Note that ". Test ul" to express my style would be to define the role of the test layer inside the ul tag.

[kelfro]

If you need to the key to the floating. Here is the menu into a horizontal key, and we add to the li element of a "float: left;" attribute, so that each li a li floating in front of the left side.CSS is defined as: . test li (float: left; ). We have to adjust the width of the li. Add in the CSS defined width: 100px specify the width of a li is 100px, of course, you may need to adjust according to your values:. Test li (float: left; width: 100px; ). Check and reply.

[Modifier]

we set the link through the CSS styles are defined: link,: visited,: hover state. test a: link (color: # 666; background: # CCC; text-decoration: none; )

. test a: visited (color: # 666; text-decoration: underline;)

. test a: hover (color: # FFF; font-weight: bold; text-decoration: underline; background: # F00;)

A friend asked why the background color of the menu links do not fill the entire width of li Well, the solution is very simple to add the definition of a style of display: block, block-level element so that links to display. We also fine-tune the following details:
# Use text-align: center will center the menu text;
# With height: 30px add to the background of the height;
# With the margin-left: 3px so that each menu, the distance between the air 3px;
# With the line-height: 30px; the definition of the row height, so that the link text vertically centered;
# CSS definition like this:. test a (display: block; text-align: center; height: 30px; ) . test li (float: left; width: 100px; background: # CCC; margin-left: 3px; line-height: 30px; )
All the best.

[absolute55]

We will normally at the front of each link a small icon, so that navigation clearer. CSS is used the definition of li background image to achieve this:. test a: link (color: # 666; background: url (arrow_off.gif) # CCC no-repeat 5px 12px; text-decoration: none

. test a: hover (color: # FFF; font-weight: bold; text-decoration: none; background: url (arrow_on.gif) # F00 no-repeat 5px 12px;)

"background: url (arrow_off.gif) # CCC no-repeat 5px 12px;" sentence CSS code is an acronym that background image is arrow_off.gif; the background color is # CCC; background image not repeat the "no-repeat "background image position from the left 5px, top margin 12px; By default, the icon for the arrow.off.gif, when the mouse move to the link. Best of luck.

[swapantech1]

Dear all,

With due respect, these are paramount of importance.

roy