Here's the link where I'm trying to tweak some things on a page template set up by a friend of mine:
http://jesusfreak.com/page.php
The thing I'm trying to figure out is how to change the spacing on menu.css, as follows:
#top_nav {
width: 100%;
background: #000;
height: 30px;
padding: 0px;
margin: 0px auto;
border-bottom: 2px solid #555;
}
#top_nav ul{
list-style-type:none;
padding:0px;
margin:0px auto;
height: 30px;
z-index: 1000;
text-align: center;
/*
position: absolute;
left: 590px;
*/
}
/* make the top level links horizontal and position relative so that we can position the sub level */
#top_nav li{
float:left;
position:relative;
z-index:99;
background: #373737;
width: 9.9%;
border-right: 1px solid #494949;
}
/* use the table to position the dropdown list */
#top_nav table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:0px;
top:30px;
}
2007-06-10
21:54:33
·
1 answers
·
asked by
Pastor Chad from JesusFreak.com
6
in
Computers & Internet
➔ Programming & Design
/* style all the links */
#top_nav ul a, #top_nav ul a:visited {
display:block;
height:relative;
line-height: 28px;
padding:0px 12px 0px 12px;
overflow: visible;
color:#FFFC00;
background: transparent;
text-decoration:none;
margin:0px;
text-align:center;
border: 1px solid #494949;
}
/* style the links hover */
#top_nav ul a:hover{
color:#fff;
background:#000;
}
/* hide the sub level links */
#top_nav ul ul {
visibility:hidden;
position:absolute;
height:0;
width: 100%;
left: 0px;
}
#top_nav ul ul li {
width:100%;
font-size: 83%;
padding: 0px;
margin: 0px;
left: -1px;
}
#top_nav ul ul a {
padding: 0px 5px 0px 5px;
margin: 0px;
color: #f2f2f2;
}
/* make the sub level visible on hover list or link */
#top_nav ul li:hover ul,
#top_nav ul a:hover ul{
visibility:visible;
}
2007-06-10
21:54:48 ·
update #1
If I change line-height: 28px; to line-height: 12px; it skews the height of the drop-down box and leaves a blank space at the bottom of the main box yet the height of the drop-down boxes themselves stay the same.
2007-06-10
22:28:15 ·
update #2