How to get width of <li> stretched to available space in parent <ul> in IE7?
How to get width of <li>
stretched to available space in parent <ul>
in IE7?
In IE 8 and FF
Drop-down coming like this which is OK
alt text http://shup.com/Shup/376449/11064114012-My-Desktop.png
but in IE 7 it's coming like this
Edit: 5 july
I added live example here see this in IE7
alt text http://shup.com/Shup/376450/11064114133-My-Desktop.png
How to get same result like IE8 and FF in IE 7.
I don't want to give fixed width to <ul>
and <li>
This is CSS
#topnavcontainer {
float: left;
overflow: visible;
width: 80%;
margin-left: 17px }
ul#nav {
position: relative;
z-index: 597;
float: left;
margin-top: 6px; }
ul#nav li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1; }
ul#nav li a:active { color: #fff }
ul#nav li.hover,
ul#nav li:hover {
position: relative;
z-index: 599;
cursor: default; }
ul#nav ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
width: auto;
margin-top: 0px;
white-space: nowrap;
background -moz-opacity: .80;
filter: alpha(opacity=80);
opacity: .80;
background: #fff }
ul#nav li.last ul { left: -47px }
ul#nav li li {
float: none;
font-weight: normal;
padding: 7px 10px;
border: solid #99b2d8;
border-width: 0 1px 0 1px;
background-color: #f6f6f6;
color: #1f5fa9;
background: #fff;
display: block;
width: auto;
padding-bottom: 0; }
ul#nav ul ul {
top: 1px;
left: 99%; }
ul#nav li:hover > ul { visibility: visible;background: transparent }
ul#nav { font-weight: bold; }
ul#nav li {
padding: 5px 10px;
border-style: solid;
border-width: 0px 1px 0px 0;
border-color: #fff;
background-color: #f6f6f6;
color: #fff;
background: transparent url(images/css-bg/navaigation-off-hover-bg.jpg) repeat-x left top }
ul#nav > li.first { background: transparent url(images/css-bg/li-first-bg.jpg) no-repeat left top }
ul#nav li.first.current { background:url(images/css-bg/navaigation-hover-first-bg.jpg) left top;color: #ed8813 }
ul#nav > li.first:hover { background: transparent url(images/css-bg/li-first-bg.jpg) no-repeat left -27px }
ul#nav > li.last { background: transparent url(imagescss-bg/li-last-bg.jpg) no-repeat right top }
ul#nav li li.last {
border: 0 solid #99b2d8;
border-width: 0 1px 1px 1px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px; }
ul#nav li.last.current { background:url(images/css-bg/navaigation-hover-last-bg.jpg) right top;color: #ed8813 }
ul#nav > li.last:hover { background: transparent url(imagescss-bg/li-last-bg.jpg) no-repeat right -27px }
ul#nav li a { color: #fff; }
ul#nav ul li.last { padding-bottom: 6px; }
ul#nav ul li a:hover { text-decoration: underline }
ul#nav li.hover,
ul#nav li:hover { color: #fff;background: url(imagescss-bg/navaigation-off-hover-bg.jpg) repeat-x left -27px }
ul#nav ul li.hover,
ul#nav ul li:hover { background: #fff }
ul#nav li:hover a { color: #fff }
ul#nav li:hover li a { color: #1f5fa9 }
ul#nav ul li.hover a,
ul#nav ul li:hover a { color: #1f5fa9 }
ul#nav ul li.hover a, ul#nav ul li:hover a { color: #1f5fa9 }
ul#nav > li.current { background:url(images/css-bg/navaigation-active-bg.jpg) repeat-x left top;color: #ed8813 }
ul#nav li.current a { color: #ed8813 }
ul#nav a:link,
ul#nav a:visited {
color: #fff;
text-decoration: none; }
ul#nav a:hover { co开发者_运维知识库lor: #000; }
ul#nav a:active { color: #ffa500; }
Here is a solution if you want to use Jquery
(function () {
$("ul#nav > li").each(function () {
var width = 0;
$("ul > li", $(this)).each(function () {
var w = $(this).width();
if (width < w) {
width = w;
}
});
if (width != 0) {
$("ul > li", $(this)).width(width);
}
});
})();
Try applying the border to ul instead of li. This way you are creating one border for the whole list instead of a border per list. Let me know if this doesn't work.
精彩评论