CODEWITHSUNDEEP
csshover
maha2
maha2

Reputation: 23

How to make child menu items appear on hover?

I have an issue with this site made under Wolf CMS. I dont know what happened, but the menu child items are not showing anymore!. Cant understand why when I add CSS to allow the display and style it, it doesn't work! I dont see JavaScript code affecting it..maybe I'm missing something can somebody advice??

http://goo.gl/PE238a

All the code via CSS i try to apply wont make any effect...

I cant figure out why my css wont render what I need to see...

#team-nav li {
  background: none repeat scroll 0 0 red !important;
  height: 100px !important;
  left: 1px !important;
  position: absolute !important;
  top: 1px !important;
  width: 100px !important;
}

I tried to position absolute and opacity 10 but wont work :(

At the wayback machine http://goo.gl/hYhuHB i can see the working menu in a captured page of the site.... but there is so much addded code that I get confused..

Upvotes: 0

Views: 115

Answers (1)

Benjamin
Benjamin

Reputation: 2670

You need to add the following style to your #nav 

#nav {
position: relative;
z-index: 3;
float: left;
margin: 0;
border-bottom: solid 1px #ccc;
width: 700px;
padding-top: 100px;
overflow: initial;<-- Added
}

Since your overflow is hidden and you #nav is position:relative; the submenu which overflows your #nav cannot be displayed. Try the above code that works like a charm. You can also add overflow:visible;

NOTE: Your mobile.css inherits the values of your screen.css. #menu, #nav{overflow:hidden} so your screen.css has to change with #nav{overflow:visible}

Upvotes: 1

Related Questions