first drop down doesn't work! « Support Forum | Kriesi.at

Support Forum » Newscast

first drop down doesn't work!

8 posts from 2 voices

Started 1 year ago by c_srishti
Latest reply from Dude
This topic is resolved

Tags:

c_srishti
Member

Hi,
http://soulmatestars.com

The first drop down is not working properly!

In IE, I have to be very clear and precise to get to the drop down, otheriwse it pulls up the drop down for the Second menu right below it.
In Firefox, the first drop-down doesn't pull down at all!!!!

Here is the code form Style.css:

/*navigation pages*/
.nav_wrapper{
position: relative;
height:36px;
padding-top:196px;/*280px;*/
z-index: 6;
}

#top .nav{
position: relative;
height:36px;
list-style-type: none;
list-style-position: outside;
margin:0;
z-index: 6;
font-size: 12px;
float: left;
}

.nav li a{
display:block;
float:left;
padding:6px 25px 6px 3px;
width:auto;
border: none;
text-decoration: none;
line-height: 24px;
outline: none;
}

.nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:50px;
z-index:5;
}

#top .nav ul a{
line-height:20px;
font-size: 12px;
cursor: pointer;
}

#top .nav li{
float:left;
position:relative;
z-index:20;
}

#top .nav li li{
border-left:none;
margin-top:0;
}

#top .nav ul {
display:none;
position:absolute;
top:36px;
width:172px;
left:-9px;
}

#top .nav li ul a{
width:150px;
height:auto;
float:left;
text-align:left;
padding:4px 10px;
}

#top .nav ul ul{
top:auto;
border-top:none;
}

#top .nav li ul ul {
left:171px;
top:-1px;
}

#top .nav li:hover ul ul, #top .nav li:hover ul ul ul,#top .nav li:hover ul ul ul ul{
display:none;
}
#top .nav li:hover ul, #top .nav li li:hover ul, #top .nav li li li:hover ul, #top .nav li li li li:hover ul{
display:block;
}

#top .nav li ul a{
border-top:none;
}

/*navigation categories*/
.catnav{
position: relative;
list-style-type: none;
list-style-position: outside;
margin:0;
width:956px;
float: left;
z-index: 4;
}

.catnav_wrapper{
position: relative;

width:958px;
float: left;
line-height:50px;
z-index: 4;
}

.catnav li a{
display:block;
float:left;
padding:13px 10px 20px 10px;
/*width:114px;*/
border: none;
text-decoration: none;
line-height: 17px;
outline: none;
min-height:30px;
}

.catnav li a strong{
display:block;
font-weight: bold;
font-size: 14px;
}

.catnav li li a strong {
display:inline;
font-size:12px;
font-weight:normal;
}

.catnav li a span{
display:block;
font-size: 10px;

}

.catnav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
z-index:5;
}

#top .catnav ul a{
line-height:29px;
font-size: 12px;
cursor: pointer;
}

#top .catnav li{
float:left;
position:relative;
z-index:20;
margin-top:0;
}

#top .catnav li li{
border-right:none;
margin-top:0;
}

#top .catnav ul {
display:none;
position:absolute;
top:47px;/*changed the positioning of the drop down*/
width:325px;
left:-2px;
}

#top .catnav li ul a{
width:300px;
height:auto;
float:left;
text-align:left;
padding:0 10px;
}

#top .catnav ul ul{
top:auto;
border-top:none;
}

#top .catnav li ul ul {
left:171px;
top:-1px;
}

#top .catnav li:hover ul ul, #top .catnav li:hover ul ul ul,#top .catnav li:hover ul ul ul ul{
display:none;
}
#top .catnav li:hover ul, #top .catnav li li:hover ul, #top .catnav li li li:hover ul, #top .catnav li li li li:hover ul{
display:block;
}

#top .catnav li ul a{
border-top:none;
}

#top .catnav .noborder, #top .catnav .noborder a{
border:none;
}

Please help!
Thanks
Srishti

Posted 1 year ago #

Dude
Dude

Hey,
in style.css search for following code:

.nav_wrapper{
position: relative;
height:36px;
padding-top:196px;/*280px;*/
z-index: 6;
}

and change it to:

.nav_wrapper{
position: relative;
height:36px;
padding-top:196px;/*280px;*/
z-index: 20;
}

Posted 1 year ago #

c_srishti
Member

Worked beautifully! Thanks!!!! :D

Posted 1 year ago #
Dude
Dude

Glad that I could help you :)

Posted 1 year ago #
c_srishti
Member

Hey Dude,
Changing hte z-index worked so the menus were showing up great, but I noticed that:
-> the cursor in the rest of the header area has just become a text cursor. The search box has the Default cursor.

-> The "logo", the "search box", "social media icons" are all unclickable. Can't even type in the search box.

I have not changed any css for z-index or cursors except the one you told me to change above for nav_wrapper.

Please help!
Thanks
Srishti

Posted 1 year ago #
Dude
Dude
The only chance to sole the cursor issue is to move the menu downwards (or you can decrease the logo size). The reason is that the menu overlaps the logo which causes the cursor to change. You can change following code in style.css to push the menu downwards - cange the padding top value:
```
.nav_wrapper{
font-family: Arial, Helevtica, Verdana, san-serif;
position: relative;
height:36px;
padding-top:196px;/*280px;*/
z-index: 20;
}
```
Posted 1 year ago #
c_srishti
Member

thanks Dude!!!!
I changed the positioing of the logo and changed the z-index of nav_wrapper back to 6. It looks much better now.
#top .logo, #top .logo a{
display:block;
height:137px;
width:485px;
position:absolute;
left:122px;
top:16px;
border: none;
padding: 0;
margin:0;
z-index: 10;
}

I see text icon on both sides of the logo but the logo is clickable now and the search box is functional!
:) so it's good enough for now~~ :)

Posted 1 year ago #
Dude
Dude

Glad that it works now :)

Posted 1 year ago #