Expanding search bar over specific links

Expanding search bar over specific links

I'm trying to get a search bar that extends over some links. It would
expand once you click on an image of a magnify glass that I already have
and expand over the "Log In" link. It does not have to work! It's just for
show.
To get more of an vision you can visit my web page here and see where I
mean about the magnify glass and login.
To get even more of a vision of exactly what I'd like, visit here. This is
exactly what I want in every way possible... just more fit to my website.
When I download the files, I get confused because there's so many elements
to it that I don't need and finding out which ones I don't need is
slightly confusing. If someone knows how to de-construct this, it would be
perfect.
What I have for my navigation CSS is:
/* Navigation bar */
#navi {
height: 40px;
width: 961px;
background: #1e416f;
font-size: 14px;
color: white;
text-transform: uppercase;
margin: 0 0 20px 0;
}
#navi a:hover {
background: white;
color: #1e416f;
}
#navi .logo {
margin: 0;
padding: 0;
float: left;
}
#navi .logo a {
float: left;
width: 56px;
height: 40px;
background: url(/imgs/navi/caul_white_nav.png) center no-repeat;
text-indent: -9999px;
}
#navi .logo a:hover {
background: url(/imgs/navi-hover/caul_blue_nav.png) center no-repeat;
background-color: white;
}
#primary-nav, #tools-nav {
list-style: none;
margin: 0;
padding: 0;
}
#primary-nav li, #primary-nav a, #tools-nav li, #tools-nav a {
float: left;
}
#primary-nav a, #tools-nav a {
color: white;
text-decoration: none;
padding: 0 10px;
border-right: 1px solid white;
line-height: 40px;
}
#tools-nav a:hover {
color: #1e416f;
}
#primary-nav li:first-child a, #tools-nav li:first-child a {
border-left: 1px solid white;
}
#tools-nav {
float: right;
}
#tools-nav .icon a {
text-indent: -9999px;
}
#tools-nav .email a {
background: url(/imgs/navi/mail.png) no-repeat scroll center center
transparent;
width: 20px;
}
#tools-nav .email a:hover {
background: url(/imgs/navi-hover/hover_mail.png) no-repeat scroll center
center transparent;
width: 20px;
}
#tools-nav .twitter a {
background: url(/imgs/navi/twitter.png) no-repeat scroll center center
transparent;
width: 20px;
}
#tools-nav .twitter a:hover {
background: url(/imgs/navi-hover/hover-twitter.png) no-repeat scroll
center center transparent;
width: 20px;
}
#tools-nav .search a {
background: url(/imgs/navi/search.png) no-repeat scroll center center
transparent;
width: 20px;
}
#tools-nav .search a:hover {
background: url(/imgs/navi-hover/hover_search.png) no-repeat scroll center
center transparent;
width: 20px;
}
And my relevant HTML:
<!-- NAVIGATION -->
<div id="navi">
<h1 class="logo"><a href="#">CAUL/CBUA</a></h1>
<ul id="primary-nav">
<li><a href="#">Directories</a></li>
<li><a href="#">Committees</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">About</a></li>
</ul>
<ul id="tools-nav">
<li class="login"><a href="#">Log In</a></li>
<li class="email icon"><a href="#">Email</a></li>
<li class="twitter icon"><a href="#">Twitter</a></li>
<li class="search icon"><a href="#">Search</a></li>
</ul>
</div>