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 04:26 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    •