No replies
hackia
Offline
newbie
Last seen: 13 years 32 weeks ago
Joined: 2009-02-17
Posts: 1
Points: 0

Hello,

I am trying to make a menu that would take up the full length that available(100%).

I am using Drupal. like this site Yay!

I tried to search up keywords for variable width menus, or fluid, elastic menus.
No luck someone else tried but no one gave him an answer.

The following is the css for my menu:

#primary-linksul{
list-style:;

background: #e4e8eb url(images/menu_bg.gif) repeat-x;
}

#primary-links li{
display:block;
float:left;
background: #e4e8eb url(images/menu_bg.gif) repeat-x;
}

#primary-links li a{
background:#e4e8eb url(images/menu_bg.gif) repeat-x;
border:2px solid #bdc5cd;
margin:0 0px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#2b61a1;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
height: 50px;
width: 162px; /*/ !!!!!!!!!!!!!!! here is where i can change the length of the buttons!!*/
}
#primary-links li a span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
#primary-links ul li {
float: left; /* LTR */
background: none;

border-right: solid 1px #AFAFAF; /* LTR */
line-height: 50px;
list-style: none;
margin-bottom: 1;
padding: 0;
}
#primary-links li a:hover{
background:#e46825 url(images/menu_hover.gif) repeat-x;
border:2px solid #4a88ce;
text-decoration:none;
}

#primary-links ul li a {
display: block;
color: #646464;
padding: 0 1.2em;
}
/* 2nd-level dropdown */
#primary-links ul ul {
display: none;
}
#primary-links ul li:hover ul {
display: block;
width: 10em;
position: absolute;
}
#primary-links ul li:hover a {
background-color: #D2D2D2;
text-decoration: none;
}
#primary-links ul li:hover li a {
white-space: normal;
display: block;
width: 10em;
line-height: 1.3em;
margin: 0 -1px;
padding: .25em 1.2em;
border-left: solid 1px #AFAFAF;
border-right: solid 1px #AFAFAF;
border-bottom: solid 1px #AFAFAF;
background-color: #EDEDED;
font-weight: normal;
color: #323232;
}

If you look up at
#primary-links li a{
you will see my comment where if i change that variable for width it makes them bigger or smaller.
Maybe there some sort of if statement that i can put in there?

Any suggestions>?

Thanks