[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 341
  • Last Modified:

How to make the submenu appear below menu

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
searchsanjaysharma
Asked:
searchsanjaysharma
1 Solution
 
selvolCommented:
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
 
searchsanjaysharmaAuthor Commented:
Doesnt work, PFA the html and css, change the css path
style.css
index.htm
0
 
LZ1Commented:
Line 47 of your CSS add position:relative;

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

Open in new window

0
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
searchsanjaysharmaAuthor Commented:
Changing this is taking the bar outside.
0
 
LZ1Commented:
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
 
lightspeedvtCommented:
Will be good to see the whole site.
0
 
searchsanjaysharmaAuthor Commented:
tx
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now