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

also remember to insert border:0 none;

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

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

Thanks its working properly
thank you very much

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.