Solved

How to make the submenu appear below menu

Posted on 2013-02-04
7
295 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
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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Message not shown 5 49
Alignment is not working correctly. 8 38
Put shading on half of picture 8 42
Overlap photo won't go all the way to the right 1 17
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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 tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

816 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now