Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need Help with Horizontal Menu with Accordion Submenu

Discussion in 'CSS' started by vinxxv, Aug 19, 2014.

0
  1. #1
    Hi all...

    I just want to ask if you know a horizontal menu similar to the image that I have attached.

    Thanks in advance :)

    Regards.
     

    Attached Files:

    vinxxv, Aug 19, 2014 IP
  2. AlbCoder

    AlbCoder Well-Known Member

    Messages:
    126
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    163
    #2 
    <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>MENU</title>
    <style>
body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #fff;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 10px 4px 12px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 8px 12px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  color: #5F8FF9;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 36px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li {
  border:1px solid #fff;
  background: #5F8FF9;
  display: block;
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #2760DE; }
ul li:hover ul {
  color:#fff;
  display: block;
  opacity: 1;
  visibility: visible;
}

    </style>
</head>
<body>
<ul><li>Home</li>
  <li>About US</li>
  <li>
    Services
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
  </li>
  <li>Blog</li>
  <li>Contact US</li>
</ul>

</body>
</html>
    HTML:
     
    AlbCoder, Aug 19, 2014 IP
  3. carrieathomer

    carrieathomer Greenhorn

    Messages:
    108
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    18
    #3
    looks like the superfish menu, but y don't you try cssmenumaker.com/ it has all the menu you are looking for.. cheers
     
    carrieathomer, Aug 25, 2014 IP