HTML: Creating a drop-down list within an inline list with only HTML and CSS

Question

I am trying to create a horizontal (inline) list and on some of them I need to have a drop-down list that only appears on hover. Everything seems to work right now but my issue is that the drop-down list does not appear as a separate list but as part of the rest of the list. I do not want to use JavaScript unless there is no other solution.

My code:

.horizontalList ul {
list-style-type:none;
text-align: center;
margin:0;
padding:0;
}
.horizontalList ul li {
display: inline;
position: relative;


}
.horizontalList ul li li a{
white-space:nowrap;
background-color: #300;
top:1.4em;
}
.horizontalList ul li a {
text-decoration:none;
padding: .2em 1em;
color: #fff;
background-color: #036;

}
.horizontalList ul li a:hover {
color: #fff;
background-color: #369;
}
.horizontalList ul ul {
position: absolute;
top: 1.4em;
left: 0;
display: none;

}
.horizontalList ul > li:hover ul {
display: block;
}

<div class="horizontalList">
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Laptops</a>
      <ul>
        <li><a href="#"> Repairs and Servicing</a></li>
        <li><a href="#">Sales</a></li>
      </ul>
    </li>
    <li><a href="#">milks</a></li>
  </ul>
</div>

can u create it in jsfiddle and share link

Khaleel
– Khaleel

2014-09-19 10:14:01 +00:00
Commented Sep 19, 2014 at 10:14 — Khaleel
– Khaleel, Commented Sep 19, 2014 at 10:14

Katler · Accepted Answer · 2014-09-19 10:25:45Z

This is similar look as you had, just using something I put together a while ago as a template.

fiddle

html

<ul id="nav">
    <li>
        <a href="#">Home</a>
    </li>

    <li>
        <a href="#">Chickens</a>
        <ul>
            <li><a href="#">eggs</a></li>

            <li><a href="#">meat</a></li>
        </ul>
    </li>
<li><a href="#">milks</a></li>

css

#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    float:left; 
    width:100%;

}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}


#nav ul{
    background:#fff; 
    background:rgba(255,255,255,0); 
    list-style:none;
    position:absolute;
    left:-9999px; 
}
#nav ul li{
    padding-top:1px; 
    float:none;
}
#nav ul a{
    white-space:nowrap; 
}
#nav li:hover ul{ 
    left:0; 
}
#nav li:hover a{ 
    background:#6b0c36;
    text-decoration:underline;
}
#nav li:hover ul a{ 
    text-decoration:none;
}
#nav li:hover ul li a:hover{ 
    background:#333;
}

now just style it where necessary

Hidden Hobbes · Accepted Answer · 2014-09-19 10:15:50Z

3

This can be achieved by making the following changes:

Add position: relative; to .horizontalList ul li. This will ensure that the sub menu is positioned relative to the containing li
Add position: absolute; to .horizontalList ul ul. This will take it out of the normal flow and position it to the top and left values

CSS:

.horizontalList ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.horizontalList ul li {
    display: inline;
    position: relative;
}
.horizontalList ul li a {
    text-decoration:none;
    padding: .2em 1em;
    color: #fff;
    background-color: #036;
}
.horizontalList ul li a:hover {
    color: #fff;
    background-color: #369;
}
.horizontalList ul ul {
    position: absolute;
    top: 1.4em;
    left: 0;
    display: none;
}
.horizontalList ul > li:hover ul {
    display: block;
}

JS Fiddle: http://jsfiddle.net/s9z8rzt8/

answered Sep 19, 2014 at 10:15

Hidden Hobbes

14.2k3 gold badges42 silver badges65 bronze badges

6 Comments

John Demetriou Over a year ago

What you gave me works great. Now I have another issue though. The text of the drop-down list (eggs and meat) is larger than the list name above (chickens) I used different names for the code I posted here as to not share actual content. For example make the chickens part of the code 123, the eggs part 12345 6789 and the meat part 987 54321, it's a width issue I guess but how do I change it?

John Demetriou Over a year ago

How can I change the distance between each of the three outer list elements?

Hidden Hobbes Over a year ago

You'll need to show examples to ensure I'm understanding the issue correctly, however, I would say either add a width to .horizontalList ul ul or add a new rule .horizontalList ul li li a { display: block; white-space: nowrap; }. To change the distance between the three top level list items you can probably just add a margin to .horizontalList ul li.

John Demetriou Over a year ago

Edited my question with actual content. Please check it in your example to see what I have. I added the white-space: nowrap; in the code but it gets thrown to the side. Edited my question with extra code

Hidden Hobbes Over a year ago

Glad I could help, did you sort the other issues?

|

Collectives™ on Stack Overflow

HTML: Creating a drop-down list within an inline list with only HTML and CSS

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related