SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Threaded View

  1. #1
    SitePoint Member
    Join Date
    May 2003
    Location
    South Dakota
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can someone tell me what I did wrong with this drop down menu?

    I am trying to add a drop down menu to site but for some reason I cannot get the drop down menu to appear when hovered over the main tab. I spent all day yesterday and this morning scouring the net to see what I did wrong, but I can't figure it out. I truly do appreciate your time. Thank you.

    Here's the info from my CSS page

    ===
    Code:
    /* Begin eMag Menu Styles */
    
    #menu ul {
    	background-color: #d1dab6;
    	list-style-type: none;
    	font-size: 12px;
    	color: #993366;
    	width: 100%;
    	display: inline-block;
    	padding: 3px 2px 3px 2px;
    	overflow: hidden;
    	float: left;
    	margin: 0;
    }
    
    #menu ul li {
    	display: inline-block;
    	float: left;
    	position: relative;
    	overflow: hidden;
    }
    
    #menu ul li a {
    	background-color: #d1dab6;
    	text-decoration: none;
    	text-align: center;
    	color: #993366;
    	width: 120px;
    	display: inline-block;
    	padding: 3px 2px 3px 2px;
    }
    
    #menu ul li a:hover {
    	background-color: #eeeeee;
    	color: #666666;
    	border-radius: 10px;
    	overflow:visible;
    }
    
    body#biz a#biznav, 
    body#crafts a#craftsnav,
    body#editorial a#editorialnav,
    body#interview a#interviewnav,
    body#living a#livingnav, 
    body#reviews a#reviewsnav,
    body#writer a#writernav {
    	background-color: #eeeeee;
    	color: #666666;
    	border-radius: 10px;
    }
    
    /* End eMag Menu Styles */
    
    
    /* Begin Drop Down Menu Styles */
    
    .dropdown {
    	background-color: #d1dab6;
    	position: absolute;
    }
    
    .dropdown ul {
    	background-color: #d1dab6;
    	list-style-type: none;
    	font-size: 12px;
    	color: #993366;
    	width: 100%;
    	display: none;
    	padding: 0px;
    	margin: 0;
    	visibility: hidden; 
    }
    
    .dropdown ul li {
    	background-color: #d1dab6;
    	text-decoration: none;
    	text-align: left;
    	color: #993366;
    	float: none;
    	display: none;
    	padding: 0px;
    	margin: 0;
    	position: relative;
    }
    
    dropdown ul li a {
    	background-color: #d1dab6;
    	text-decoration: none;
    	text-align: left;
    	color: #993366;
    	width: 120px;
    	height: 25px;
    	display: none;
    	padding: 0px;
    	margin: 0;
    }
    
    .dropdown ul li a:hover {
    	background-color: #eeeeee;
    	color: #666666;
    	border-radius: 10px;
    	visibility: visible; 
    }
    
    /* End Drop Down Menu Styles */
    ===

    Here's what I have for Site Navigation

    ===
    Code:
    <div id="menu">
    
    <center>
    <ul>
    <li><a id="craftsnav" href="../artsncrafts/index.htm" title="Create arts and crafts projects with your family and friends">Arts/Crafts Tuts</a>
    	<ul class="dropdown">
    	<li><a href="giftideas/index.htm" id="menu">Budget Friendly Gift Ideas</a></li>
    	<li><a href="christmas/index.htm">Christmas Crafts</a></li>
    	<li><a href="cincodemayo/index.htm">Cinco de Mayo Crafts</a></li>
    	<li><a href="earthday/index.htm">Earth Day Crafts</a></li>
    	<li><a href="easter/index.htm">Easter Crafts</a></li>
    	<li><a href="embroidery/index.htm">Embroidery Projects</a></li>
    	<li><a href="everyday/index.htm">Everyday Crafts</a></li>
    	<li><a href="fathersday/index.htm">Father's Day Crafts</a></li>
    	<li><a href="halloween/index.htm">Halloween Crafts</a></li>
    	<li><a href="mothersday/index.htm">Mother's Day Crafts</a></li>
    	<li><a href="papercrafts/index.htm">Paper Crafts</a></li>
    	<li><a href="thanksgiving/index.htm">Thanksgiving Day Crafts</a></li>
    	<li><a href="valentinesday/index.htm">Valentine's Day Crafts</a></li>
    	</ul>
    </li>
    
    <li><a id="biznav" href="../business/index.htm" title="Read articles about creating and building a small business">Business Advice</a></li>
    <li><a id="livingnav" href="../living/index.htm" title="Discover how you can live life on your own terms and create a life worth living.">Intentional Living</a></li>
    <li><a id="interviewnav" href="../interviews/index.htm" title="Read the interviews with authors, actors, musicians, and entreprenuers">Q&amp;A Interviews</a></li>
    <li><a id="reviewsnav" href="../reviews/index.htm" title="Get the latest scoop with book, movie, and product reviews">Product Reviews</a></li>
    <li><a id="writernav" href="../writing/index.htm" title="Read articles on how to becoming a paid freelance writer">Writing Tips</a></li>
    <li><a href="http://alyiceedrich.com" title="Art diary of Alyice Edrich" target="_blank">The Art Diary</a></li>
    </ul>
    </center>
    
    </div>
    <!-- end #menu -->
    Last edited by Paul O'B; Jan 3, 2013 at 16:28. Reason: code tags added


Tags for this 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
  •