CSS menu not rendering properly when wrapping
by Turbocapitalist from LinuxQuestions.org on (#554FV)
I have a menu which renders the way it is supposed to as long as it does not need to wrap. See the two images below. The first one is correct. The second one is how it looks when it is looking wrong.
Is there a way that will get the nice effect as shown in the first picture even when wrapping? Or another way to get a similar visual effect would be fine, too, as long as it is 100% CSS.
This is a problem in portrait mode on narrow screens such as certain mobile devices.
Below is the CSS along with the corresponding XHTML.
Code:<!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>
<title></title>
<style type="text/css" media="screen">
ul.breadcrumb {
list-style: none;
overflow: hidden;
margin: 0 0 0 -1em;
padding: 0 0 0 1em;
}
ul.breadcrumb li {
float: left;
margin-left: 1.5em;
color: #000;
}
ul.breadcrumb li a {
padding: 0 0 0 1em;
position: relative;
}
ul.breadcrumb li a::after {
z-index: 1;
content: "";
width: 0;
height: 0;
top: 50%;
margin: -5ex 0 0 0;
border-top: 5ex solid transparent;
border-bottom: 5ex solid transparent;
position: absolute;
border-left: 2em solid;
left: 100%;
}
ul.breadcrumb li:first-child a {
border-radius: 1em 0 0 1em;
padding: 0 0 0 1em;
}
ul.breadcrumb li:nth-child(1) a { background: #f00; }
ul.breadcrumb li:nth-child(1) a:after { border-left-color: #f00; }
ul.breadcrumb li:nth-child(2) a { background: #ff0; }
ul.breadcrumb li:nth-child(2) a:after { border-left-color: #ff0; }
ul.breadcrumb li:nth-child(3) a { background: #0f0; }
ul.breadcrumb li:nth-child(3) a:after { border-left-color: #0f0; }
</style>
</head>
<body>
<ul class="breadcrumb">
<li><a href="">AAAA AAAA AAAA</a></li>
<li><a href="">BBBB BBBB BBBB</a></li>
<li><a href="">CCCC CCCC CCCC</a></li>
</ul>
<h1>A Test Page</h1>
<p>Some words</p>
</body>
</html>
Attached Thumbnails
Is there a way that will get the nice effect as shown in the first picture even when wrapping? Or another way to get a similar visual effect would be fine, too, as long as it is 100% CSS.
This is a problem in portrait mode on narrow screens such as certain mobile devices.
Below is the CSS along with the corresponding XHTML.
Code:<!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>
<title></title>
<style type="text/css" media="screen">
ul.breadcrumb {
list-style: none;
overflow: hidden;
margin: 0 0 0 -1em;
padding: 0 0 0 1em;
}
ul.breadcrumb li {
float: left;
margin-left: 1.5em;
color: #000;
}
ul.breadcrumb li a {
padding: 0 0 0 1em;
position: relative;
}
ul.breadcrumb li a::after {
z-index: 1;
content: "";
width: 0;
height: 0;
top: 50%;
margin: -5ex 0 0 0;
border-top: 5ex solid transparent;
border-bottom: 5ex solid transparent;
position: absolute;
border-left: 2em solid;
left: 100%;
}
ul.breadcrumb li:first-child a {
border-radius: 1em 0 0 1em;
padding: 0 0 0 1em;
}
ul.breadcrumb li:nth-child(1) a { background: #f00; }
ul.breadcrumb li:nth-child(1) a:after { border-left-color: #f00; }
ul.breadcrumb li:nth-child(2) a { background: #ff0; }
ul.breadcrumb li:nth-child(2) a:after { border-left-color: #ff0; }
ul.breadcrumb li:nth-child(3) a { background: #0f0; }
ul.breadcrumb li:nth-child(3) a:after { border-left-color: #0f0; }
</style>
</head>
<body>
<ul class="breadcrumb">
<li><a href="">AAAA AAAA AAAA</a></li>
<li><a href="">BBBB BBBB BBBB</a></li>
<li><a href="">CCCC CCCC CCCC</a></li>
</ul>
<h1>A Test Page</h1>
<p>Some words</p>
</body>
</html>
Attached Thumbnails