Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to make the submenu appear below menu

Posted on 2013-02-04
7
Medium Priority
?
334 Views
Last Modified: 2013-02-21
When ever i click on menu the submenu gets opened at left hand side.
The css is as follows:

nav {width:980px; float:left; background:url(../images/nav_bg.jpg) center repeat-x; height:35px; margin:0 9px; position:relative;}
nav ul {margin:0; padding:0;}
nav li {float:left; border-right:1px solid #000;}
nav li a {color:#FFF; font:bold 14px/35px "Trebuchet MS"; display:block; text-shadow:0 -1px 0 #000; padding:0 16px;}
nav li a.active, nav li a:hover {border-bottom:3px solid #C30; height:32px;}
nav li:last-child {border-right:0;}
/* 1st Level DropDown Menu */
li.subnav ul {width:980px; background:url(../images/dd_nav.png) top repeat; position:absolute; z-index:1002; display:none; border-top:1px dotted #bcbcbc; left:0;}
li.subnav li {border-left:1px dotted #bcbcbc; border-bottom:1px dotted #bcbcbc; float:left; position:relative;}
li.subnav li a, li.subnavs li a {color:#FFF; font:11px/26px Verdana; padding:0 10px;}
li.subnav li a:hover, li.subnavs li a:hover {background:url(../images/dd_nav.png) top repeat; height:26px; border-bottom:0;}
li.subnav:hover > ul, li.subnavs:hover > ul {display:block;}
0
Comment
Question by:searchsanjaysharma
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 17

Expert Comment

by:selvol
ID: 38850670
It going to be all guesses and near impossible to get the answer this question with just the
CSS provided.....

Here is my guess

li.subnav li {border-left:1px dotted #bcbcbc; border-bottom:1px dotted #bcbcbc; float:left; position:relative;}

Open in new window


CHANGE TO
li.subnav li {border-left:1px dotted #bcbcbc; border-bottom:1px dotted #bcbcbc; clear:both; position:relative;}

Open in new window


ANd possibly line 1

nav {width:980px; float:left; 

Open in new window


Change to

nav {width:980px; clear:both;

Open in new window



Or remove the float:left.

Please post the rest of the HTML....
Selvol
0
 

Author Comment

by:searchsanjaysharma
ID: 38850926
Doesnt work, PFA the html and css, change the css path
style.css
index.htm
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 1500 total points
ID: 38850956
Line 47 of your CSS add position:relative;

nav li {float:left; border-right:1px solid #000;position: relative;}

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:searchsanjaysharma
ID: 38850994
Changing this is taking the bar outside.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 38850999
What browser are you in?  I tried it locally on the files you posted and it worked fine. Is the sub nav supposed to be vertical?
0
 
LVL 6

Expert Comment

by:lightspeedvt
ID: 38881586
Will be good to see the whole site.
0
 

Author Closing Comment

by:searchsanjaysharma
ID: 38913848
tx
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question