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 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Horizontal drop-down menu

    Hi,

    I'm new to CSS HTML and am looking to create a horizontal drop-down menu solely from HTML and CSS if possible. I have read an article on "A List Apart" but am still stuck. The following is the HTML and CSS i've got so far.

    Code:
    <div id="nav">
    		<ul>
    			<li><a href="testproject.html">HOME</a></li>|
    			<li><a href="about.html">ABOUT ME</a></li>|
    			<li><a href="nutritional_health.html">NUTRITIONAL HEALTH</a>|
    				<ul>
    					<li><a href="nutritional_health.html#whatis">&raquo; What it is</a></li>
    					<li><a href="nutritional_health.html#how">&raquo; How it can help you</a></li>
    				</ul>
    			</li>
    			<li><a href="recipes.html">RECIPES</a></li>|
    			<li><a href="pricing.html">PRICING</a></li>|
    			<li><a href="contact.html">CONTACT</a></li>
    		</ul>
    	</div>
    Code:
    #nav {
    	margin: 0px;
    	padding: 0px;
    	width: 800px;
    	height: 40px;
    	text-align: center;
    	font-size :15pt;
    	font-family: sylfaen, verdana, arial-narrow;
    	font-weight: normal;
    	background-image: url('images/bg_navbar.jpg');
    	border-bottom: 10px solid #CCCCCC;
    
    }
    
    #nav ul {
    	list-style: none;
    	display: inline;
    	margin: 0px;
    	padding: 0px;
    } 
    
    #nav ul li {
    	display: inline;
    	padding: 0px 3px 0px 3px;	
    }
    
    #nav ul li a {
    	text-decoration: none;
    	
    }
    
    #nav ul li a:link {
    	color: #FFFFFF;
    }
    
    #nav ul li a:visited {
    	color: #555555;
    }
    
    #nav ul li a:hover, #nav ul li a:active {
    	border-bottom: 4px solid #008500;
    }
    
    #nav ul li ul {
    	display: none;
    	position: absolute;
    }
    
    #nav ul li ul:hover {
    	display: block
    }
    Right now no sub-menu is showing due to the "display:none" but i am also not seeing anything when hovering over the main link. I would appreciate any help.
    Last edited by gnolan; 04-28-2011 at 03:26 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Your markup is invalid. You need to remove the vertical pipe characters from there as you can't nest anything directly under <ul> except an <li>. It'd be better to use a border-right or some background image to the list elements.

    Then change the last selector in your CSS to
    Code:
    #nav ul li:hover  ul{
    	display: block
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    gnolan (04-27-2011)

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thanks a lot for that. I'm quite new to this but i think i understand that quite well.

    I have replaced the vertical pipe characters with border-right and it looks ok, not the best but ok - and the sub-menu items are appearing below the main link but not as i would like.

    They are appearing below the main link but aligned to the far left and inline - as opposed to appearing directly below the main link with each sub-menu item on a separate line.

    I have added in the following CSS to make the sub-menu items appear each on a separate line. How do i go about making them appear directly under the main link?

    Code:
    #nav ul li ul li {      /*is this the proper syntax??*/
    	display: block;
    	text-align: left;
    }
    I apologise if that is already answered in your last post - if it is i don't understand it.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    #nav ul li {
    	display: inline;
    	padding: 0px 3px 0px 3px;
    	position:relative;
    }
    #nav ul li ul {
    	display: none;
    	position: absolute;
    	left:0;
    	top:1.5em;
    	width:20em;
    	text-align:left;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Code:
    #nav ul li {
    	display: inline;
    	padding: 0px 3px 0px 3px;
    	position:relative;
    }
    #nav ul li ul {
    	display: none;
    	position: absolute;
    	left:0;
    	top:1.5em;
    	width:20em;
    	text-align:left;
    }
    Thanks very much for your help - all sorted now.

    On final thing - can "left" and "top" only be used after stating "position:absolute"?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by gnolan View Post
    On final thing - can "left" and "top" only be used after stating "position:absolute"?
    Are you asking about the order of properties under a selector? If so, the answer is No - the order doesn't matter.

    Or are you asking about the use of left/right and top/bottom properties in general? These properties work "well" only if the element has got an absolute/fixed position.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Are you asking about the order of properties under a selector? If so, the answer is No - the order doesn't matter.

    Or are you asking about the use of left/right and top/bottom properties in general? These properties work "well" only if the element has got an absolute/fixed position.
    Thats the one in bold i meant. Was just wondering if those properties can be used/will work without the selector?


  •  

    Posting Permissions

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