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
  • 113 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by umeshMCA

Dani AI

Generated

Brief summary and a robust fix (builds on 's quick tip)

The symptom you saw (submenu items shifted over with a big left gap) is usually the browser's default list spacing plus the submenu not being positioned relative to its parent. 's suggestion removed the immediate spacing, which is why it resolved the visible problem for . For a reliable layout that doesn't depend on UA defaults, make the submenu anchor to its parent LI and reset spacing that browsers add by default. For background on how absolute positioning is anchored, see the MDN position docs Position - MDN and for why lists are indented by default see the user-agent stylesheet notes .

Apply a small set of rules so each dropdown sits directly under its parent and sub-items stack correctly:

#TWSMenu li { position: relative; }

#TWSMenu li > ul {
  left: 0;
  top: 100%;
  margin: 0;
}

#TWSMenu li > ul > li { float: none; }

#TWSMenu li > a { white-space: nowrap; }

Troubleshooting tips: use the browser inspector to view computed margin/padding and the containing block for the submenu (check which ancestor has a non-static position). Keep top-level floats limited using the child selector (>) so nested lists are unaffected. For accessibility, ensure submenus can be opened with keyboard focus (consider :focus-within or adding ARIA states in JS).

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.