Solved

How to make the submenu appear below menu

Posted on 2013-02-04
7
277 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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

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 …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

744 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