dropdown menu without borders

Question

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!

So what's the problem : how to style the dropdown (like the title suggests), or how to redirect on choice ? See this question for second part : http://stackoverflow.com/questions/12287672/links-in-select-dropdown-options — AFract, Dec 30 '14 at 09:03

kapantzak · Answer 1 · 2014-12-30T09:34:17.157

2

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);

edited Dec 30 '14 at 09:34

answered Dec 30 '14 at 09:02

kapantzak

11,610
4
39
61

lol I dont know :D, thank you !, but I want it in dropdown menu and without borders ;) – frantsium Dec 30 '14 at 09:06
Which border you don't want? Please provide a working demo. In any case, to remove borders you can use css border:none – kapantzak Dec 30 '14 at 09:08
You are using a select list, not a drop down menu, which lets you choose the "option" url but doesn't run it in the browser. This answer is good because it is a list of links. Instead of writing your own drop down menus just use superfish: http://users.tpg.com.au/j_birch/plugins/superfish/examples/ – Nathaniel Flick Dec 30 '14 at 09:09
Yes, I want it to work like this: If I click option ENG, then its going index_eng.html and If I click option EST then its going index.html – frantsium Dec 30 '14 at 09:17
@frantsium check my edit in case you want to stick with options – kapantzak Dec 30 '14 at 09:22
@kapantzak its not working, I dont see the second option, and if I click on EST then its doing nothing. – frantsium Dec 30 '14 at 09:28
Do you get an error? If you are already in index.html, clicking EST will just refresh the page, so you may not understand that something happened – kapantzak Dec 30 '14 at 09:31
I added picture for you in question , this is what I have now – frantsium Dec 30 '14 at 09:37
Its working now, but this selecting style is not what I exacly need. – frantsium Dec 30 '14 at 09:40

score 1 · Accepted Answer · 2014-12-30T10:17:25.237

1

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;
}

edited Dec 30 '14 at 10:17

answered Dec 30 '14 at 09:18

Its nice, but I want it small and like this, like this picture in question. – frantsium Dec 30 '14 at 09:28
Something like this: http://jsfiddle.net/64gwobf8/? Please explain more specifically the problem. – Dec 30 '14 at 09:45
Yea, but without backround color – frantsium Dec 30 '14 at 09:48
just a text and this little arrow, and if I click EST then its going index.html and if I click ENG then its going index_eng.html – frantsium Dec 30 '14 at 09:49
I got what I want, but I dont like this arrow link there, is there any way to do this without links ? – frantsium Dec 30 '14 at 09:55
You should use http://fortawesome.github.io/Font-Awesome/. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Example: `` – Dec 30 '14 at 09:59
Okay, is there any way to show this language what I at the moment have. `EST ` this shows always EST, but is it possible, if I have ENG then its showing ENG – frantsium Dec 30 '14 at 10:05
If it redirects to another page, you can change HTML. Index.html dispalys EST and index_eng.html displays ENG. Simple. – Dec 30 '14 at 10:09

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

http://jsfiddle.net/yf18w6ay/

css

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 30 '14 at 09:09

Prashant

704
10
23

score 0 · Answer 4 · edited Dec 30 '14 at 09:38

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
    }

dropdown menu without borders

4 Answers4

css

HTML

CSS