Create drop down menu without ul inside li
Question
I want to create a drop down menu but I faced some problem:
Actually I want to create it without making <ul> tag inside the <li> tag so the code :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a>Coffee</a></li>
<ul><li><a>Coffee 2</a></li></ul>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
</body>
</html>
and the css code :
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
z-index: 1;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
You can see that Coffee 2 is not dropdown it should be with coffe menu please help me without making the <ul> tag inside the <li> .
jsbin link : http://jsbin.com/evasof/1/edit
4 answers
solution1
3 ACCPTED 2013-05-08 13:07:27
Here you go:
<ul>
<li class="dpdwn"><a>Coffee</a><div><a>Coffe 2</a></div></li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
extra css:
.dpdwn div{
display: none;
}
.dpdwn:hover div {
display:block;
}
But in my opinion you should use a ul inside that li . Here's an example:
<ul>
<li class="dpdwn"><a>Coffee</a>
<ul>
<li><a>Coffe 2</a></li>
</ul>
</li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
That same extra css:
.dpdwn ul{
display: none;
}
.dpdwn:hover ul {
display:block;
}
solution2
1 2013-05-08 13:12:55
Assuming your HTML structure above, we can see that when we try and validate it at the W3C Validator that this structure is INVALID, and not accepted. You can see this from the provided screenshot below...
Beyond the fact that what you want is invalid markup, CSS-wise it is also impossible to handle the hover state in order to make your sub-menu appear. There is no selector in the current standard that allows you to select a sister sibling while hovering over a sibling.
My suggestion is to follow how it has been done for ages, what is valid markup, and how it will be for the foreseeable future, and nest the ul inside the li .
solution3
0 2013-05-08 12:57:03
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a>Coffee</a>
<ol><a>Coffe 2</a></ol></li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
</body>
</html>
you can use <ol> tag within <li> tag see above example
solution4
0 2013-05-08 13:20:45
You could use dl and dt and style them accordingly but I'm afraid at that point you're just trading one tag for another. As w/ the other answers, why are you trying to avoid using ul and li . Creating dropdown menus is something that there tags are very good at.
<dl>
<dt>Foo</dt>
<dt>Bar</dt>
</dl>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.