September 17th, 2010, 09:02 AM
-
Vertical multi-level menu not displaying correctly
1. top and bottom images are collapsing, i cant get them to display correctly without filling the html with either breaks or text
2. I cant get the images submenuedivider and submenuemarker to display simultaneously when i hover the links in the list.
3. Right now my soltuion to not display the divider image below the last element in the list is through the code:
<li><a style="background-image: none;" href="x.html">SOmething</a></li>
</ul>
However, this also causes the mrker to not be seen above the list element as well, which isn't exactly what I wanted to happen, so what do I do? I'm stuck
The CSS:
Code:
.leftCol
{
width: 190px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 10px;
float: left;
}
.leftCol body {font-size:100%; color: #FFF;}
.leftCol h1 {font-size:1.1em; font-weight:bold; color: #FFF;}
.leftCol h2 {font-size:1.0em; color: #FFF;}
.leftCol h3 {font-size:1.0em; color: #FFF;}
.leftCol p {font-size:0.875em color: #FFF;}
.submenue
{
width: 188px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
float: left;
background-image: url(images/submenue/submenuefiller.jpg);
background-repeat: repeat-y;
text-indent:25px;
}
.submenue ul {list-style-type: none; margin: auto;}
.submenue ul a {padding-bottom: 10px; background: url(images/Submenue/submenuedivider.png); background-repeat: no-repeat; background-position: bottom; display: block; line-height: 25px; text-decoration: none; font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif; color: #FFF;}
.submenue ul a:hover {background-image: url(images/Submenue/submenuemarker.jpg);}
.submenuetop
{
width: 188px;
hight: 54px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url(images/Submenue/top.jpg);
background-size: 100%;
background-repeat: no-repeat;
margin: 0;
float: left;
}
.submenuebottom
{
width: 188px;
hight: 60px;
background-image: url(images/Submenue/bottom.jpg);
background-position: left top;
background-repeat: no-repeat;
margin-top: 54;
float: left;
}
The HTML:
Code:
<div class="leftCol">
<div class="submenuetop"></br><h1>something</h1></div>
<div class="submenue">
<ul>
<h3>Listing</h3>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a style="background-image: none;" href="3.html">5</a></li>
</br>
<h3>Produkt</h3>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a style="background-image: none;" href="3">something</a></li>
</ul>
</div>
<div class="submenuebottom"></br></br></br></br></div>
</div>
September 17th, 2010, 09:31 AM
-
Hi
Can you post a link to the site in question?
Cheers
"Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue
"so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
- marnixR