How to Create a Horizontal Menu

tutor, this time we try to make the actual navigation menu borrow one from congenital standard widget blogger. With a little touch of CSS, which was originally Linklist widget used as a vertical blogroll modifications will we be in a horizontal navigation menu. Yes I have, from the om Cuap2 not immediately obvious to the way it aja ya:)


First entry Edit HTML page, then copi-paste all the CSS code below and Put the code above ]]>

/ *-- (Menu / Nav) --* /
# nav (background: # 222; height: 32px; padding: 4px 0 0; margin-bottom: 0px)
# nav-left (float: left; display: inline; width: 600px)
# nav-right (float: right; display: inline; width: 100px)
# nav ul (position: relative; overflow: hidden; padding-left: 0px; margin: 0; font: 1.0em Arial, Helvetica, sans-serif)
# nav ul li (float: left; list-style: none)
# nav ul li a, # nav ul li a: visited (display: block; color: # fff; margin: 0 5px; padding: 5px 4px; text-decoration: none)
# nav ul li a: hover (color: # 800000; background-color: # fff; margin: 0 5px; padding: 5px 4px)
# nav ul li a.current, # nav ul li a.current: visited, # nav ul li a.current: hover (margin: 0 8px; background-color: # fff; color: # fff; padding: 5px 7px)

/ *-- (Search) --* /
# search (background: # f9f9f9 url (http://oom.blog.googlepages.com/search.gif) 6px 2px no-repeat;-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px; border: 1px solid # b3b3b3; float: right; height: 25px; margin: 0 0px 0 0; width: 180px)
* Html # search (margin-right: 8px)
# search input (font-family: Verdana, Arial, Helvetica, sans-serif; background: transparent; border: 0; color: # 555; float: left; font-size: 12px; margin: 5px 0 0; padding: 0px 2px 2px 27px; width: 140px)

Still on the Edit HTML and look for the code

this code is usually located under the html tag then copi-paste the code below, and place the following code green color code above.