vertical sub menu css help plz?

Question

4.33/5 (3 votes)

See more:

, +

Please help ...this is my html menu

XML

<div id="content">
  <div class="navigation" id="nav">
    <div class="item user">
            <img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
            <a href="#" class="icon"></a>
            <h2>Sign In</h2>
            <ul>
            <li><a href="#">Like Us</a></li>
            <li><a href="#">Share</a>
            <ul id="menu">
            <li><a href="#">mother</a></li>
            <li><a href="#">father</a></li>
            <li><a href="#">brother</a></li>
            <li><a href="#">sister</a></li>
            <li><a href="#">couzin</a></li>
            <li><a href="#">uncle</a></li>
            </ul>

                </li>
                <li><a href="#">Tell</a></li>
            </ul>
      </div

and this is my css for my menu:

CSS

}
.item ul{
    list-style:none;
    position:absolute;
    top:60px;
    left:25px;
    display:none;
}
.item ul li a{
    font-size:15px;
    text-decoration:none;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#222;
    padding:3px;
    float:left;
    clear:both;
    width:100px;
    text-shadow:1px 1px 1px #fff;
}
.item ul li a:hover{
    background-color:#424242;
    color:#fff;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
}
.item li:hover ul, li.over ul{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    position:absolute;
    left: 110px;
    top: 0;
    display: none;
    }

the thing is that i'm using a javascript to fade in main menu items but the sub menu items also fade in with the main menu making it awkward...i want the sub menu items to appear when mouse hovered over the main menu items...please help...

and yes here is the javascript:

XML

<script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#nav > div').hover(
                function () {
                    var $this = $(this);
                    $this.find('img').stop().animate({
                        'width'     :'199px',
                        'height'    :'199px',
                        'top'       :'-25px',
                        'left'      :'-25px',
                        'opacity'   :'1.0'
                    },500,'easeOutBack',function(){
                        $(this).parent().find('ul').fadeIn(700);
                    });
                    $this.find('a:first,h2').addClass('active');
                },
                function () {
                    var $this = $(this);
                    $this.find('ul').fadeOut(500);
                    $this.find('img').stop().animate({
                        'width'     :'52px',
                        'height'    :'52px',
                        'top'       :'0px',
                        'left'      :'0px',
                        'opacity'   :'0.1'
                    },5000,'easeOutBack');
                    $this.find('a:first,h2').removeClass('active');
                }
            );
            });
        </script>

ANY help would be Much Appreciated.
Thanks in advance......:)

Posted 13-Jun-11 20:15pm

abdulmaajid

Updated 19-Jun-11 7:14am

v3

Add a Solution

Comments

Morl99 14-Jun-11 5:02am

Your "DEMO" Link points to this discussion.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ed Nutting · Answer 1 · 2011-06-14T09:28:00

I have solved this one myself recently but it depends very much on your situation. I will give you the following pointers:

1) ~~No JavaScript is required~~Edit: Having had a look at demo, the fading requires javascript, the basic concept of a vertical menu that displays items below it does not (and same for horizontal menu).
2) Look at the following CSS selector: http://www.w3schools.com/css/sel_element_gt.asp[^] - It will allow you to create an invisible wrapper for your menu with one item showing that then lets the user hover over it and then the rest of the items appear. CSS something like:

CSS

.MenuWrapper 
{
    /*Transparent background or whatever*/
}
.MenuItem
{
    /*Whatever styles*/
    display:none;
}
.MenuWrapper:hover>MenuItem
{
    display:inherit;
}

Hope this helps,

Ed :)

P.s. If I can find it, I will post my CSS/HTML soon :)

My code that I used recently:

HTML

<div class="MenuItemWrapper">
    <a class="MenuItem" href="?Page=Home">
        Home</a>
    <div class="MenuItemSubLinksWrapper" runat="server" id="HomeSubLinks">
        <div class="MenuItemSubLinkSeperator"></div>
        <a class="MenuItemSubLink" href="?Page=Latest News">
            Latest News</a>
        <div class="MenuItemSubLinkSeperator"></div>
    </div>
</div>
       
<div class="MenuItemWrapper" runat="server" id="LoginLinks">
    <a class="MenuItem" href="?Page=Login">
        Sign In</a>
    </div>
    <div class="MenuItemWrapper" runat="server" id="AccountLinks" visible="false">
        <a class="MenuItem" href="?Page=My Account">
            My Account</a>
        <div class="MenuItemSubLinksWrapper" runat="server" id="Div1">
        <div class="MenuItemSubLinkSeperator"></div>
            <a class="MenuItemSubLink" href="?Page=Logout">
                Sign Out</a>
            <div class="MenuItemSubLinkSeperator"></div>
        </div>
    </div>
                    
    <div class="MenuItemWrapper" runat="server" id="SignUpLinks">
        <a class="MenuItem" href="?Page=Sign Up">
            Sign Up</a>
    </div>
</div>

CSS

/*Menu Item Wrappers*/
.MenuItemWrapper
{
	position:relative;
	min-width:120px;
	width:5%;
	max-width:150px;
	float:left;
	/*background-color:#70B8E6;*/
	margin-left:0px;
	height:100%;
	text-align:center;
	
	border-left:#F1F1F1 1px solid;
	border-right:#F1F1F1 1px solid;
	z-index:5;
}
.MenuItemWrapper:hover
{
	/*background-color:#578FB3;*/
}

/*Menu Item Styles*/
.MenuItem
{
	position:relative;
	background-color:Transparent;
	z-index:2;
	font-size:large;
	top:5px;
	color:#FFFFFF;
	text-align:center;
	z-index:inherit;
}
.MenuItem:hover
{
	font-weight:bold;
	color:#CCCCCC;
}
/*Here is the key bit! The parent selector! - element>element as W3Schools puts it.*/
.MenuItemWrapper:hover>div
{
	display:block;
}
/*Menu Sub Link Wrappers*/
.MenuItemSubLinksWrapper
{
	position:absolute;
	
	font-size:medium;
	min-height:100%;
	min-width:100%;
	display:none;
	z-index:1;
	
	background-color:#f1f1f1;
	border:solid 1px #000000;
	
	left:0px;
	top:30px;
	z-index:inherit;
}

/*Menu Sub Link Seperator*/
.MenuItemSubLinkSeperator
{
	line-height:10px;
	font-size:10px;
	height:10px;
}

/*Menu Sub Link*/
.MenuItemSubLink
{
	position:relative;
		
	padding-left:5px;
	padding-right:5px;
	padding-top:0px;
	padding-bottom:3px;
	
	width:100%;
	
	color:#06334F;
	z-index:inherit;
}
.MenuItemSubLink:hover
{
	font-weight:bold;
	color:#0C141A;	
}

You will need, probably, to fiddle with the styling on the MenuItemWrapper class to get correct widths and positioning for your menu/menu items. Also, for varying font-sizes, remember to change the 'top:30px;' value in MenuItemSubLinksWrapper. This menu style will only go one level deep.