Log in

View Full Version : CSS Dropdown Menu help!


CreativeWebDsign
03-27-2009, 07:03 PM
I have a menu from IzzyMenu that I wanted adapted,

I found another menu that accomplishes what I want done.

So basically, I need to add the IzzyMenu Images added to the new menu.
There are background images that came with the IzzyMenu that i'd like to keep.

If someone would be willing to add the images in the new menu for me, that'd be great!

The new menu's HTML:



<link href="css/dropdown/dropdown.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/default/default.css" media="all" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

</head>

<body>

<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="./">Home</a></li>
<li class="dir">About Us
<ul>
<li><a href="./">History</a></li>
<li><a href="./">Our Vision</a></li>
<li class="dir"><a href="./">The Team</a>
<ul>
<li><a href="./">Brigita</a></li>
<li><a href="./">John</a></li>
<li><a href="./">Michael</a></li>
<li><a href="./">Peter</a></li>
<li><a href="./">Sarah</a></li>
</ul>
</li>
<li><a href="./">Clients</a></li>
<li><a href="./">Testimonials</a></li>
<li><a href="./">Press</a></li>
<li><a href="./">FAQs</a></li>
</ul>
</li>
<li class="dir">Services
<ul>
<li><a href="./">Product Development</a></li>
<li><a href="./">Delivery</a></li>
<li><a href="./">Shop Online</a></li>
<li><a href="./">Support</a></li>
<li><a href="./">Training &amp; Consulting</a></li>
</ul>
</li>
<li class="dir">Products
<ul>
<li class="dir"><a href="./">New</a>
<ul>
<li><a href="./">Corporate Use</a></li>
<li><a href="./">Private Use</a></li>
</ul>
</li>
<li class="dir"><a href="./">Used</a>
<ul>
<li><a href="./">Corporate Use</a></li>
<li><a href="./">Private Use</a></li>
</ul>
</li>
<li><a href="./">Featured</a></li>
<li><a href="./">Top Rated</a></li>
<li><a href="./">Prices</a></li>
</ul>
</li>
<li><a href="./">Gallery</a></li>
<li><a href="./">Events</a></li>
<li><a href="./">Careers</a></li>
<li class="dir"><a href="./">Contact Us</a>
<ul>
<li><a href="./">Enquiry Form</a></li>
<li><a href="./">Map &amp; Driving Directions</a></li>
<li><a href="./">Your Feedback</a></li>
</ul>
</li>
</ul>

</body>
</html>


IzzyMenu's HTML:



<head>

<script type="text/javascript" src="/chrome.js"></script>

</head>

<body>

<center>

<style>
#MainMenu
{
background:#FFF url(images/bmid_086.gif);
border:2px solid #00000;
margin:0;
}
#tab
{
top:0;
height:0;
background:repeat-x top;
margin:0;
}
#tab ul
{
list-style:none;
float:left;
margin:0;
padding:0;
}
#tab li
{
display:inline;
float:left;
margin:0;
padding:0;
}
#tab a
{
background:#000 url(images/bright_086.gif) no-repeat right top;
text-decoration:none;
border:0;
display:block;
float:left;
margin:0;
padding:0;
}
#tab a span
{
display:block;
background:url(images/bleft_086.gif) no-repeat left top;
font-family:\"Times New Roman\", Times, serif;
font-size:19px;
font-style:italic;
text-decoration: none;
color:#FFF;
font-weight:bold;
line-height:29px;
padding:0 15px 0 13px;
}
#tab a:hover,#tab li.item_active a
{
background-position:right bottom;
}
#tab a:hover span,#tab li.item_active a span
{
background-position:left bottom;
color:#009;
font-weight:bold;
font-style:italic;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border:2px solid #00000;
background:#FFF url(images/bmid_086.gif);
color:#FFF;
z-index:100;
text-decoration:none;
padding:0;
}
.dropmenudiv ul
{
list-style:none;
margin:0;
padding:0;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link,.dropmenudiv a:visited
{
width:180px;
display:block;
border:0;
color:#FFFFF;
background:url(images/bleft_086.gif) no-repeat left top;
font-weight:bold;
font-style:italic;
text-decoration:none;
margin:0;
padding:0;
}
.dropmenudiv a span
{
display:block;
line-height:29px;
background:url(images/bright_086.gif) no-repeat right top;
font-family:\"Times New Roman\", Times, serif;
font-size:19px;
font-style:italic;
color:#FFFFF;
float:none;
padding:0 15px 0 13px;
}
.dropmenudiv a:hover
{
border:0;
background-position:left bottom;
font-weight:bold;
font-style:italic;
text-decoration:none;
color:#009;
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#009;
font-weight:700;
font-style:italic;
}

</style>
<div id="MainMenu">
<div id="tab">
<ul>
<li class="item_active"><a href="index.html"><span>Home</span></a></li>
<li><a href="Community/index.php" onMouseover="cssdropdown.dropit(this,event,'dropmenu_734766')"><span>Community</span></a></li>
<li><a href="URL"><span>Menu</span></a></li>
<li><a href="Search.php"><span>Search</span></a></li>
<li><a href="blog" onMouseover="cssdropdown.dropit(this,event,'dropmenu_509055')"><span>Blog</span></a></li>
<li><a href="URL"><span>Menu</span></a></li>
<li><a href="URL" onMouseover="cssdropdown.dropit(this,event,'dropmenu_82954')"><span>Products</span></a></li>
<li><a href="URL" onMouseover="cssdropdown.dropit(this,event,'dropmenu_423082')"><span>Pets</span></a></li>
</ul>
</div>
</div>

<div id="dropmenu_734766" class="dropmenudiv">
<ul>
<li><a href="#"><span>Register</span></a></li>
<li><a href="#"><span>Login</span></a></li>
<li><a href="#"><span>Search</span></a></li>
<li><a href="#"><span>Member List</span></a></li>
<li><a href="#"><span>Latest Posts</span></a></li>
</ul>
</div>

<div id="dropmenu_509055" class="dropmenudiv">
<ul>
<li><a href="#"><span>Register</span></a></li>
<li><a href="#"><span>Login</span></a></li>
<li><a href="#"><span>Search</span></a></li>
<li><a href="#"><span>Our latest</span></a></li>
</ul>
</div>

<div id="dropmenu_82954" class="dropmenudiv">
<ul>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
<li><a href="#"><span>Product here</span></a></li>
</ul>
</div>

<div id="dropmenu_423082" class="dropmenudiv">
<ul>
<li><a href="#"><span>Menu</span></a></li>
<li><a href="#"><span>Menu</span></a></li>
<li><a href="#"><span>Menu here</span></a></li>
<li><a href="#"><span>Menu here</span></a></li>
</ul>
</div>
CreativeWebDsign
03-27-2009, 07:03 PM
The CSS files for the new menu:

default.css:


@charset "UTF-8";

/**
* Default CSS Drop-Down Menu Theme
*
* @file default.css
* @name Default
* @version 0.1
* @type transitional
* @browsers Windows: IE5+, Opera7+, Firefox1+
* Mac OS: Safari2+, Firefox2+
*
* @link http://www.lwis.net/
* @copyright 2008 Live Web Institute. All Rights Reserved.
*
* Module Classes: *.dir {} *.on {} *.open {} li.hover {} li.first {} li.last {}
* Expected directory tag - li
*
*/

@import "helper.css";

ul.dropdown {
font-weight: bold;
}

ul.dropdown li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #eee;
color: #000;
}

ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }


/* -- level mark -- */

ul.dropdown ul {
width: 150px;
margin-top: 1px;
}

ul.dropdown ul li {
font-weight: normal;
}



/*-------------------------------------------------/
* @section Support Class `dir`
* @level sep ul, .class
*/


ul.dropdown *.dir {
padding-right: 20px;
background-image: url(images/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-horizontal ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}

ul.dropdown-upward *.dir {
background-image: url(images/nav-arrow-top.png);
}

ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
background-image: url(images/nav-arrow-right.png);
}

ul.dropdown-vertical-rtl *.dir {
padding-right: 10px;
padding-left: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}


Dropdown CSS:


@charset "UTF-8";

/**
* Horizontal CSS Drop-Down Menu Module
*
* @file dropdown.css
* @package Dropdown
* @version 0.7.1
* @type Transitional
* @stacks 597-599
* @browsers Windows: IE6+, Opera7+, Firefox1+
* Mac OS: Safari2+, Firefox2+
*
* @link http://www.lwis.net/
* @copyright 2006-2008 Live Web Institute. All Rights Reserved.
*
*/

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 597;
float: left;
}

ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}

ul.dropdown ul li {
float: none;
}

ul.dropdown ul ul {
top: 1px;
left: 99%;
}

ul.dropdown li:hover > ul {
visibility: visible;
}


Help would be GREATLY appreciated!!!

CreativeWebDsign