Kwa wale wataalamu wa css na HTML

mkongoraa · Sep 29, 2014

Nimetengeneza DROPDOWN MENU kwenye website yangu kwa kutumia html na css. laikini cha ajabu kila kitu kinaenda sawa ila nikipeleka mouse pale kwenye link ambayo nimeiwekea dropdown menu hakuna kinachotokea(yaani dropdown menu hazijitokezi).

Nime-preview kwenye browser mbili tofuati lakini hamna mabadiliko. Kama kuna mwenye idea ya jambo hili msaada tafadhali...!!

HTML CODES
<!DOCTYPE html>
<html>
<head>
<link href="style0.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DROP DOWN MENU</title>
</head>

<body bgcolor="#FF9900">
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">Sports</a></li>
<ul>
<li><a href="#">BASKETBALL</a></li>
<LI><a href="#">FOOTBALL</a>
<ul>
<li><a href="#">SIMBA</a></li>
<li><a href="#">YANGA</a></li>
<li><a href="#">AZAM</a></li>
</ul>
</LI>
<li><a href="#">TENNIS</a></li>
</ul>
<li><a href="#">aboutus</a></li>

<li><a href="#">gallery</a></li>
<li><a href="#">competition</a></li>
</ul>
</nav>
</body>
</html>

CSS STYLING
Charset "utf-8";
/* CSS Document */

body{
font-family:Arial, Helvetica, sans-serif;
}
nav ul ul{
display:none;}
nav ul li:hover > ul {
display:block;
}
nav li:hover > ul {
display:block;}
nav ul{
background: #efefef ;
background: linear-gradient( top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position:relative;
display: inline-table;
}
nav ul:after {
content: "", clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover{
background: #4b545f ;
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a{
color:#fff ;
}
nav ul li a{
display: block;
padding: 25px 40px;
color:#757575;
text-decoration: none;
}
nav ul ul{
background:#5f6975 ;
border-radius: 0px;
padding:0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c ;
border-bottom: 1px solid #576f7a ;
position: relative;
}
nav ul ul li a{
padding: 15px 40px;
color: #fff ;
}
nav ul ul li a:hover{
background: #4b545f ;
visibility:visible;
}
nav ul ul ul{
position: absolute; left: 100%; top:0;
}

BROWSER PREVIEW FIREFOX N IE

nav ul ul{
display:none;}
Kwenye display nikiweka display visible iakuwa hivi.

ttkMpmeb5IAAABgxsUJ4P8D6IjOuqsqyAgAAAAASUVORK5CYII=

na hivo ndio nataka itokee ukiweka mouse kwenye sports navigation.

Sheeba · Sep 29, 2014

itakuwa umekosea, weka codes zako hapa tuone

upendodaima · Sep 29, 2014

weka code tuchek,penye makosa pataeditiwa.

zech · Sep 29, 2014

mkongoraa HTML Markup should be like this

Code:

<ul>
  <li class="has-dropdown">
    <a href="#">Mouse Over to Show Dropdown</a>
    <ul class="will-drop">
      <li><a href="#">Drop Down 1</a></li>
      <li><a href="#">Drop Down 2</a></li>
      <li><a href="#">Drop Down 3</a></li>
    </ul>
  </li>
  <ul>

CSS Styling

Code:

ul li{
  position: relative;
}
ul.will-drop{
  display: none;
  visibility: hidden;
  position: absolute;
}
 li.has-dropdown:hover > ul {
    visibility: visible;
    display: block;
}

I added class names to make it much easier to understand but you could also do it without adding those classes however i'd advice against it because at some point when you need to add more styling like indicating the current class, or adding a "+" icon for those list items with drop-downs you will need those classes.

Position: If you want an element's child to be positioned within that element then the the parent element's css positioning should be set to relative while the child's css position property should be set to absolute i blogged about this HERE if you need a refresher on css relative and absolute positioning

Take a look here for a sample site

mkongoraa · Sep 29, 2014

Sheeba said:
itakuwa umekosea, weka codes zako hapa tuone

kaka ingia tena nimeshaweka hizo code nilizotumia...

mkongoraa · Sep 29, 2014

upendodaima said:
weka code tuchek,penye makosa pataeditiwa.

upendodaima onyesha upendo wako hapo nishatupia code niambie nilipokosea mkuu. Nashkuru kwa msaada.

zech · Sep 29, 2014

mkongoraa, Try this

Code:

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>DROP DOWN MENU</title>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">Basketball</a></li>
                <li><a href="#">Football</a>
                    <ul>
                        <li><a href="#">Simba</a></li>
                        <li><a href="#">Yanga</a></li>
                        <li><a href="#">Azam</a></li>
                    </ul>
                </li>
                <li><a href="#">Tennis</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Competition</a></li>
            </ul>
        </nav>
    </body>
</html>

& CSS

Code:

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #FF9900;
}
nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
}
nav li:hover > ul {
  display: block;
}
nav ul {
  background: #efefef;
  background: linear-gradient( top, #efefef 0%, #bbbbbb 100%);
  background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
  background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
  padding: 0 20px;
  border-radius: 10px;
  list-style: none;
  position: relative;
  display: inline-table;
}
nav ul:after {
  content: "", clear:both;
  display: block;
}
nav ul li {
  float: left;
}
nav ul li:hover {
  background: #4b545f;
  background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%);
}
nav ul li:hover a {
  color: #fff;
}
nav ul li a {
  display: block;
  padding: 25px 40px;
  color: #757575;
  text-decoration: none;
}
nav ul ul {
  background: #5f6975;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
}
nav ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #576f7a;
  position: relative;
}
nav ul ul li a {
  padding: 15px 40px;
  color: #fff;
}
nav ul ul li a:hover {
  background: #4b545f;
  visibility: visible;
}
nav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

Problem is here

Code:

[COLOR=#333333]<li><a href="#">Sports</a></li>[/COLOR]
[COLOR=#333333]<ul>[/COLOR]

See the second line you have another <ul>, that is not required, just remove that don't forget </ul> but leave all the list items

mkongoraa · Sep 29, 2014

zech nimekusoma ila nilivyokuwa nataka mimi kuwe na menu(sports) then sub menu(football, basketball n tennis) then sub sub menu of football(yanga simba azam).

Sheeba · Sep 29, 2014

tatizo ni hapo kwenye red, after sports ondoa hiyo </li> because you are creating a nested list so utafunga hiyo tag mwishoni(baada ya kumaliza hiyo nested list). Ukifanya the html as shown(hiyo hapo nimeicorrect tayari) inaonyesha properly, the css is fine

<!DOCTYPE html>
<html>
<head>
<link href="style0.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DROP DOWN MENU</title>
</head>

<body bgcolor="#FF9900">
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">Sports</a>
<ul>
<li><a href="#">BASKETBALL</a></li>
<LI><a href="#">FOOTBALL</a>
<ul>
<li><a href="#">SIMBA</a></li>
<li><a href="#">YANGA</a></li>
<li><a href="#">AZAM</a></li>
</ul>
</LI>
<li><a href="#">TENNIS</a></li>
</ul>
</li>
</li>
<li><a href="#">aboutus</a></li>

<li><a href="#">gallery</a></li>
<li><a href="#">competition</a></li>
</ul>
</nav>
</body>
</html>

zech · Sep 29, 2014

Then just nest them under the ul like this

Code:

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>DROP DOWN MENU</title>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Sports</a>
                    <ul>
                        <li><a href="#">Basketball</a></li>
                        <li><a href="#">Football</a>
                            <ul>
                                <li><a href="#">Simba</a></li>
                                <li><a href="#">Yanga</a></li>
                                <li><a href="#">Azam</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Tennis</a></li>
                    </ul>
                </li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Competition</a></li>
            </ul>
        </nav>
    </body>
</html>

mkongoraa · Sep 29, 2014

Thanks brothers zech, sheeba na upendodaima....nimefanikiwa kwa asilimia 100...!!! Pamoja wakuu.

zech · Sep 29, 2014

No problem, just one more thing, don't write inline css styles unless you absolutely have a reason to do so. CSS and HTML should never be mixed up unless you have all the reasons to do so, that's why i moved bgcolor from the body tag to its corresponding css declaration.

mkongoraa · Sep 29, 2014

Nimekusoma brother...!!!!

Our Community

Coming Soon

Regional Communities

Kwa wale wataalamu wa css na HTML

mkongoraa

Member

Attachments

Sheeba

Member

upendodaima

JF-Expert Member

zech

JF-Expert Member

mkongoraa

Member

mkongoraa

Member

zech

JF-Expert Member

mkongoraa

Member

Sheeba

Member

zech

JF-Expert Member

mkongoraa

Member

zech

JF-Expert Member

mkongoraa

Member

Similar Discussions

Our Community

Coming Soon

Regional Communities