Member Avatar for umeshMCA

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 because: Formatting fixed
  • 2 Contributors
  • 3 Replies
  • 105 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by umeshMCA
Member Avatar for matricol

also remember to insert border:0 none;

Member Avatar for matricol

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

Member Avatar for umeshMCA

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.