...

View Full Version : CSS vertical dropdown menu



47x
08-25-2010, 10:09 AM
Hi, so I have a problem, it's not extremely important that I fix this little problem of mine, but it would feel better and maybe look a bit better too. I have a vertical CSS dropdown menu and I would like to get the undermenues to stay put, so when you click on "Uthyrning" it'll stay open until you click on it again to close.
I haven't done any validation to the code so please have that in mind when you look on the code. The site isn't yet done which I guess you'll see.


@charset "utf-8";
/* CSS Document */
/*FÄRGSCHEMA*/
/*
#11110a - mörkbrun - bakgrundsfärg
#297ae6 - ljust blå - bakgrundsfärg meny+colorbox + listor
#ffffff - vit - menytextfärg + wrapper bg
#4e4f44 - beigebrun - footer text
#1a275b - mörktblå - rubrikfärg
*/

* {
padding:0;
margin:0;
border:0;
}
/*body*/

body {
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
background:#11110a;
word-wrap:break-word;
}
/*container*/
#container {
margin-left: auto;
margin-right: auto;
position:relative;
text-align: left;
width:1000px;
}
/*top*/
#top {
height:40px;
background-color:#11110a;
position: relative;
background-repeat:repeat-x;
}
#top #colorbox {
background-image:url(bilder/blue.png);
background-repeat:repeat-y;
height:40px;
background-color:#297ae6;
width:260px;
}
#top #meny {
height:40px;
background-color:#11110a;
width:300px;
position:relative;
margin-right:-6%;
clear:both;
float:right;
}
#top #meny li{
font-size:12px;
text-decoration: none;
display:inline;
padding:0px 0px 0px 0px;
}
#top #meny li a {
height:21px;
width:5em;
color:#ffffff;
float:left;
text-decoration: none;
text-transform: none;
text-align: center;
padding-top:10px;
padding-bottom:0px;
}
#top #meny ul{
list-style-type:none;
float:left;
}
#top #meny li a:hover{
color: #297ae6;
background-repeat: no-repeat;
background-position: center bottom;
}

/*header*/
#header {
height:130px;
background-color:#11110a;
}
#header #title {
height:130px;
width:360px;
position:relative;
margin-left:0%;
float:left;
}
#header p {
color:#ffffff;
font-size:12px;
}
#header #bild {
height:127px;
width:387px;
float:right;
position:absolute;
left: 490px;
top: 43px;
}
#bild2 {
height:118px;
width:136px;
float:right;
position:absolute;
left: 799px;
top: 170px;
}

/*wrapper*/

#wrapper {
overflow: hidden;
background:#ffffff;
background-image:url(bilder/vit.png);
background-repeat: repeat-x;
width:100%;
}
#wrapper2 {
background-image:url(bilder/blue.png);
background-repeat:repeat-y;
width:100%; ;
}

#outer1 {
float:left;
width:240px;
padding:10px;
background:#297ae6;
background-color:#069;
background-image:url(bilder/blue.png);
padding-top:1.5em;
background-repeat:repeat-y;
overflow: hidden;
min-height:600px;
}
#outer2 {
background:#ffffff;
margin-right:20%;
margin-left:270px;
padding:1.5em;
background-image:url(bilder/vit.png);
background-repeat: repeat-x;
min-height:600px;
}
#outer3 {
float:right;
width:20%;
background:#ffffff;
background-image:url(bilder/vit.png);
background-repeat: repeat-x;
min-height:600px;
}

#outer1, #outer2, #outer3 {
padding-bottom:320px;
margin-bottom:-320px;
}

/*Footer*/
#footer {
clear: auto;
background:#11110a;
position: relative;
}
#footer p {
color:#4e4f44;
font-size:12px;
}
#footer a {
color:#4e4f44;
text-decoration:none;
}
#footer a:hover {
text-decoration: underline;
}
#footer #colorbox2 {
background-image:url(bilder/blue.png);
background-repeat:repeat-y;
background-color:#297ae6;
height:40px;
padding:0;
margin:0;
width:260px;
float:left;
left: 0px; top: 9px;
}
/*Footer text*/
#footerbox {
width:260px;
}
#righttext {
float:right;
padding-top:0.4em;
}
#lefttext {
float:left;
padding-top:0.4em;
}

/*TEXT*/
.copyw {
tect-align:center;
float:right;
}
.content {
padding:1.25em;
text-align:left;
}
.footertext {
padding-top:1.25em;
text-align:left;
}
.right {
text-align:right;
}
.left {
text-align:left;
}
h1 {
font-size:14px;
margin:0;
padding:;
color:#1a275b;
}
h3 {
font-size:36px;
margin:0;
color:#1a275b;
}
p {
font-size:14px;
line-height:1.5em;
margin:0;
padding:5px 0;
color:#000000;
}
p.liten {
font-size:12px;
line-height:1.2em;
margin:0;
padding:0;
color:#000000;
}
.images_p {
font-size:12px;
color:#000000;
padding:0;
margin:0;
line-height:1em;
}

/*Meny*/
ul {
font-family:Arial, Helvetica, sans-serif;
}
ul.menu1, ul ul {
padding:0;
margin:0;
border:0;
list-style-type:none;
height:40em;
overflow:hidden;
width:15em;
text-align:left;
border:0px solid #606;
font-family:Arial, Helvetica, sans-serif;
background-image:none;
}
ul.menu1 {
margin:0 auto;
padding-top:1.5em;
}
ul.menu1 li.drop {
border-top: 0px solid #000;
}

#uthyrning {
border-top: 1px solid #297ae6;
width:190px;
margin-left: auto;
margin-right: auto;
}
#kontakt {
border-top: 1px solid #297ae6;
border-bottom:1px solid #297ae6;
width:190px;
margin-left: auto;
margin-right: auto;
}
#hyresvillkor {
border-top: 1px solid #297ae6;
width:190px;
margin-left: auto;
margin-right: auto;
}
#pris {
border-top: 1px solid #297ae6;
width:190px;
margin-left: auto;
margin-right: auto;
}
#line {
border-top: 1px solid #297ae6;
width:190px;
margin-left: auto;
margin-right: auto;
}

ul.menu1 table {
border-collapse:collapse;
padding:10px;
margin:0;
font-size:1em;
}
ul.menu1 ul {
margin-left:1em;
}
ul.menu1 li {
text-indent:1em;
}
ul.menu1 li.drop {
margin-bottom:-4px;
font-size:25px;
font-weight: bold;
border-bottom:1px #009;
}
ul.menu1 li a, ul.menu1 li a:visited {
display:block;
width:14em;
height:2em;
line-height:1.9em;
text-decoration:none;
color:#ffffff;
}
ul.menu1 li a.last,
ul.menu1 li a.last:visited {
display:block;
width:14em;
height:14em;
line-height:2em;
}
ul.menu1 li ul {
display:none;
}
ul.menu1 li:hover a,
ul.menu1 li a:hover {
border:;
color:#ffffff;
font-weight:bold;
}
ul.menu1 li:hover ul,
ul.menu1 li a:hover ul {
display: block;
height:7em;
width:13em;
margin-top:-1px;
}
ul.menu1 li:hover ul li a,
ul.menu1 li a:hover ul li a {
height:2em;
color:#ffffff;
font-weight:normal;
}
ul.menu1 li:hover ul li:hover a,
ul.menu1 li a:hover ul li a:hover {
background-color:#297ae6;
color:#ffffff;
}
ul.menu1 li.undermeny {
font-size:12px;
}

ul li.maskiner_li {
color:#297ae6;
list-style-type:none;
font-size:14px;
font-weight:bold;
}
ul li.maskiner_li a,
ul li.maskiner_li a:visited,
ul li.maskiner_li a:hover {
text-decoration:none;
color:#297ae6;
}


/*bILDER*/
.img {
position:absolute;
left: 805px;
top: 265px;
width: 0px;
height: 428px;
}
.maskiner {
border:3px #0066CC;
padding-right:15px;
}
.menyend {
position: absolute;
left: 0px;
top: 830px;
overflow:hidden;
}
/*TABLE*/
table.stats {
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 11px;
color: #fff;
width: 500px;
background-color: #4e4f44;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;
}

table.stats td {
background-color: #cccccc;
color: #000;
padding: 4px;
text-align: left;
border: 1px #fff solid;}

table.stats td.top {
background-color: #1a275b;
color: #fff;
padding: 4px;
text-align: left;
border-bottom: 2px #fff solid;
font-size: 12px;
font-weight: bold;}

/*LIGHTBOX*/
.product {
width:320px;
height:120px;
border:0px solid #CCCCCC;
margin:0 ;
padding:10px;
background-color:#ffffff;
}
.litentext {
font:bold 11px/14px arial,sans-serif;
color:#000;
}
.productInfo {
width:200px;
float:right;
}
.productMfr {
font:bold 16px/18px arial, sans-serif;
color:#1a275b;
padding:0;
margin:0;
}
.productType {
font:bold 14px/18px arial, sans-serif;
color:#000;
padding:0;
margin:0;
}
.features {
padding:10px 0;
margin:0;
list-style:none;
}
.features li {
font:normal 12px/16px arial, sans-serif;
color:#555;
}
.price {
font:bold 14px/18px arial, sans-serif;
color:#00c;
padding:0 0 10px 0;
margin:0;
}



And here's the menu code:

<ul class="menu1">
<li class="drop" id="startsida"><a href="index.html" title="Startsida">Startsida</a>
<table>
<tr>
<td></td>
</tr>
</table>
</li>
<li class="drop" id="uthyrning"><a href="uthyrning.html" title="Uthyrning">Uthyrning</a>
<table>
<tr>
<td><ul>
<li class="undermeny"><a href="slap.html">Slaumlpvagnar</a></li>
<li class="undermeny"><a href="verktyg.html">Verktyg</a></li>
<li class="undermeny"><a href="maskiner2.html">Maskiner</a></li>
<li class="undermeny"><a href="vagnar.html">Rast/Manskapsvagnar</a></li>
<li class="undermeny"><a href="gravmaskiner.html">Gr&auml;vmaskiner</a></li>
<li class="undermeny"><a href="komp.html">Kompressorer</a></li>
<li class="undermeny"><a href="ovrigt.html">Övrigt</a></li>
</ul></td>
</tr>
</table>
</li>
<li class="drop" id="hyresvillkor"><a href="hyra.html" title="Hyresvillkor">Hyresvillkor</a>
<table>
<tr>
<td>
</tr>
</table>
</li>
<li class="drop" id="pris"><a href="pris.html" title="Prislista">Prislista</a></li>
<li class="drop" id=""></li>
<li class="drop" id="kontakt"><a href="kontakt.html" title="Kontakta Oss">Kontakt</a>
<table>
<tr>
<td></td>
</tr>
</table>
</li>
<li class="drop" id=""></li>
</ul>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum