Go Back   CodeCall Programming Forum > Web Development Forum > HTML Programming
dropdown menu dropdown menu
Register Blogs Search Today's Posts Mark Forums Read

HTML Programming Forum discussion covering HTML, XHTML, DHTML and all flavors of HTML. Hypertext Markup Language is used to create websites.

Reply
 
LinkBack Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old 05-22-2009, 01:27 AM
hkp's Avatar
hkp hkp is offline
Learning Programmer
  
Join Date: May 2009
Posts: 37
hkp is an unknown quantity at this point
dropdown menu
hello friends, I have design a css drop down menu. It is working fine in the firefox but it is not working fine in the internet explorer.

Here is the code of that

Code:
<html>
<head>
<style type="text/css">

.menu {font-family: arial, sans-serif;
 	width:750px; 
	height:100px;
	position:relative;
	font-size:11px; 
	z-index:100;
}

.menu ul li a, .menu ul li a:visited {display:block; 
	text-decoration:none; 	color:#000;
	width:104px; 
	height:20px; 
	text-align:center; 
	color:#fff; 
	border:1px solid #fff; 	background:#710069; 
	line-height:20px; 
	font-size:11px; 
	overflow:hidden;
}

.menu ul {padding:0; margin:0; list-style: none;}

.menu ul li {float:left; 
		position:relative;
}

.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
</style>
</head>
<body>
<div class="menu">

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
	<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
	<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
	<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

	<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>

    <!--[if lte IE 6]>
    <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
    <table><tr><td>
    <![endif]-->

		<ul>
			<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
			<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
			<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>

	<!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->

	</li>

	<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
	<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
	<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
	<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
	<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="index.html">MENUS</a>

<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
	<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
	<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
	<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
	<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
	<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
	<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
	<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
	<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
	<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
	<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
	<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
	<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
	<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
	<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
	<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
	<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
	<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
	<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK</a>

    <!--[if lte IE 6]>
    <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK
    <table><tr><td>
    <![endif]-->

		<ul class="left">
			<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
			<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
			<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>

	<!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->

	</li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
</ul>

</div>
</body>
</html>
Can you help me in this code, so that it also work on the internet explorer.

___________
Design a website
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #2 (permalink)  
Old 05-22-2009, 11:38 AM
WingedPanther's Avatar
Super Moderator
  
Join Date: Jul 2006
Age: 36
Posts: 11,435
WingedPanther has much to be proud ofWingedPanther has much to be proud ofWingedPanther has much to be proud ofWingedPanther has much to be proud ofWingedPanther has much to be proud ofWingedPanther has much to be proud ofWingedPanther has much to be proud ofWingedPanther has much to be proud ofWingedPanther has much to be proud of
Re: dropdown menu
What version of IE is giving you problems? What errors are you getting?
__________________
CodeCall Blog | CodeCall Wiki | Shareware
Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #3 (permalink)  
Old 05-22-2009, 11:51 AM
Xav's Avatar
Xav Xav is offline
Code Slinger
  
Join Date: Mar 2008
Location: The North Pole
Posts: 13,210
Xav has much to be proud ofXav has much to be proud ofXav has much to be proud ofXav has much to be proud ofXav has much to be proud ofXav has much to be proud ofXav has much to be proud ofXav has much to be proud ofXav has much to be proud of
Send a message via MSN to Xav
Re: dropdown menu
What exactly isn't working?
__________________

Quote:
Originally Posted by Jordan View Post
Good members, like yourself, stick around and post for ages to come!
Mr. Xav | Blog | Forums
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #4 (permalink)  
Old 05-25-2009, 01:05 AM
hkp's Avatar
hkp hkp is offline
Learning Programmer
  
Join Date: May 2009
Posts: 37
hkp is an unknown quantity at this point
Re: dropdown menu
Quote:
Originally Posted by WingedPanther View Post
What version of IE is giving you problems? What errors are you getting?
I have test it on the ie6 and ie7. In both it is not working.


__________________
Design a website
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #5 (permalink)  
Old 08-20-2009, 02:37 AM
Newbie
  
Join Date: Jul 2009
Posts: 8
Kristian Finlay is an unknown quantity at this point
Re: dropdown menu
Drop down menus are easy to create in HTML and using CSS. You don't have to know HTML and CSS cause you can find whole code and just have to copy paste it. But it's good to know some HTML,CSS cause you will probably have to adapt it to fit your need. The link below explains and gives you horizontal drop down menu codes.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #6 (permalink)  
Old 08-20-2009, 03:25 AM
sdavis2702's Avatar
Learning Programmer
  
Join Date: Aug 2009
Location: Fort Sill, Oklahoma
Age: 25
Posts: 95
sdavis2702 is an unknown quantity at this point
Send a message via AIM to sdavis2702 Send a message via Yahoo to sdavis2702
Re: dropdown menu
What link below? Do I not see it because I'm a noob or did you forget to post it? Thanks
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #7 (permalink)  
Old 08-20-2009, 11:35 AM
WingedPanther's Avatar
Super Moderator
  
Join Date: Jul 2006
Age: 36
Posts: 11,435
WingedPanther has much to be proud ofWingedPanther has much to be proud ofWingedPanther has much to be proud ofWingedPanther has much to be proud ofWingedPanther has much to be proud ofWingedPanther has much to be proud ofWingedPanther has much to be proud ofWingedPanther has much to be proud ofWingedPanther has much to be proud of
Re: dropdown menu
Kristian needs 10 posts to post links.
__________________
CodeCall Blog | CodeCall Wiki | Shareware
Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply

« Previous Thread | Next Thread »


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Linear Mode Linear Mode


Similar Threads
Thread Thread Starter Forum Replies Last Post
Window.Forms: menu appears after headline click dvelpo C# Programming 0 09-11-2008 06:11 AM
check mark on menu items? gaylo565 C# Programming 7 08-24-2008 08:49 AM
AJAX Drop down populating menu SeR_Cyclops MarketPlace 0 01-08-2008 10:26 PM
Menu Item options. aravot easyContact 3 12-13-2007 03:27 PM
Right-Click menu travy92 Visual Basic Programming 1 10-06-2007 09:06 AM


All times are GMT -5. The time now is 11:19 AM.


Contact Us - Programming Forum - Archive - Top

vBulletin v3.8.0 ©2010, Jelsoft Enterprises Ltd.


no new posts

LinkBacks Enabled by vBSEO 3.1.0