PDA

Click to See Complete Forum and Search --> : Drop-Down and Rounded Corners

aeropeek
03-03-2009, 04:58 PM
Hello all,

I am new to CSS and I'm trying to create a drop down menu (one level currently) with rounded corners without images.
Right now it's almost work in FF and Google Chrome except that the sub menu background width does not match text (width is fixed and not variable). In IE 7 there is a gap between menu items and width is the same as FF/GC.

Please take a look at the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drop Down Menu</title>
<style type="text/css">
/* round corners */
.round {
background: transparent;
}
.content {
border-left:1px solid #9c9ea1;
border-right:1px solid #9c9ea1;
background:#eefa98;
padding: 0 1em;
}
.top, .bot {
font-size: 1px;
background: transparent;
display: block;
margin-top:0;
overflow: hidden;
}
.b1, .b2, .b3, .b4 {
display: block;
overflow: hidden;
background: transparent;
}
.b1, .b2, .b3 {
height: 1px;
}
.b2, .b3, .b4 {
background: #eefa98;
border-left: 1px solid #9c9ea1;
border-right: 1px solid #9c9ea1;
}
.b1 {
margin:0 5px;
background: #9c9ea1;
}
.b2 {
margin:0 3px;
border-width:0 2px;
}
.b3 {
margin:0 2px;
}
.b4 {
height:2px;
margin:0 1px;
}
/* Navigator */
#nav {
margin: 0;
list-style:none;
position: relative;
width: 18em;
}
#nav li {
float: left;
display: block;
position: relative;
text-decoration:none;
padding: 0;
margin: 0;
text-align:center;
width: 6em;
}
#nav li, #nav a {
text-decoration: none;
color: #af8d12;
}
#nav a:visited {
text-decoration: none;
}
#nav li:hover, #nav a:hover {
color: #5ea6ca;
}
#nav li ul.sub {
visibility: hidden;
list-style: none;
padding: 0;
text-align:left;
white-space:nowrap;
line-height: 22px;
}
#nav li:hover ul {
position: relative;
height:auto;
padding-top: 10px;
visibility: visible;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="#nogo">Products</a>
<div class="round">
<ul class="sub">
<li>
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="content">Product</div>
</li>
<li>
<div class="content">Longer Item 1234567890</div>
<b class="bot"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b> </li>
</ul>
</div>
</li>
<li><a href="#nogo">Services</a>
<div class="round">
<ul class="sub">
<li>
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="content">Service 1</div>
</li>
<li>
<div class="content">Service 2</div>
<b class="bot"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b> </li>
</ul>
</div>
</li>
</ul>
</body>
</html>


Thanks in advance,
Matan
Fang
03-04-2009, 01:36 AM
.content {white-space: normal;}
#nav li ul.sub li {float:none;}
aeropeek
03-06-2009, 09:42 AM
Thank you for your reply Fang,
I have updated the CSS file as you suggested but still it doesn't seem to work out.

File was uploaded (http://aeropeek.googlepages.com/menu.html)in order to see it live.
Fang
03-06-2009, 11:30 AM
Looks OK in all browsers. If the text string is too long it will be partially hidden.
aeropeek
03-06-2009, 01:58 PM
In a second reading I see that I wasn't explained myself pretty well.
What I want to do is that the sub menu will expand it's width according to the context width, aka - variable width drop down menu.

Hope it's clearer now.

Thanks!
Fang
03-06-2009, 02:28 PM
The rounded corners rely on a block of fixed width.
You may be able to use some combinations of %, but em widths is a more logical approach.
aeropeek
03-06-2009, 04:37 PM
So here is a better example. I have managed to get the following thing to work in FF and Chrome but not in IE. If I combine this in the navigator it suppose to work fine.
How do I get it to work in IE? Is there any IE CSS Bugs collection or something? :D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>corners</title>
<style>
.b1, .b2, .b3, .b4 {
display: block;
overflow: hidden;
background: transparent;
}
.b1, .b2, .b3 {
height: 1px;
}
.b2, .b3, .b4 {
background: #eefa98;
border-left: 1px solid #9c9ea1;
border-right: 1px solid #9c9ea1;
}
.b1 {
margin:0 5px;
background: #9c9ea1;
}
.b2 {
margin:0 3px;
border-width:0 2px;
}
.b3 {
margin:0 2px;
}
.b4 {
height:2px;
margin:0 1px;
}
div.container {
float:left;
margin: 0;
padding: 0;
}
div.container ul {
list-style:none;
margin:0;
padding:0;
}
div.container ul li {
border-left: 1px solid #9c9ea1;
border-right: 1px solid #9c9ea1;
background: #eefa98;
padding: 0 1em;
}
</style>
</head>
<body>
<div class="container">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<ul>
<li>item 1. very long name, corners are fine</li>
<li>short</li>
</ul>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> </div>
</body>
</html>
aeropeek
03-07-2009, 09:46 AM
Hey,
So I managed to get it working exactly is I want in FF and Google Chrome, but not in IE. Here is an example (http://aeropeek.googlepages.com/testing.html).
Please help me understand how can I make it to work in IE!:)

The code for the linked example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>corners</title>
<style>
/* ----------------------------
round corners
------------------------------*/

.b1, .b2, .b3, .b4 {
display: block;
overflow: hidden;
background: transparent;
}
.b1, .b2, .b3 {
height: 1px;
}
.b2, .b3, .b4 {
background: #eefa98;
border-left: 1px solid #9c9ea1;
border-right: 1px solid #9c9ea1;
}
.b1 {
margin:0 5px;
background: #9c9ea1;
}
.b2 {
margin:0 3px;
border-width:0 2px;
}
.b3 {
margin:0 2px;
}
.b4 {
height:2px;
margin:0 1px;
}
/* ----------------------------
Navigator
------------------------------*/
#nav {
position: relative;
}
#nav a {
color: #C60;
text-decoration: none;
}
#nav a:hover {
color:#930;
}
#nav li {
float: left;
list-style: none;
width: 6em;
text-align: center;
}
#nav li div {
float: left;
margin: 0;
padding: 0;
visibility: hidden;
}
#nav li:hover div {
visibility: visible;
}
#nav li div ul {
list-style:none;
margin:0;
padding:0;
}
#nav li div ul li {
border-left: 1px solid #9c9ea1;
border-right: 1px solid #9c9ea1;
background: #eefa98;
padding: 0 1em;
white-space: nowrap;
text-align: left;
width: auto;
float: none;
line-height: 22px;
}

</style>
</head>
<body>
<ul id="nav">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Products</a>
<div> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<ul>
<li><a href="#nogo">Very long name</a></li>
<li><a href="#nogo">Short one</a></li>
<li><a href="#nogo">Product with even longer name</a></li>
</ul>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> </div>
</li>
<li><a href="#nogo">Services</a>
<div> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<ul>
<li><a href="#nogo">bla bla bla</a></li>
<li><a href="#nogo">bla bla bla bla bla</a></li>
</ul>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> </div>
</li>
</ul>
</body>
</html>



Thanks,
Matan