0

hi,
i create a menu and code is below:

<title>Untitled Document</title>
<style type="text/css">
/* Structure
------------------------------------------*/

#TWSMenu,
#TWSMenu ul {
    list-style: none;
}
#TWSMenu {
    float: left;
}
#TWSMenu > li {
    float: left;
}
#TWSMenu li a {
display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#TWSMenu ul {
    position: absolute;
    display: none;
z-index: 999;
}
#TWSMenu ul li a {
    width: 80px;
}
#TWSMenu li:hover ul.udJS {
    display: block;
}
/* Main menu
------------------------------------------*/
#TWSMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
}
#TWSMenu > li > a {
    color: #fff;
    font-weight: bold;
}
#TWSMenu > li:hover > a {
    background: #f09d28;
    color: #000;
}

/* Submenu
------------------------------------------*/
#TWSMenu ul {
    background: #f09d28;
}
#TWSMenu ul li a {
    color: #000;
}
#TWSMenu ul li:hover a {
    background: #ffc97c;
}
/* for effect----------------------------------*/

$(function(){
    $('#TWSMenu').find('> li').hover(function(){
        $(this).find('ul')
        .removeClass('udJS')
        .stop(true, true).slideToggle('fast');
    });
});

</style>
</head>

<body>
    <ul id="TWSMenu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Downloads</a>
            <ul class="udJS">
                <li><a href="#">Form</a></li>
                <li><a href="#">Prospectus</a></li>
                <li><a href="#">Papers</a></li>
                <li><a href="#">Syllabus</a></li>
            </ul>
        </li>
        <li><a href="#">Courses</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>

</body>
</html>

i have problem in this menu is that sub-menu will show like nested list. means there is lot of space before showing submenu like

home  about Us   download   courses    contact us
                        form
                        paper
                        syllabus 

how to solve this problem.

thanks

Edited by Dani: Formatting fixed

2
Contributors
3
Replies
4
Views
6 Years
Discussion Span
Last Post by umeshMCA
0

insert into #TWSMenu ul a padding:0; style ;) and you're good to go

Thanks its working properly
thank you very much

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.