...

View Full Version : CSS - Image Dropdown Menu, Help wanted.



cssnewbe
08-14-2011, 04:14 PM
Hello there, i have another problem (yes i have posted before! xD) Anyways, i just had the nicest tutorial about a picture menu. I got that under controll now and it looks pretty awesome and i was thinking like WOYOOO! lets have a dropdown under those pictures... im sure people had this problem before. as soon as i start adding some kids to my ul-li the image gets distorted (with picture i mean my picture menu) so My question is how do i add a dropdown to the folowing code/menu.

The HTML:


<div id="menubalance">

<ul id="awesome-menu">

<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="media">Media</a></li>
<li><a href="#" class="opptreden">Opptreden</a></li>
<li><a href="#" class="informasjon">Informasjon</a></li>
<li><a href="#" class="about">About</a></li>

</div>


The CSS:


/***************************NavMenu*********************************/

* { margin: 0; padding: 0; } /* Reset stuff */

#menubalance {
width: 686px;
height: 55px;
margin: 0px auto -1px auto;
}

ul#awesome-menu {
width: 684px;
height: 55px;
margin: 0px auto -1px 10px;
}

ul#awesome-menu li { display: inline; }

ul#awesome-menu li a {
display: block; float: left; height: 45px;
background-image: url(themenu.png); text-indent: -9999px;
}

ul#awesome-menu li a.home {
width: 100px; background-position: 0 0;
}

ul#awesome-menu li a.media {
width: 108px; background-position: -96px 0;
}

ul#awesome-menu li a.opptreden {
width: 160px; background-position: -204px 0;
}

ul#awesome-menu li a.informasjon {
width: 180px; background-position: -370px 0;
}

ul#awesome-menu li a.about {
width: 117px; background-position: -550px 0;
}


ul#awesome-menu li a.home:hover, ul#awesome-menu li a.home:focus {
background-position: 0 -48px;
}

ul#awesome-menu li a.media:hover, ul#awesome-menu li a.media:focus {
background-position: -96px -48px;
}

ul#awesome-menu li a.opptreden:hover, ul#awesome-menu li a.opptreden:focus {
background-position: -204px -48px;
}

ul#awesome-menu li a.informasjon:hover, ul#awesome-menu li a.informasjon:focus {
background-position: -370px -48px;
}

ul#awesome-menu li a.about:hover, ul#awesome-menu li a.about:focus {
background-position: -550px -48px;
}


a { outline: none; }
/***************************End NavMenu*********************************/


Thank you for reading, i have searched this forum for the problem first but couldnt seem to find it. Hope you can help

Me

vikram1vicky
08-14-2011, 04:24 PM
add child lists next to <a> tag and write CSS accordingly/ Following is sample




<div id="menubalance">

<ul id="awesome-menu">

<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="media">Media</a><ul><li>....</li></ul></li>
<li><a href="#" class="opptreden">Opptreden</a></li>
<li><a href="#" class="informasjon">Informasjon</a></li>
<li><a href="#" class="about">About</a></li>

</div>

cssnewbe
08-14-2011, 05:08 PM
I think you mean this, this is what im used to:



<div>
<ul id="awesome-menu">

<li><a href="#" class="home">Home</a>
<ul>
<li><a href="#" class="introduction">Home</a></li>
</ul>
</li>
</ul>
<div>

But like i said if i do it like that, the img gets messed up again...

pretty new to the game sorry xD

riptide
08-15-2011, 03:31 AM
Try fiddling around with background-repeat:repeat-y. Is your image tiling?
what type of distortion are you having?

vikram1vicky
08-15-2011, 09:44 AM
share the page image with problem and other image of how u want ur page ll look

cssnewbe
08-16-2011, 01:25 PM
I would like to thank you for all the help even in my previous posts i just made a dropdown without the image, this is how it turned out so far i havent made a website in over almost 10 years so go easy on me :) Thanks again

www.crossfire.no



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum