CODEWITHSUNDEEP
phphtmlcssnavbar
Skiletro
Skiletro

Reputation: 29

How to create a drop down menu for a nav bar in HTML/PHP?

I'm currently trying to expand on my nav bar by adding a drop-down menu. I've tried everything, but nothing seems to be working. Is there any way for me to add drop-down functionality without having to re-create my entire nav bar?

div.content a:link {
  color: #000000;
  text-decoration: normal;
}
div.content a:visited {
  color: #000000;
  text-decoration: normal;
}
div.content a:hover {
  color: #383838;
  text-decoration: normal;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}
div.content a:active {
  color: #000000;
  text-decoration: normal;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #595959;
  max-width: 950px;
  min-width: 900px;
  margin: auto;
  box-shadow: 0px 0px 5px #000000;
  margin-bottom: 15px;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  font-style: normal;
  padding: 14px 16px;
  text-decoration: none;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}
li a:hover {
  background-color: #404040;
}
<div class="nav">
  <ul>
    <li><a href="/">Home</a>
    </li>
    <li><a href=";insertyoutubechannel;">YouTube</a>
    </li>
    <li><a href=";inserttwitter;">Twitter</a>
    </li>
    <li><a href="/services">Services</a>
    </li>
    <li><a href="/contact">Contact</a>
    </li>
  </ul>
</div>

Upvotes: 1

Views: 2193

Answers (1)

zfj3ub94rf576hc4eegm
zfj3ub94rf576hc4eegm

Reputation: 1273

Unless you're trying to teach yourself, don't reinvent the wheel.

Link 1

Link 2

<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
  <li class="pure-dropdown">
      <a href="#">Test1</a>
      <ul>
        <li><a href="#.asp">Test2</a></li>
        <li class="pure-menu-separator"></li>
        <li><a href="#.asp">Test3</a></li>
      </ul>
     </li>               
     <li class="pure-dropdown">
       <a href="#">Test1</a>
       <ul>
       <li><a href="#">Test2</a></li>
       <li><a href="#">Test3</a></li>
       <li><a href="#">Test4</a></li>
       <li><a href="#">Test5</a></li>
       </ul>
    </li>
</ul>
</div>

With CSS

@import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css");

.pure-menu-horizontal ul {
    padding:0;
    margin:0;
    font-weight: bold;
    width: 100%;
    position: relative;
    }

.pure-menu-horizontal ul li {
    float:left;
    position: relative;
    display: block;
    }

.pure-menu-horizontal ul li a {
    display:block;
}

.pure-menu-horizontal ul ul {
display: block;
position: absolute;
top: 35px;
}

.pure-menu-horizontal ul li:hover > ul {
display: list-item;
left: auto;
visibility: visible;
}

Link 3

Upvotes: 2

Related Questions