Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Drop Down Menu CSS

    Hello,
    I am taking over web design on a website that needs their main menu converted into a drop down menu. You can see the development site here: http://www.dev.chicologo.com/ohbees.html

    I added one item under "Products", called "Honey", but it is visible without moving the mouse over the products menu item. I need to setup the CSS to hide the submenu items until they are moused over, but am not sure about how to configure the CSS. Here is the current menu CSS:

    Code:
     #header {
    	width: 856px;
    	height: 130px;
    	position: relative;
    	margin: 0 auto;
    	z-index: 3000;
    	}
    	#header ul.navigation {
    		padding: 80px 0 0 0;
    		position: absolute;
    		z-index: 10000;
    		}
    		#header ul.navigation li {
    			float: left;
    			display: block;
    			position: relative;
    			margin: 0 4px;
    			}
    			#header ul.navigation li a {
    				font-size: 16px;
    				line-height: 24px;
    				font-weight: normal;
    				color: #fff;
    				text-decoration: none;
    				display: block;
    				text-shadow: #111 1px 1px 2px;
    				padding: 5px 9px;
    				text-align: center;
    				font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    				text-transform: uppercase;
    				}
    				#header ul.navigation li a:hover,
    				#header ul.navigation li:hover a,
    				#header ul.navigation li.hover a,
    				#header ul.navigation li.active a {
    					color: #FBD92D;
    					background: #000;
    					border-radius: 4px;
    					-moz-border-radius: 4px;
    					-webkit-border-radius: 4px;
    					}
    				.biq #header ul.navigation li a:hover,
    				.biq #header ul.navigation li:hover a,
    				.biq #header ul.navigation li.hover a,
    				.biq #header ul.navigation li.active a {
    					color: #FFF;
    					background: #633678;
    					}
    		#header ul.navigation li.pricing {
    			margin: 0 0 0 142px;
    			}
    		#header ul.navigation li.logo {
    			width: 127px;
    			height: 170px;
    			position: absolute;
    			top: 0px;
    			left: 50%;
    			z-index: 1;
    			margin: 0 0 0 -57px;
    			padding: 0;
    			}
    			#header ul.navigation li.logo a {
    				background: url(/ui/public/image/layout/ohb_logo.png) no-repeat 0 0;
    				width: 100%;
    				height: 100%;
    				line-height: 100%;
    				text-indent: -9999px;
    				z-index: 1;
    				overflow: hidden;
    				padding: 0;
    				}
    		.biq #header ul.navigation li.logo {
    			width: 158px;
    			height: 143px;
    			margin: 0 0 0 -90px;
    			}
    			.biq #header ul.navigation li.logo a {
    				background: url(/ui/public/image/layout/biq_logo.png) no-repeat 0 0;
    				}

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Have a look at this tutorial: Create a Drop-Down/Fly-Out Menu With CSS.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.


  •  

    Tags for this Thread

    Posting Permissions

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