Dropdown menu?

**singoe** · 06-02-2010

So I want to make a dropdown menu for an item on my nav bar. how do i do this?

Code:

<body>
	<div id="top">
    	<div class="top-orbs"></div>
    </div>
    <div id="content">
    	<div id="header">
        	<div class="header-logo"></div>
            <div class="header-banner"></div>
        </div>
        <div id="navigation">
        	<a href="?p=index"><div class="nav-item">Home</div></a>
            <a href="?p=ucp"><div class="nav-item">User CP</div></a>
            <a href="/vote/"><div class="nav-item">Vote Panel</div></a>
            <a href="/donations"><div class="nav-item">Donate</div></a>
            <a href="/forum/"><div class="nav-item">Forums</div></a>
            <a href="/forum/viewtopic.php?f=5&t=6"><div class="nav-item">How to Connect</div></a>
            <a href="?p=downloads"><div class="nav-item">Downloads</div></a>
            <a href="/stalker/"><div class="nav-item">Character Map</div></a>

I want to make it so when you either click the Nav item highlighted in red, or just hover over it. It drops down 2 options (allowing the player to choose their realm). how do I do this?

Edit: I have Dreamweaver cs5. im guessing I can do it with that?

**singoe** · 06-03-2010

can anyone help?

**Mr.Zunz** · 06-03-2010

Code:

CSS: #nav, #nav ul {
padding: 3px 0 0 0;
margin: 0;
list-style: none;
}

 #nav li {
float: left;
width: 120px;
}

 #nav ul {
position: absolute;
width: 120px;
left: -1000px;
}

 #nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}

 #nav a {
display: block;
margin: 2px 5px 3px 5px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}

 ul a{
font-weight: bold;
color: #F60;
cursor: default;
}

 ul ul a:link, ul ul a:visited{
font-weight: normal;
color: #CCC;
cursor: pointer;
}

 ul ul a:hover, ul ul a:active{
font-weight: normal;
color: #FFF;
cursor: pointer;
}

 ul li{
background-color: #CCC;
border-left: 3px solid #FFF;
}

 ul ul li{
background-color: #666;
border-top: 3px solid #FFF;
border-left: 0;
}

 /* IE only hack \*/
* html ul li, * html ul ul li{
border-bottom: 3px solid #FFF;
}

 * html ul ul li{
border-top: 0;
}

Code:

HTML:  <ul id="nav">

 <li><a href="#">Main item 1</a>

 <ul>
<li><a href="#">Sub item 1.1</a></li>
<li><a href="#">Sub item 1.2</a></li>
<li><a href="#">Sub item 1.3</a></li>
<li><a href="#">Sub item 1.4</a></li>
</ul>

 </li>

 <li><a href="#">Main item 2</a>

 <ul>
<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a></li>
<li><a href="#">Sub item 2.4</a></li>
<li><a href="#">Sub item 2.5</a></li>
</ul>

 </li>

 <li><a href="#">Main item 3</a>

 <ul>
<li><a href="#">Sub item 3.1</a></li>
<li><a href="#">Sub item 3.2</a></li>
</ul>

 </li>

 </ul>

Hope this helps you out :']

Shout-Out

User Tag List

Thread: Dropdown menu?

Thread Tools

Search Thread

Dropdown menu?

Similar Threads

How do i make an item with a menu

(WINDOWS HACK) Changing Start Menu Text

Request: Warcraft 3 Main Menu's.

Main Menu change (BC theme to Draenei theme)

Add a dropdown menu to the Flash Chat link

OwnedCore Forums

casino

CoreCoins

My OwnedCore

About Us

Casino