#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2009
    Posts
    23
    Rep Power
    0

    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>
  2. #2
  3. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    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

IMN logo majestic logo threadwatch logo seochat tools logo