CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: CSS Dropdown Menu help!

  1. 03-27-2009, 07:03 PM #1
    CreativeWebDsign
    CreativeWebDsign is offline New Comer (less than 5 posts)
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Dropdown Menu help!

    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:

    Code:
    <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:

    Code:
    <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>
    Reply With Quote Reply With Quote
  2. 03-27-2009, 07:03 PM #2
    CreativeWebDsign
    CreativeWebDsign is offline New Comer (less than 5 posts)
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The CSS files for the new menu:

    default.css:
    Code:
    @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:
    Code:
    @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
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules