Dropdown menu css

Question

Hello I have problem with dropdown menu... I'm trying to make a dropdown menu with my CSS code and I have no clue how to make it.

And here is the code:

#tabs {
  width: 100%;
  background: #F1F1F1;
  font-size: 93%;
  line-height: normal;
  float: right;
}

#tabs ul {
  margin: 0;
  padding: 10px 10px 0 220px;
  list-style: none;
}

#tabs li {
  display: inline;
  margin: 0;
  padding: 0;
}

#tabs a {
  margin: 0;
  padding: 6 0 0 4px;
  text-decoration: none;
}

#tabs a span {
  display: block;
  padding: 5px 15px 4px 6px;
  color: #FFF;
  background: #575757;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#tabs span {
  float: left;
  display: block;
  padding: 19px 15px 1px 12px;
  font-family: Arial "sans-serif";
}


/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabs a span {
  float: none;
}


/* End IE5-Mac hack */

#tabs a:hover span {
  color: #FFF;
}

<div id="tabs">
  <ul>
    <li><a href="#"><span>Domov</span></a></li>
    <li><a href="#"><span>test dropdown</span></a></li>
  </ul>
</div>

do u like bootstrap?..it would be easier in bootstrap..and make yours in responsive.. — Janen R
– Janen R, Commented Mar 6, 2017 at 19:54
@Jana yes i do but i want to create something new and i'd like to learn more about css :) so if someone just can help me how to make dropdown im gonna see — Hartman
– Hartman, Commented Mar 6, 2017 at 19:55
you have to put the display style as none(display:none) for your dropdown menus..When you hover on main menu the dropdown menus sholud be in block(display:block).....just try yourself based on this..i gives you clear understandings....it shows what you are searching.. w3schools.com/css/css_dropdowns.asp — Janen R
– Janen R, Commented Mar 6, 2017 at 19:58

Nisse Engström · Accepted Answer · 2017-03-06 22:47:56Z

The following will give you a drop-down menu with hover support and some basic formatting. It should be fairly self-explanatory for you to work through, but leave a comment if anything is unclear.

The basic idea is that the dropdown-content class hides the div containing the menu entries until you hover over the button representing the menu root (.dropbtn:hover).

Plain HTML and CSS.

.menuContainer {
    padding-left: 5px;
    padding-top: 5px;
    background-color: #cccccc;		
}   	

/* Dropdown Button */
.dropbtn {
    background-color: #808080;
    color: #000;
    border: solid black 1px;
    cursor: pointer;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75em;
    height: 2em;
    width: 110px;
    margin: 0px;
    margin-bottom: 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;		
}

.dropbtn:hover {
    background-color:#00F;
    color: #FFF;
    font-weight: bold;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    z-index: 100;		
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #e6e6e6;
   	/*min-width: 100px;*/
    width: 120%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: left;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: #CCC;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #00F;
    color: #FFF;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
  <link rel=stylesheet href="menuex.css" type="text/css"/>
</head>
<body>

  <div class="menuContainer">
  
    <div class="dropdown">
      <button class="dropbtn">List 1</button>
      <div class="dropdown-content">
        <a href="a1.html">Option 1</a>
        <a href="a2.html">Option 2</a>
        <a href="a3.html">Option 3</a>
      </div>
    </div>
    
    <div class="dropdown">
      <button class="dropbtn">List 2</button>
      <div class="dropdown-content">
        <a href="b1.html">Option 1</a>
        <a href="b2.html">Option 2</a>
        <a href="b3.html">Option 3</a>
      </div>
    </div>
    
  </div>

</body>
</html>

Michael Coker · Accepted Answer · 2017-03-06 19:55:43Z

1

The basic concept is nest a ul with your submenu inside of li elements, hide the ul's by default, then when you hover the li, show the ul

#tabs {
  width: 100%;
  background: #F1F1F1;
  font-size: 93%;
  line-height: normal;
  float: right;
}

#tabs > ul {
  margin: 0;
  padding: 10px 10px 0 220px;
  list-style: none;
}

#tabs > ul > li {
  display: inline;
  margin: 0;
  padding: 0;
}

#tabs > ul > li > a {
  margin: 0;
  padding: 6 0 0 4px;
  text-decoration: none;
}

#tabs > ul > li > a span {
  display: block;
  padding: 5px 15px 4px 6px;
  color: #FFF;
  background: #575757;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#tabs > ul > li > a span {
  float: left;
  display: block;
  padding: 19px 15px 1px 12px;
  font-family: Arial "sans-serif";
}


/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabs > ul > li > a span {
  float: none;
}


/* End IE5-Mac hack */

#tabs > ul > li > a:hover span {
  color: #FFF;
}

/* hide submenus by default */
li ul {
  display: none;
  position: absolute;
}
/* show the child submenu on hover */
li:hover > ul {
  display: block;
}

<div id="tabs">
  <ul>
    <li><a href="#"><span>Domov</span></a></li>
    <li>
      <a href="#"><span>test dropdown</span></a>
      <ul>
        <li>foo</li>
      </ul>
    </li>
  </ul>
</div>

answered Mar 6, 2017 at 19:55

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

1 Comment

Hartman Over a year ago

okey thanks it works but problem is that i wrote code for text-aling: left; and text it's still on right image : gyazo.com/4aeb0f89f6121649c5e1440b24e907f0

NBTX · Accepted Answer · 2017-03-06 20:04:01Z

1

You could use JavaScript (I also used jQuery to make it even easier but you can do without if required).

$(".dropdown-toggle").click(function(event){
	event.preventDefault();
  $("#" + $(this).data("toggle")).toggleClass("toggled");
});

.dropdown ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.dropdown:not(.toggled) ul{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a href="#" class="dropdown-toggle" data-toggle="exampleDropdown">Click Me</a></p>

<div class="dropdown" id="exampleDropdown">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
  </ul>
</div>

answered Mar 6, 2017 at 20:04

NBTX

6061 gold badge9 silver badges24 bronze badges

Collectives™ on Stack Overflow

Dropdown menu css

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related