Stretch UL to fill the entire DIV
Posted
by
Interfaith
on Stack Overflow
See other posts from Stack Overflow
or by Interfaith
Published on 2012-07-06T21:08:33Z
Indexed on
2012/07/06
21:15 UTC
Read the original article
Hit count: 228
There is a similar post: Stretch horizontal ul to fit width of div
But mine is a little bit tricky, as I have tried the above example but failed. My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-…
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/li…
<script>
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibi… "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibi… "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});
</script>
<style>
body{
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
display: table;
width: 100%;
}
#nav a{
display:block;
padding:10px 15px 10px 15px;
border:1px solid #fff;
color:#fff;
text-align: center;
margin:0;
text-decoration:none;
background: #C34328;
border-top:1px solid #EF593B;
-moz-box-shadow:0px 3px 4px #591E12 inset;
-webkit-box-shadow:0px 3px 4px #591E12 inset;
-box-shadow:0px 3px 4px #591E12 inset;
}
#nav a:hover{
background-color:#fff;
color:#333;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
display:none;
width:12em;
top:3.2em;
}
#nav li ul a{
width:12em;
height:auto;
float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
</style>
</head>
<body>
<div style="width: 980px; border: 1px black solid;">
<ul id="nav">
<li><a href="#">Find a Doctor</a></li>
<li><a href="#">Why Interfaith</a></li>
<li><a href="#">For Patients & Visitors</a>
<ul>
<li><a href="#">3.1 jQuery</a></li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
<li><a href="#">Medical Services</a>
<ul>
<li><a href="#">Behavioral Health</a></li>
<li><a href="#">Clinical Laboratory</a></li>
<li><a href="#">Dentistry</a></li>
<li><a href="#">Emergency</a></li>
<li><a href="#">Gynecology</a></li>
<li><a href="#">Medicine</a></li>
<li><a href="#">Pastoral</a></li>
<li><a href="#">Pediatrics</a></li>
<li><a href="#">Physical Medicine & Rehab</a></li>
</ul>
</li>
<li><a href="#">Medical Trainings</a>
<ul>
<li><a href="#">Medical Training</a></li>
<li><a href="#">Behavioral Health</a></li>
<li><a href="#">Predoctoral Externship</a></li>
<li><a href="#">Podiatric Residency</a></li>
<li><a href="#">Dental Residency</a></li>
<li><a href="#">Pulmonary Medicine</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Can someone tell me where I have to edit to complete the code?
Thanks
© Stack Overflow or respective owner
