...

View Full Version : square bullets in navigation



lmorales
07-30-2012, 09:33 PM
How would you make a navigation with an unordered list display so that after each list item, a square, colored bullet would appear ( except for at the last item of course) I know theres a way to make it square, but its not accepted cross browser from what I read.

My css is currently as follows


@font-face {
font-family: NovaSOLIDSOLID;
src: url("novasolid_trial___-webfont.eot");
src: url("novasolid_trial___-webfont.eot?#iefix") format("embedded-opentype"),
url("novasolid_trial___-webfont.woff") format("woff"),
url("novasolid_trial___-webfont.ttf") format("truetype"),
url("novasolid_trial___-webfont.svg#NovaSOLIDSOLID") format("svg");
font-weight: normal;
font-style: normal;

}

#menudiv {
width: 875px;
float: left;
clear: left;
height: 20px;
margin-top: 40px;
}

#leftmenu {
width: 875px;
height: 20px;
float: left;
padding-left:20px;
}

#rightmenu {
width: 0px;
float: right;
color: #FFF;
}

#rightmenu .mainnav {
float: right;
}

#rightmenu span {
float:left; font-size: 30px;
}

.mainnav {
margin: 0;
padding: 0;
list-style: none;
}

.mainnav * {
margin: 0;
padding: 0;
list-style: none;
}


.mainnav ul {
position: absolute;
top: -999em;
display: none;
}

#rightmenu .mainnav li {
margin-right: 0;
margin-left: 20px;
}

.mainnav li {
float: left;
position: relative;
z-index: 999;
height: 20px;
line-height: 20px;
margin-right: 20px;
}

.mainnav a {
display: block;
font-size: 30px;
font-weight: normal;
font-family: NovaSOLIDSOLID;
margin: 0;
padding: 0;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
letter-spacing:.09em;
}

.mainnav li.current-menu-item a,
.mainnav li#current a,
.mainnav li.current-cat a,
.mainnav li.current_page_item a {
text-decoration: none;
color: #CCC;
}

.mainnav li a:hover {
text-decoration: none;
color: #999;
}

.mainnav ul li{
width: 140px;
}

.mainnav li:hover ul,
ul.mainnav li.sfHover ul {
left: -10px;
top: 20px;
padding-top: 7px;
width: 142px;
background: url(images/ulbg.png) no-repeat bottom;
padding-bottom: 15px;
}

.mainnav li:hover li ul,
.mainnav li.sfHover li ul {
top: -999em;
}

.mainnav li li:hover ul,
ul.mainnav li li.sfHover ul {
left: 140px;
top: -7px;
}

.mainnav li:hover ul,
.mainnav li li:hover ul {
top: -999em;
}

.mainnav li li {
display: block;
padding: 0px;
height: auto !important;
border: none;
background: #121212 url(images/linebg.png) repeat-x bottom;
margin: 0;
padding-top: 8px;
padding-bottom: 10px;
border-left: solid 1px #1f1f1f;
border-right: solid 1px #1f1f1f;
}

.mainnav li li#current a,
.mainnav li li.current-cat a,
.mainnav li li.current_page_item a,
.mainnav li li:hover a {
}

.mainnav li li a:link,
.mainnav li li a:visited {
display: block;
height: auto !important;
padding-top: 8px;
padding-bottom: 8px;
text-transform: uppercase;
color: #CCC;
font-weight: normal;
font-family: NovaSOLIDSOLID; font-size: 30px;
border: none;
margin: 0;
padding: 0;
margin-left: 10px;
}

.mainnav li li:hover {
background: #CCC !important;
}

#rightmenu .mainnav li li {
margin:0;
}

Apostropartheid
07-30-2012, 10:06 PM
You will have to use list-style-image, assuming list-style-type: square is not sufficient.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum