...

View Full Version : Help Making CSS Drop Down Menus more flexible



wyclef
05-19-2008, 04:37 PM
Can someone take a look at this mess and see if they can help me make these drop down menus more flexible? It's breaking if the main nav link is too long and I can't seem to figure it out. It would be great to have a bit more flexibility built in. if i remove the width in #header #global-nav ul li#--- and then set the width in #header #global-nav ul li ul to zero that seems to get me in the right direction but then the text shifts dramatically on rollover and i can't seem to pinpoint the issue.

technica
05-20-2008, 12:25 PM
A good article thats will help you to understand how to create CSS manus is available at Creating CSS Menus (http://www.technicaltalk.net/index.php/topic,66.0.html)


Hope this helps you to solve your problem.

wyclef
05-21-2008, 03:58 PM
Thanks, but that wasn't really helpful. I'm struggling with the drop down menu aspect also...did you look at my example?

wyclef
05-22-2008, 05:39 PM
i've tried to simplify the code to make it easier to look through.
same images as attached above. if someone could take a look and help me tighten this up i'd really appreciate it. thx.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-family: sans-serif; background: black; }

div#hdr {
width: 100%; height: 110px;
background: #005488;
}
#hdr #nav {
width: 600px; height: 29px;
margin: 30px 0 0 50px; padding: 0;
position: absolute;
}
#hdr #nav ul {
margin: 0; padding: 0;
list-style-type: none;
text-align: left;
}
#hdr #nav ul li {
height: 29px;
margin: 0; padding: 8px 12px 0 12px;
float: left;
}
#hdr #nav ul li a {
font: 12px Arial, sans-serif;
color: #FFF;
}
#hdr #nav ul li ul {
display: none;
}
#hdr #nav ul li#products:hover,
#hdr #nav ul li#services:hover,
#hdr #nav ul li#free:hover {
background: url(global-nav_tabs.jpg) no-repeat top left;
}
#hdr #nav ul li#products:hover a,
#hdr #nav ul li#services:hover a,
#hdr #nav ul li#free:hover a {
color: #000;
font-weight: bold;
}
#hdr #nav ul li#products:hover ul,
#hdr #nav ul li#services:hover ul,
#hdr #nav ul li#free:hover ul {
width: 162px; height: 100px;
margin: 5px 0 0 -12px;
background: url(global-nav-hover_bg.png) repeat-y left;
display: block;
}
#hdr #nav ul li#products:hover ul li,
#hdr #nav ul li#services:hover ul li,
#hdr #nav ul li#free:hover ul li {
width: 148px; height: 18px;
margin: 0 0 0 1px; padding: 5px 0 0 10px;
border-top: 1px solid #c5dcf0;
background: #fff;
}
#hdr #nav ul li#products:hover ul li:hover,
#hdr #nav ul li#services:hover ul li:hover,
#hdr #nav ul li#free:hover ul li:hover {
background: url(global-nav-norm_bg.png) no-repeat left top;
}
#hdr #nav ul li#products:hover ul li a,
#hdr #nav ul li#services:hover ul li a,
#hdr #nav ul li#free:hover ul li a {
font: 10px Arial, sans-serif;
}
#hdr #nav ul li#products:hover ul li.bottom,
#hdr #nav ul li#services:hover ul li.bottom,
#hdr #nav ul li#free:hover ul li.bottom {
width: 162px; height: 43px;
margin: -1px 0 0 0;
background: url(global-nav-hover_bottom.png) no-repeat left;
border: none;
}
</style>

</head>

<body>

<div id="hdr">
<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li id="services"><a href="/services/">About</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="bottom"></li>
</ul>
</li>
<li id="free"><a href="/">The Long Link</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 1</a></li>
<li class="bottom"></li>
</ul>
</li>
<li id="products"><a href="/">Contact</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="bottom"></li>
</ul>
</li>
</ul>
</div>
</div>

</body>
</html>

wyclef
05-22-2008, 07:39 PM
ok, i'm making progress...now i've got this thing working a lot better except am having problems with margins and padding in different browsers.... firefox, safari, opera, ie7... i've posted an example, if someone can take a look and help me make this more consistent across the board i'd really appreciate it. thx.

http://dynodealz.com/test1/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum