CODEWITHSUNDEEP
htmlcss
Niki
Niki

Reputation: 43

How to create dropdown navigationbar without float?

How to create dropdown navigationbar without using float?? I tried but I am little bit far from my answer, My code is as below ##

HTML

<div id="nav">
<ul>
    <li><a href="#Animals">Animals</a></li>
    <li><a href="#birdes">Birds</a></li>
    <li><a href="#vegetables">Vegetables</a>
        <ul>
            <li><a href="#">Okra</a></li>
            <li><a href="#">Runner Beans</a></li>
            <li><a href="#">Pumkin</a></li>
        </ul>
    </li>
    <li><a href="#fruits">Fruits</a>
        <ul>
            <li><a href="#">Apple</a></li>
            <li><a href="#">Banana</a></li>
            <li><a href="#">Orange</a></li>
            <li><a href="#">Lemom</a></li>
        </ul>
    </li>
</ul>

CSS

#nav{width:100%;}
#nav ul{list-style-type:none; margin:0; padding:0; background-color:#9900CC;}
#nav ul li{display:inline;}
#nav ul li a{color:#ffffff; text-decoration:none; display:inline-block; padding:15px; font-weight:700;}
#nav ul li a:hover{background-color:#5F6975;}
#nav ul ul{position:absolute; background:#5F6975; display:none;}
#nav ul li:hover > ul{display:block;}
#nav li ul li{display:block;}

Please help me....

Upvotes: 2

Views: 405

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You can use positioning and inline-block:

* {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none;}

#nav > ul > li {display: inline-block; position: relative; width: 100px; padding: 5px;}
#nav > ul > li ul {position: absolute; display: none;}
#nav > ul > li:hover ul {display: block; border: 1px solid #ccc; width: 100px; padding: 5px;}
#nav a {display: block;}
<div id="nav">
  <ul>
    <li><a href="#Animals">Animals</a></li>
    <li><a href="#birdes">Birds</a></li>
    <li><a href="#vegetables">Vegetables</a>
      <ul>
        <li><a href="#">Okra</a></li>
        <li><a href="#">Runner Beans</a></li>
        <li><a href="#">Pumkin</a></li>
      </ul>
    </li>
    <li><a href="#fruits">Fruits</a>
      <ul>
        <li><a href="#">Apple</a></li>
        <li><a href="#">Banana</a></li>
        <li><a href="#">Orange</a></li>
        <li><a href="#">Lemom</a></li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 5

Related Questions