Css Navigation

webdork
webdork used Ask the Experts™
on
How can i hide my sub navigation except on mouse over?
How can i remove all graphics in my sub navigation?


http://bear2bullcoaching.com/who_we_are.asp
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jagadishwor DulalSenior Web Developer

Commented:
Your style sheet "css/gridtables.css is not added correctly. You don't have second level ul code like you are using all of the code in ul#global-menu li and your submenus are inside the ul#global-menu li ul. So you may add the sub menu style to hide the menu.or post your code and style

Author

Commented:
i don't understand 2nd level code. Can you expand?

I've removed the other css file as it was referenced in error.
Senior Web Developer
Commented:
Ok here I am posting a menu based on your code and I don't have completed all of the code just finished what you were looking for see the style sheet below:
#global-menu{
padding:0;
margin:0;
}
#global-menu ul{
padding:0;
margin:0;
}
#global-menu li{
position: relative;
font-weight:bold;
float: left;
list-style: none;
margin: 0;
padding:0;
} 
#global-menu li a{
width:178px;
height: 40px;
display: block;
text-decoration:none;
text-align: center;
line-height: 40px;
 background: url("../images/gobal-nav-bg-sprite-2.png") no-repeat scroll -178px 0 transparent;
color: #000000;
} 
#global-menu li a:hover{
background-position: 0 -40px;
} 
#global-menu ul ul{
position: absolute;
top: 30px; 
visibility: hidden;
} 
#global-menu ul li:hover ul{
visibility:visible;
} 

Open in new window


And your menu html will be :
<div id="global-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Meet Penny Pearl</a></li>
<li><a href="#">Core Values</a></li>
<li><a href="#">Consultation</a></li>
</ul>
</li>
<li><a href="#">Coaching</a>
<ul>
<li><a href="#">Sales & Customer Service</a></li>
<li><a href="#">Specialty Coaching</a></li>
<li><a href="#">Career Seeking Students</a></li>
<li><a href="#">Consultation</a></li>
</ul>
</li>
<li><a href="#">Review</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> 

Open in new window

OWASP Proactive Controls

Learn the most important control and control categories that every architect and developer should include in their projects.

Author

Commented:
thank you for your efforts on this. This code will hide the sub menu except on mouseover but the ul image carrys over to the subnav.
Jagadishwor DulalSenior Web Developer

Commented:
You can write a class for subnav to remove the background !!!!!!

Author

Commented:
thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial