Member Avatar for amritanshu93

Hi Everyone,

I am a fresher in web development & want to create Menu Bar with the help of Drop Down function. I need the coding in CSS with a little bit help of HTML program. Plz any one help me to solve my prob.

  • 2 Contributors
  • 4 Replies
  • 268 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Quick diagnosis for : the menu "not staying" is usually caused by broken HTML and missing positioning rules. In your posted markup there are unclosed/truncated tags (the stray "&lt;/"), a deprecated <font> tag and no guarantee the parent li is positioned. Fix the markup first, then use CSS to position the submenu absolutely relative to the parent.

Example (replace your current menu markup with semantic anchors and a CSS-only dropdown):

<nav id="menu">
  <ul class="menu">
    <li>
      <a href="#">About Expinfo</a>
      <ul class="submenu">
        <li><a href="#">Leadership</a></li>
        <li><a href="#">Solution Partners</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Certification</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Service/Products</a>
      <ul class="submenu">
        <li><a href="#">Technology Consulting</a></li>
        <li><a href="#">Enterprise App. Development</a></li>
        <li><a href="#">System Integration</a></li>
        <li><a href="#">Data Management</a></li>
      </ul>
    </li>
  </ul>
</nav>
#menu .menu { list-style:none; margin:0; padding:0; display:flex; }
#menu .menu > li { position:relative; }
#menu .menu > li > a { display:block; padding:10px 14px; color:#fff; text-decoration:none; }
#menu .submenu { display:none; position:absolute; top:100%; left:0; background:#fff; min-width:160px; z-index:1000; box-shadow:0 2px 4px rgba(0,0,0,0.15); }
#menu .menu > li:hover > .submenu,
#menu .menu > li:focus-within > .submenu { display:block; }
#menu .submenu li a { display:block; padding:8px 12px; color:#333; white-space:nowrap; text-decoration:none; }

Quick checklist and tips:

  • Validate and fix HTML (unclosed tags break layout).
  • Don’t use <font>; use CSS color instead.
  • Ensure the ancestor containers do not have overflow:hidden (that will clip the dropdown).
  • Set the parent li to position:relative and the submenu to position:absolute; use z-index if the submenu sits behind other elements.
  • For touch/keyboard support add a small JS toggle to add/remove an "open" class; :focus-within helps for keyboard users.

As suggested, CSS-only menus work fine for simple cases; add a tiny bit of JS if you need animations or better touch support.

Recommended Answers

All 4 Replies

Member Avatar for Member #120589

You should try google. Otherwise, post what code you have and we'll have a look at it. This is a help forum not a code-for-free joint.

Member Avatar for amritanshu93

I am Using the below code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <link type="text/css" href="menu.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>

<body>
<style type="text/css">
* { margin:0;
    padding:0;
}
body { background:rgb(74,81,85); }
div#menu { margin:50px auto; }

</style>

<h4>
<div>
</div>
<div id="menu">
<ul class="menu"><font color="#FFFFFF">
    <li class="parent"><span>About Expinfo</span>
        <ul>
            <li>Leadership</li>
            <li>Solution Partners</li>
            <li>Clients</li>
            <li>certification</li>
        </ul>
    </li>

    <li class="parent"><span>Service/Products</span>
        <ul>
            <li>Technology Consulting</li>
            <li>Enterprise App. Development</li>
            <li>System Integration</li>
            <li>Data Management</li>
         </ul>
    </li>
</ul></
</div>



</body>
</html>
Edited by Nick Evan because: Fixed formatting
Member Avatar for amritanshu93

now problem is that the list I creat it not stay on page....

Member Avatar for Member #120589

OK, this is because your CSS needs modifying. Have a look at jQuery and various dropdowns. CSS Lists also have good examples.

My personal favourites can be found here: http://www.lwis.net/free-css-drop-down-menu/

Edited by Member #120589 because: n/a
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.