I recently created a test site without a drop-down menu, and here is how it looks:
Check out my site here:
Now, I want to add a simple drop-down menu for "serwery". Can anyone help me figure out what's wrong with my code?
Here's the HTML:
<!-- MENU CRAFTED NETWORK --->
<div class="menu">
<div id="nav">
<img class="steve" src="images/steve.png"/>
<ul>
<li><a href="#">STRONA GŁÓWNA</a></li>
<li><img style="splitter" src="/CN/images/nav_splitter.png"></li>
<li><a href="/cn2/serwery">SERWERY</a>
<ul>
<li><a href="http://hivemc.com/survival-games"><i class="icon-chevron-right"></i>Official Survival Games</a></li>
<li><a href="http://hivemc.com/trouble-in-mineville"><i class="icon-chevron-right"></i>Trouble in Mineville</a></li>
<li><a href="http://hivemc.com/the-herobrine"><i class="icon-chevron-right"></i>The Herobrine</a></li>
<li><a href="http://hivemc.com/hide-and-seek"><i class="icon-chevron-right"></i>Hide and Seek</a></li>
<li><a href="http://hivemc.com/splegg"><i class="icon-chevron-right"></i>Splegg</a></li>
<li><a href="http://hivemc.com/one-in-the-chamber"><i class="icon-chevron-right"></i>One In The Chamber</a></li>
</ul>
</li>
<li><img style="splitter" src="/CN/images/nav_splitter.png"></li>
<li><a href="/forum">FORUM</a></li>
<li><img src="/CN/images/nav_splitter.png"></li>
<li><a href="/cn2/sklep">SKLEP SMS</a></li>
<li><img src="/CN/images/nav_splitter.png"></li>
<li><a href="/cn2/wiki">FAQ</a></li>
</ul>
</div>
<div class="ip"><p>IP: CRAFTED.PL</p></div>
<div class="statystyki">
<p>DOŁĄCZ DO <b>1267</b> GRACZY ONLINE!</p>
<a href="http://crafted.pl/index.php" class="social"><img src="images/email.png" alt=""></a>
<a href="/youtube" class="social2"><img src="images/youtube.png" alt=""></a>
<a href="/email" class="social2"><img src="images/facebook.png" alt=""></a>
</div><!-- KONIEC MENU -->
And here's the relevant CSS:
.menu {
padding: 0;
margin: 0;
border: 0;
height: 132px;
position:absolute;
top: 320px;
background: url(../images/menu.png) repeat-x;
width: 100%;
}
#navi select {
display:none;
padding:4px 8px;
border: 1px dotted #CCC;
margin:3px 0px 5px 0px;
font-family: Crafted;
color: #807f7f;
font-size:10pt;
font-weight:normal;
text-decoration:none;
}
/* Additional CSS rules go here */
.steve {
margin: -79px 0 0 0;
background: url(../images/steve.png) repeat-x;
position: absolute;
margin-left: 700px;
float: left;
}
#navi {
/* More styling for navigation */
}
/* You can add more custom styles here */
I found some helpful information on creating a dropdown from this tutorial: www.threestyles.com/tutorials/css-drop-down-navigation-tutorial/
If anyone can assist me in making this work and matching the design in my old picture, I would greatly appreciate it.