Solved

How to make the submenu appear below menu

Posted on 2013-02-04
7
328 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 500 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
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.

 

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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

621 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