CODEWITHSUNDEEP
htmlcss
frantsium
frantsium

Reputation: 155

dropdown menu without borders

I want to do one small and easy dropdown menu, but I dont get it how to do this.

What I exacly mean ? :

enter image description here

And I want to do this thisway: If u click on ENG then its going to index_eng.html, but its not working.

My html:

    <nav id="menu2">
        <select>
            <option href="index.html" value="est">EST</option>
            <option href="index_eng.html" value="eng">ENG</option>
        </select>
    </nav>

My css:

#menu2 { 
    height: 30px;
    overflow: visible;
    border-radius: 5px;
    background-color: #484848;
    color: #FFFFFF;
    padding: 5px 5px 0px 5px;
    margin: 5px 5px 5px 5px;
    font: 8pt verdana, arial, sans-serif;
}

At the moment I have this menu like this, but I want it like this picture above. enter image description here

Need some clue or solution. Thank you!

Upvotes: 0

Views: 1950

Answers (4)

user2876637
user2876637

Reputation:

This is very simple CSS3 drop-down menu:

Demo: http://jsfiddle.net/ahqbbwbm/11/

HTML

<ul>
  <li>
    EST <span class="arrow-down"></span>
    <ul>
      <li><a href="index.html">EST</a></li>
      <li><a href="index_eng.html">ENG</a></li>
    </ul>
  </li>
</ul>

CSS

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #2980b9;
  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;
  color: #fff;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  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 {
  min-width: 80px;
  background-color: #555;
}
ul li ul li > a { 
  text-decoration: none;
  display: block; 
  color: #fff;
}
ul li ul li:hover {
    background: #666;
}
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
ul li > span {
    display: inline-block;
    margin: 0 0 -3px 5px;
    width: 12px;
    height: 12px;
    background-image: url('https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-24.png'); /* Change this */
    background-size: 12px 12px;
}

Upvotes: 1

Lokeswaraswamy Gubba
Lokeswaraswamy Gubba

Reputation: 56

Below is the example for simple pure CSS Drop Down Menu..

HTML

<nav id="primary">
    <ul>

      <li><a href="#">Menu 1</a>
        <ul>
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li><a href="#">Sub Menu 4</a>
            <ul>
              <li><a href="#">Deep Menu 1</a>

              </li>
              <li><a href="#">Deep Menu 2</a></li>
            </ul>
          </li>
          <li><a href="#">Sub Menu 5</a></li>
        </ul>
      </li>

    </ul>

CSS

 #primary
    {
        margin-top:15px
    }

    #primary ul
    {
        list-style:none;
        position:relative;
        float:left;
        margin:0;
        padding:0
    }

    #primary ul a
    {
        display:block;
        color:#333;
        text-decoration:none;
        font-weight:700;
        font-size:12px;
        line-height:32px;
        padding:0 15px;
        font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
    }

    #primary ul li
    {
        position:relative;
        float:left;
        margin:0;
        padding:0
    }

    #primary ul li.current-menu-item
    {
        background:#ddd
    }

    #primary ul li:hover
    {
        background:#f6f6f6
    }

    #primary ul ul
    {
        display:none;
        position:absolute;
        top:100%;
        left:0;
        background:#fff;
        padding:0
    }

    #primary ul ul li
    {
        float:none;
        width:200px
    }

    #primary ul ul a
    {
        line-height:120%;
        padding:10px 15px
    }

    #primary ul ul ul
    {
        top:0;
        left:100%
    }

    #primary ul li:hover > ul
    {
        display:block
    }

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

Why don't you use anchors?

<nav id="menu2">
    <ul>
       <li><a href="index.html">EST</a></li>
       <li><a href="index_eng.html">ENG</a></li>
    </ul>        
</nav>

If you do not want to use anchors, you can achieve navigation with jQuery:

$('option').click(function() {
    var url = $(this).attr('href');
    window.location = url;
});

Try this if the above does not work:

    window.location.assign(url);

Upvotes: 2

Prashant
Prashant

Reputation: 704

http://jsfiddle.net/yf18w6ay/

css

select{
    border:0px;
    outline:0px;
}

Upvotes: 0

Related Questions