Menu Coding Snippet

At first glance, the menu codes for HP can seem a bit overwhelming and unwieldy. It controls the look of your menu and submenu bars and ALL of the menu links (hence the multitude of link element options). Once you figure out how you want your links to look, it’s just a matter of aligning and padding the menu to fit that vision. This will probably be the section that takes you the longest if you are unfamiliar with coding – but don’t worry, as soon as you have that “AHA” moment, it’s a breeze in the future.

#menu {
width: 1000px;
position: absolute;
margin-top: 410px;
margin-left: 128px;}

#menu a {
font-family: Times New Roman;
font-size: 7pt!important;
line-height: 8pt;
letter-spacing: 1px;
background: #e7e9ed;
color: #444400;
font-weight: normal!important;
display: inline-block;
margin-left: 24px!important;
padding: 9px;}

#nav ul {
width: 100%;
margin-left: 0px!important;
margin-top: 40px!important;
background: transparent!important;}

ul#nav li a {
float: left;
text-decoration: none;
padding: 0 18px;
margin: 0px 0 0 0;}

ul#nav .selected a, ul#nav li.selected > a  {
background: #e7e9ed;
padding: 0 18px 10px 18px;
color: #444400;}

ul#nav li.selected > ul li a {
font-size: 10px!important;
background: transparent!important;
line-height: 15px;
color: #444400;
text-decoration: none;
margin-top: 0px;
border: 0px;
padding: 0 18px;}

ul#nav li a:hover {
color: #aa9911;}

ul#nav li.selected > ul li a:hover {
color: #aa9911;
text-decoration: none;
text-shadow: none;}
%d bloggers like this: